Add templates theming to docs.rs #1116

GuillaumeGomez · 2020-10-22T18:32:27Z

Follow-up of #1100.

Considering the huge amount of screenshots needed, I think the best would be to just let you test out. But just for your eyes:

cc @Cldfire (for the ayu theme)

Nemo157 · 2020-10-22T18:45:57Z

A few minor things that I found:

on the main page: the "Docs.rs" header stays black, and the search box should be the same as the rustdoc search box
on the badges page: the table header stays the same background color
the monthly release activity stays the same color, pretty low priority but might not be hard to change
the code blocks in the about/metadata page and source pages stay the same color, but that is probably complex as it ties into highlight.js, so could be done separately

GuillaumeGomez · 2020-10-22T19:09:24Z

on the main page: the "Docs.rs" header stays black, and the search box should be the same as the rustdoc search box

Good catch! Fixed.

on the badges page: the table header stays the same background color

Not sure what the result should look like. It just seemed nice as is so I kept it this way.

the monthly release activity stays the same color, pretty low priority but might not be hard to change

Which page are you referring to? (Not sure I went through this one...)

the code blocks in the about/metadata page and source pages stay the same color, but that is probably complex as it ties into highlight.js, so could be done separately

Yes, it's unfortunate but we'll need to deal with highlight.js theming system too.

Nemo157 · 2020-10-22T19:16:12Z

Not sure what the result should look like. It just seemed nice as is so I kept it this way.

👍 yeah, looks good enough

Which page are you referring to? (Not sure I went through this one...)

https://docs.rs/releases/activity

GuillaumeGomez · 2020-10-22T19:24:53Z

Oh I see. Hum... Seems like we have to go through Highchart.js API there too (or maybe someone knows another way?).

Cldfire · 2020-10-23T00:04:42Z

This looks fantastic!

I made a few tweaks over at Cldfire@7804bbc. Feel free to cherry-pick the commit / apply the changes:

