Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Theme detection #1100

Merged
merged 4 commits into from
Oct 22, 2020
Merged

Theme detection #1100

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f239e4
Move all colours to CSS variables
Nemo157 Oct 14, 2020
e7382a2
Add automated detection of the current rustdoc theme
Nemo157 Oct 12, 2020
819f5dc
Use specific colors rather than lighten/darken
Nemo157 Oct 16, 2020
56e6d77
Duplicate comment about storage event iframe
Nemo157 Oct 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions static/storage-change-detection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
Kixiron marked this conversation as resolved.
Show resolved Hide resolved
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
onstorage = function(ev) {
parent.postMessage({
storage: {
key: ev.key,
value: ev.newValue,
}
})
}
</script>
</head>
</html>
2 changes: 2 additions & 0 deletions templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
<link rel="search" href="/-/static/opensearch.xml" type="application/opensearchdescription+xml" title="Docs.rs" />

<title>{%- block title -%} Docs.rs {%- endblock title -%}</title>

<script type="text/javascript">{%- include "theme.js" -%}</script>
</head>

<body>
Expand Down
12 changes: 12 additions & 0 deletions templates/rustdoc/body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,16 @@
window.addEventListener("scroll", maybeFixupViewPortPosition, {"once": true});
}
}

window.addEventListener('message', function (ev) {
if (ev.data && ev.data.storage && ev.data.storage.key === 'rustdoc-theme') {
applyTheme(ev.data.storage.value);
}
});
</script>
<!--
Only other windows get notified when we change local storage, so we have an
invisible iframe that sends us a message when local storage changes so we
can detect rustdoc changing the theme
Comment on lines +40 to +42
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only other windows get notified when we change local storage

Who came up with that idea??? 🤦

Well, if that's the case this looks fine.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, and I was very surprised to find out that neither dedicated or shared workers get the events either, even though they should be treated as a separate context, requiring going all the way to loading another document in an iframe.

-->
<iframe src="/-/static/storage-change-detection.html" width="0" height="0" style="display: none"></iframe>
2 changes: 2 additions & 0 deletions templates/rustdoc/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@
<link rel="stylesheet" href="/-/static/style.css?{{ docsrs_version() | slugify }}" type="text/css" media="all" />

<link rel="search" href="/-/static/opensearch.xml" type="application/opensearchdescription+xml" title="Docs.rs" />

