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

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.

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

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

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 🎉

Actually, one other quick thing I did notice:

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

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.

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

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

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

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 🤔

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.

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

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?

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.

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).

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

Could we fix that?

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.

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.

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.

• 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.

Fixed the input issue.

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.

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