diff --git a/templates/style/_themes.scss b/templates/style/_themes.scss
index 41d3ae8..660c07f 100644
--- a/templates/style/_themes.scss
+++ b/templates/style/_themes.scss
@@ -13,6 +13,7 @@ html {
   --color-menu-header-background: #e0e0e0;
   --color-navbar-standard: #777;
   --color-standard: #000;
+  --color-brand: #000;
   --color-struct: #df3600;
   --color-type: #e57300;
   --color-url: #4d76ae;
@@ -20,6 +21,8 @@ html {
   --color-warn-hover: #b25900;
   --color-warn: #e57300;
   --color-background-input: #fff;
+  --color-table-header-background: #e0e0e0;
+  --color-table-header: #000;
 }
 
 // To add a new theme, copy the above theme into a new `html[data-theme="name"]`
@@ -39,6 +42,7 @@ html[data-theme="dark"] {
   --color-menu-header-background: #e0e0e0;
   --color-navbar-standard: #ddd;
   --color-standard: #c0c0c0;
+  --color-brand: #fff;
   --color-struct: #df3600;
   --color-type: #e57300;
   --color-url: #d2991d;
@@ -46,6 +50,8 @@ html[data-theme="dark"] {
   --color-warn-hover: #b25900;
   --color-warn: #e57300;
   --color-background-input: #f0f0f0;
+  --color-table-header-background: #e0e0e0;
+  --color-table-header: #000;
 }
 
 html[data-theme="ayu"] {
@@ -62,6 +68,7 @@ html[data-theme="ayu"] {
   --color-menu-header-background: #e0e0e0;
   --color-navbar-standard: #ddd;
   --color-standard: #c5c5c5;
+  --color-brand: #fff;
   --color-struct: #df3600;
   --color-type: #e57300;
   --color-url: #39afd7;
@@ -69,4 +76,6 @@ html[data-theme="ayu"] {
   --color-warn-hover: #b25900;
   --color-warn: #e57300;
   --color-background-input: #141920;
+  --color-table-header-background: #364759;
+  --color-table-header: #eee;
 }
diff --git a/templates/style/base.scss b/templates/style/base.scss
index 546ff54..ac2a9f0 100644
--- a/templates/style/base.scss
+++ b/templates/style/base.scss
@@ -27,10 +27,16 @@ body {
 
     input, #search {
         background-color: var(--color-background-input);
+        color: var(--color-standard);
     }
 
     #search {
-        box-shadow: 0 0 0 1px var(--color-border), 0 0 0 2px transparent;
+        box-shadow: 0 0 0 1px var(--color-border), 0 0 0 1px var(--color-border);
+        transition: box-shadow 150ms ease-in-out;
+    }
+
+    #search:focus {
+        box-shadow: 0 0 0 1px #148099, 0 0 0 1px #148099;
     }
 
     // rustdocs have 200px sidebar and
@@ -99,7 +105,7 @@ div.landing {
     h1.brand {
         font-size: 3em;
         margin-bottom: 10px;
-        color: var(--color-standard);
+        color: var(--color-brand);
     }
 
     form.landing-search-form {
@@ -612,6 +618,11 @@ div.search-page-search-form {
         margin-bottom: 10px;
     }
 
+    thead {
+        background-color: var(--color-table-header-background);
+        color: var(--color-table-header);
+    }
+
     thead tr th {
         font-family: $font-family-sans;
         font-weight: 500;

This makes table headers look better for the ayu theme (feel free to change them for dark if you'd like):

it also improves the look of the front page a bit:

And gives the search bar a focus highlight like rustdoc's (feel free to improve this for the dark / light theme if you see a good way to do so):

This particular change:

     #search {
-        box-shadow: 0 0 0 1px var(--color-border), 0 0 0 2px transparent;
+        box-shadow: 0 0 0 1px var(--color-border), 0 0 0 1px var(--color-border);
+        transition: box-shadow 150ms ease-in-out;
+    }

Makes the border color / thickness uniform around the entire input for me in Firefox (the current rule resulted in a border that seemed dimmer on the bottom).

Everything else looks great to me. I don't personally think it's worth fixing the highchart in this PR (very few people ever look at that?) and the code block styling could be a follow up too imo.

Thanks so much for working on this everyone 🎉

Cldfire · 2020-10-23T00:06:25Z

Actually, one other quick thing I did notice:

The search input prompt is a bit hard to read for the dark theme.

Cldfire · 2020-10-23T00:57:11Z

And one other thought: I've had a simple solution to the highcharts style for years now in my userstyle:

rect.highcharts-background {
    fill: #0f1419;
}

text.highcharts-title, g.highcharts-axis-labels > text {
    fill: #e6e6e6 !important;
}

g.highcharts-legend-item > text {
    fill: #5c6773 !important;
}

g.highcharts-grid > path {
    stroke: #5c6773 !important;
}

This is what it looks like:

Maybe worth using, maybe not, depends on how hard it is to customize the chart itself I guess.

Kixiron · 2020-10-23T02:11:47Z

I'm planning on removing our highcharts dependency eventually, we can generate graphs with tera

GuillaumeGomez · 2020-10-23T08:24:12Z

Oh damn.You really did a great job @Cldfire ! I'll cherry-pick your commit and use your css for the graph then. :)

GuillaumeGomez · 2020-10-23T09:27:49Z

And here we are! I improved the input, fixed a few small things and also included improvements for the graphs.

Nemo157

Looks great to me

Nemo157 · 2020-10-23T10:13:56Z

And then I went and built some docs with the newest nightly to test the preferred color scheme matching and this happened, something's going wrong somewhere 🤔

Nemo157 · 2020-10-23T10:19:18Z

Looks like a rustdoc bug, it doesn't update local storage if switching to the light theme since that's already the theme displayed, even though it's not stored.

Nemo157 · 2020-10-23T10:22:16Z

But, using ui.systemUsesDarkTheme to test it we correctly detect and switch the docs.rs theme when rustdoc changes it 🎉.

Cldfire

Looks great, now we just need to make sure that rustdoc issue gets fixed :)

jyn514 · 2020-10-26T14:42:38Z

Looks like a rustdoc bug, it doesn't update local storage if switching to the light theme since that's already the theme displayed, even though it's not stored.

Is this an accurate summary of the current behavior?

On crates built before Always store Rustdoc theme when it's changed rust#78293, when you visit the first time they'll look really weird, the same as in Add templates theming to docs.rs #1116 (comment).
If you visit another crate before, it will get updated properly. It's only when the first crate was built with an old rustdoc.
If you change the theme explicitly, it will fix the docs.rs theme. The bug happens only when you haven't explicitly set the theme and rustdoc is changing the theme to match your system theme.

I had trouble testing this - once I changed the theme the first time I can't replicate the original issue, even with a new private window.

How does this behave for docs built before the rustdoc changes? Will they still have the theme switched appropriately?

jyn514 · 2020-10-26T14:44:05Z

But, using ui.systemUsesDarkTheme to test it we correctly detect and switch the docs.rs theme when rustdoc changes it 🎉.

I think this will break if we use it for docs built before rust-lang/rust#77809, so I'd rather not go with that solution.

GuillaumeGomez · 2020-10-26T14:45:17Z

How does this behave for docs built before the rustdoc changes? Will they still have the theme switched appropriately?

Based on the script written by @Nemo157, they should get updated as long as the docs has been generated using a rustdoc version than supported themes (so a very old one).

jyn514 · 2020-10-26T14:45:44Z

This doesn't update codeblocks, so they look a little blinding in night mode:

Could we fix that?

Nemo157 · 2020-10-26T14:48:03Z

I wonder if we could reset the colors for the rustdoc_body_wrapper element somehow, so that our theme doesn't leak into rustdoc at all. That would avoid the issue with rustdoc not applying the theme, and just result in the opposite inconsistency, docs.rs would be in dark theme while rustdoc was in light theme.

jyn514 · 2020-10-26T14:48:08Z

This doesn't update the search bar, so it's a little hard to read:
It would be best to make the text white to match the rest of the header, I think.

GuillaumeGomez · 2020-10-26T14:49:47Z

This doesn't update codeblocks, so they look a little blinding in night mode:

If it's on the docs.rs pages, then not directly since it depends on highlight.js and not HTML/CSS only. We discussed about it a few comments ago. ;)

This doesn't update the search bar, so it's a little hard to read:

Nice catch! Taking a look.

Nemo157 · 2020-10-26T14:52:25Z

On crates built before rust-lang/rust#78293, when you visit the first time they'll look really weird, the same as in #1116 (comment).

Specifically only docs built between rust-lang/rust#77809 and rust-lang/rust#78293, which is about 8 days worth of docs.

GuillaumeGomez · 2020-10-26T15:00:21Z

Fixed the input issue.

jyn514 · 2020-10-26T20:08:13Z

I wonder if we could reset the colors for the rustdoc_body_wrapper element somehow, so that our theme doesn't leak into rustdoc at all. That would avoid the issue with rustdoc not applying the theme, and just result in the opposite inconsistency, docs.rs would be in dark theme while rustdoc was in light theme.

I think we can do this in a follow-up, the current behavior seems 'good enough' to me if only a week of docs are affected only briefly.

jyn514 · 2020-10-26T20:20:17Z

This makes the build logs very hard to read in dark mode:

jyn514 added A-frontend Area: Web frontend S-waiting-on-review Status: This pull request has been implemented and needs to be reviewed labels Oct 22, 2020

GuillaumeGomez force-pushed the full-theming branch from 5479a29 to 3ac82f3 Compare October 22, 2020 19:06

GuillaumeGomez and others added 3 commits October 23, 2020 11:21

Add templates theming to docs.rs

f48e17c

A couple tweaks for the new themes

5883743

Improve input rendering

9196477

GuillaumeGomez force-pushed the full-theming branch from 3ac82f3 to 9196477 Compare October 23, 2020 09:26

Nemo157 approved these changes Oct 23, 2020

View reviewed changes

Nemo157 mentioned this pull request Oct 23, 2020

Rustdoc does not update the stored theme if the currently displayed theme matches the system rust-lang/rust#78273

Closed

Cldfire approved these changes Oct 23, 2020

View reviewed changes

Fix navbar input color

8092e90

Add missing rule for builds page

4a2e7a1

jyn514 merged commit 202599b into rust-lang:master Oct 26, 2020

GuillaumeGomez deleted the full-theming branch October 26, 2020 20:39

jyn514 mentioned this pull request Oct 26, 2020

Please provide a dark theme for non-rustdoc pages on docs.rs #918

Closed

Nemo157 mentioned this pull request Oct 26, 2020

Themes don't update codeblocks, so they look a little blinding in night mode #1127

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add templates theming to docs.rs #1116

Add templates theming to docs.rs #1116

GuillaumeGomez commented Oct 22, 2020 •

edited

Loading

Nemo157 commented Oct 22, 2020

GuillaumeGomez commented Oct 22, 2020

Nemo157 commented Oct 22, 2020 •

edited

Loading

GuillaumeGomez commented Oct 22, 2020

Cldfire commented Oct 23, 2020

Cldfire commented Oct 23, 2020

Cldfire commented Oct 23, 2020

Kixiron commented Oct 23, 2020

GuillaumeGomez commented Oct 23, 2020

GuillaumeGomez commented Oct 23, 2020

Nemo157 left a comment

Nemo157 commented Oct 23, 2020

Nemo157 commented Oct 23, 2020

Nemo157 commented Oct 23, 2020

Cldfire left a comment

jyn514 commented Oct 26, 2020 •

edited

Loading

jyn514 commented Oct 26, 2020

GuillaumeGomez commented Oct 26, 2020

jyn514 commented Oct 26, 2020

Nemo157 commented Oct 26, 2020

jyn514 commented Oct 26, 2020

GuillaumeGomez commented Oct 26, 2020

Nemo157 commented Oct 26, 2020 •

edited

Loading

GuillaumeGomez commented Oct 26, 2020

jyn514 commented Oct 26, 2020

jyn514 commented Oct 26, 2020

Add templates theming to docs.rs #1116

Add templates theming to docs.rs #1116

Conversation

GuillaumeGomez commented Oct 22, 2020 • edited Loading

Nemo157 commented Oct 22, 2020

GuillaumeGomez commented Oct 22, 2020

Nemo157 commented Oct 22, 2020 • edited Loading

GuillaumeGomez commented Oct 22, 2020

Cldfire commented Oct 23, 2020

Cldfire commented Oct 23, 2020

Cldfire commented Oct 23, 2020

Kixiron commented Oct 23, 2020

GuillaumeGomez commented Oct 23, 2020

GuillaumeGomez commented Oct 23, 2020

Nemo157 left a comment

Choose a reason for hiding this comment

Nemo157 commented Oct 23, 2020

Nemo157 commented Oct 23, 2020

Nemo157 commented Oct 23, 2020

Cldfire left a comment

Choose a reason for hiding this comment

jyn514 commented Oct 26, 2020 • edited Loading

jyn514 commented Oct 26, 2020

GuillaumeGomez commented Oct 26, 2020

jyn514 commented Oct 26, 2020

Nemo157 commented Oct 26, 2020

jyn514 commented Oct 26, 2020

GuillaumeGomez commented Oct 26, 2020

Nemo157 commented Oct 26, 2020 • edited Loading

GuillaumeGomez commented Oct 26, 2020

jyn514 commented Oct 26, 2020

jyn514 commented Oct 26, 2020

GuillaumeGomez commented Oct 22, 2020 •

edited

Loading

Nemo157 commented Oct 22, 2020 •

edited

Loading

jyn514 commented Oct 26, 2020 •

edited

Loading

Nemo157 commented Oct 26, 2020 •

edited

Loading