<script type="text/javascript">{%- include "theme.js" -%}</script>
28 changes: 14 additions & 14 deletions templates/style/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ div.nav-container {
// Nothing is supposed to be over or hovering the top navbar. Maybe add a few others '('? :)
z-index: 999;
height: $top-navbar-height;
border-bottom: 1px solid $color-border;
background-color: #fff;
border-bottom: 1px solid var(--color-border);
background-color: var(--color-background);
jyn514 marked this conversation as resolved.
Show resolved Hide resolved
left: 0;
right: 0;
top: 0;
position: fixed;

li {
border-left: 1px solid $color-border;
border-left: 1px solid var(--color-border);
}

.pure-menu-has-children > .pure-menu-link:after {
Expand All @@ -25,7 +25,7 @@ div.nav-container {
font-weight: 400;

&:hover {
color: $color-standard;
color: var(--color-standard);
background-color: inherit;
}
}
Expand All @@ -41,7 +41,7 @@ div.nav-container {
float: right;
max-width: 150px;
display: none;
border-left: 1px solid $color-border;
border-left: 1px solid var(--color-border);

@media #{$media-sm} {
display: block;
Expand All @@ -52,7 +52,7 @@ div.nav-container {
}

label {
color: #777;
color: var(--color-navbar-standard);
cursor: pointer;
padding-left: 0.5rem;
font-size: 0.8em;
Expand All @@ -63,7 +63,7 @@ div.nav-container {
margin: 0 1em 0 0;
font-size: 0.8em;
box-shadow: none;
background-color: #fff;
background-color: var(--color-background);
height: 31px;
}
}
Expand All @@ -74,7 +74,7 @@ div.nav-container {
}

.pure-menu-children {
border: 1px solid $color-border;
border: 1px solid var(--color-border);
border-radius: 0 0 2px 2px;
margin-left: -1px;

Expand All @@ -86,19 +86,19 @@ div.nav-container {
// used for latest version warning
.warn,
.warn:hover {
color: $color-type;
color: var(--color-warn);
}

a.warn:hover {
color: darken($color-type, 10%);
color: var(--color-warn-hover);
}

// used for global alerts
.error {
color: $color-red;
color: var(--color-error);

&:hover {
color: darken($color-red, 10%);
color: var(--color-error-hover);
}
}

Expand Down Expand Up @@ -142,7 +142,7 @@ div.nav-container {
p.description {
font-family: $font-family-sans;
font-size: 0.8em;
color: #777; // color from pure
color: var(--color-navbar-standard);
padding: 0.5em 1em;
margin: 0;
}
Expand All @@ -152,7 +152,7 @@ div.nav-container {
}

div.right-border {
border-right: 1px solid $color-border;
border-right: 1px solid var(--color-border);
}

a.pure-menu-link {
Expand Down
25 changes: 25 additions & 0 deletions templates/style/_themes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// Standard white theme
html {
--color-background-code: #f5f5f5;
--color-background: #fff;
--color-border-light: lighten(#ddd, 5%);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should probably be

Suggested change
--color-border-light: lighten(#ddd, 5%);
--color-border-light: lighten(var(--color-border), 5%);

although not sure if that syntax works.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope, lighten is an SCSS function which needs the value at compile time, but lucky you mentioned it cause it turns out that function doesn't run in this context for some reason and instead lighten is put into the output CSS, I think we need to just precalculate the values here.

--color-border: #ddd;
--color-doc-link-background: #333;
jyn514 marked this conversation as resolved.
Show resolved Hide resolved
--color-doc-link-hover: #3061f3;
--color-error-hover: darken(#d93d3d, 10%);
--color-error: #d93d3d;
--color-macro: #068000;
--color-menu-border: #cdcdcd;
--color-menu-header-background: #e0e0e0;
--color-navbar-standard: #777;
--color-standard: #000;
--color-struct: #df3600;
--color-type: #e57300;
--color-url: #4d76ae;
--color-warn-background: lighten(#e57300, 45%);
--color-warn-hover: darken(#e57300, 10%);
--color-warn: #e57300;
}

// To add a new theme, copy the above theme into a new `html[data-theme="name"]`
// block below and change the colors
6 changes: 3 additions & 3 deletions templates/style/_utils.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@ div {
.info {
font-family: $font-family-sans;
border-radius: 4px;
background-color: $color-background-code;
background-color: var(--color-background-code);
padding: 0.4em 1em;
text-align: center;
margin-bottom: 10px;

a {
color: $color-url;
color: var(--color-url);
text-decoration: underline;
}
}

.warning {
@extend .info;

background-color: lighten($color-type, 45%);
background-color: var(--color-warn-background);
}
}
16 changes: 0 additions & 16 deletions templates/style/_vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,6 @@ $font-family-sans: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: "Source Serif Pro", Georgia, Times, "Times New Roman", serif;
$font-family-mono: "Source Code Pro", Menlo, Monaco, Consolas, "DejaVu Sans Mono", Inconsolata, monospace;

// Colors
$color-standard: #000; // pure black
$color-url: #4d76ae; // blue
$color-macro: #068000; // green
$color-struct: #df3600; // red
$color-enum: #5e9766; // light green
$color-type: #e57300; // orange
$color-keyword: #8959A8; // purple
$color-string: #718C00; // greenish
$color-macro-in-code: #3E999F; // blueish
$color-lifetime-incode: #B76514; // orangish
$color-comment-in-code: #8E908C; // light gray
$color-background-code: #F5F5F5; // lighter gray
$color-border: #ddd; // gray
$color-red: #d93d3d; // red

// Sizes
$top-navbar-height: 32px; // height of the floating top navbar

Expand Down
Loading