Rollup merge of #99152 - GuillaumeGomez:css-theme-var, r=jsha

Use CSS variables to handle theming (part 2)

Follow-up of https://github.com/rust-lang/rust/pull/98460.

As usual, there shouldn't be any UI change.

You can test it [here](https://rustdoc.crud.net/imperio/css-theme-var/bar/index.html).

r? `@jsha`

4 files changed, 45 insertions, 163 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 5c7b56ec140..e8f069cdbfe 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -141,6 +141,10 @@ h1, h2, h3, h4 {
 h1.fqn {
 	margin: 0;
 	padding: 0;
+	border-bottom-color: var(--headings-border-bottom-color);
+}
+h2, h3, h4 {
+	border-bottom-color: var(--headings-border-bottom-color);
 }
 .main-heading {
 	display: flex;
@@ -377,6 +381,10 @@ nav.sub {
 	object-fit: contain;
 }
 
+.sidebar, .mobile-topbar, .sidebar-menu-toggle {
+	background-color: var(--sidebar-background-color);
+}
+
 .sidebar {
 	font-size: 0.875rem;
 	width: 250px;
@@ -443,9 +451,11 @@ nav.sub {
 /* Improve the scrollbar display on firefox */
 * {
 	scrollbar-width: initial;
+	scrollbar-color: var(--scrollbar-color);
 }
 .sidebar {
 	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-color);
 }
 
 /* Improve the scrollbar display on webkit-based browsers */
@@ -457,6 +467,13 @@ nav.sub {
 }
 ::-webkit-scrollbar-track {
 	-webkit-box-shadow: inset 0;
+	background-color: var(--scrollbar-track-background-color);
+}
+.sidebar::-webkit-scrollbar-track {
+	background-color: var(--scrollbar-track-background-color);
+}
+::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
+	background-color: var(--scrollbar-thumb-background-color);
 }
 
 /* Everything else */
@@ -637,6 +654,9 @@ h2.location a {
 
 .docblock h5 { font-size: 1rem; }
 .docblock h6 { font-size: 0.875rem; }
+.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 {
+	border-bottom-color: var(--headings-border-bottom-color);
+}
 
 .docblock {
 	margin-left: 24px;
@@ -672,6 +692,11 @@ h2.location a {
 	display: inline-block;
 }
 
+.docblock code, .docblock-short code,
+pre, .rustdoc.source .example-wrap {
+	background-color: var(--code-block-background-color);
+}
+
 #main-content {
 	position: relative;
 }
@@ -1914,6 +1939,10 @@ in storage.js plus the media query with (min-width: 701px)
 		border: none;
 	}
 
+	.sidebar-elems {
+		background-color: var(--sidebar-background-color);
+	}
+
 	.source nav:not(.sidebar).sub {
 		margin-left: 32px;
 	}
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index b25f5e9fdb1..73d18df7656 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -9,6 +9,11 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--settings-input-color: #ffb454;
 	--sidebar-background-color: #14191f;
 	--sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
+	--code-block-background-color: #191f26;
+	--scrollbar-track-background-color: transparent;
+	--scrollbar-thumb-background-color: #5c6773;
+	--scrollbar-color: #5c6773 #24292f;
+	--headings-border-bottom-color: #5c6773;
 }
 
 .slider {
@@ -24,15 +29,9 @@ input:focus + .slider {
 h1, h2, h3, h4 {
 	color: white;
 }
-h1.fqn {
-	border-bottom-color: #5c6773;
-}
 h1.fqn  a {
 	color: #fff;
 }
-h2, h3, h4 {
-	border-bottom-color: #5c6773;
-}
 h4 {
 	border: none;
 }
@@ -56,16 +55,8 @@ span code {
 .docblock a > code {
 	color: #39AFD7 !important;
 }
-.docblock code, .docblock-short code {
-	background-color: #191f26;
-}
 pre, .rustdoc.source .example-wrap {
 	color: #e6e1cf;
-	background-color: #191f26;
-}
-
-.sidebar, .mobile-topbar, .sidebar-menu-toggle {
-	background-color: #14191f;
 }
 
 .rust-logo {
@@ -75,29 +66,6 @@ pre, .rustdoc.source .example-wrap {
 		drop-shadow(0 -1px 0 #fff);
 }
 
-/* Improve the scrollbar display on firefox */
-* {
-	scrollbar-color: #5c6773 #24292f;
-}
-
-.sidebar {
-	scrollbar-color: #5c6773 #24292f;
-}
-
-/* Improve the scrollbar display on webkit-based browsers */
-::-webkit-scrollbar-track {
-	background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-	background-color: #5c6773;
-}
-.sidebar::-webkit-scrollbar-track {
-	background-color: transparent;
-}
-.sidebar::-webkit-scrollbar-thumb {
-	background-color: #5c6773;
-}
-
 .sidebar .current,
 .sidebar a:hover {
 	background-color: transparent;
@@ -116,10 +84,6 @@ pre, .rustdoc.source .example-wrap {
 	border-right: 1px solid #ffb44c;
 }
 
-.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 {
-	border-bottom-color: #5c6773;
-}
-
 .docblock table td, .docblock table th {
 	border-color: #5c6773;
 }
@@ -496,21 +460,9 @@ a.result-keyword:focus {}
 .sidebar a.current.keyword {}
 
 @media (max-width: 700px) {
-	.sidebar-menu {
-		background-color: #14191f;
-		border-bottom-color: #5c6773;
-		border-right-color: #5c6773;
-	}
-
 	.sidebar-elems {
-		background-color: #14191f;
 		border-right-color: #5c6773;
 	}
-
-	#sidebar-filler {
-		background-color: #14191f;
-		border-bottom-color: #5c6773;
-	}
 }
 
 kbd {
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 184d0e77a90..93dca51307f 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -2,8 +2,13 @@
 	--main-background-color: #353535;
 	--main-color: #ddd;
 	--settings-input-color: #2196f3;
-	--sidebar-background-color: #565656;
+	--sidebar-background-color: #505050;
 	--sidebar-background-color-hover: #676767;
+	--code-block-background-color: #2A2A2A;
+	--scrollbar-track-background-color: #717171;
+	--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
+	--scrollbar-color: rgba(32,34,37,.6) #5a5a5a;
+	--headings-border-bottom-color: #d2d2d2;
 }
 
 .slider {
@@ -16,28 +21,10 @@ input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
 
-h1.fqn {
-	border-bottom-color: #d2d2d2;
-}
-h2, h3, h4 {
-	border-bottom-color: #d2d2d2;
-}
-
 .in-band {
 	background-color: #353535;
 }
 
-.docblock code, .docblock-short code {
-	background-color: #2A2A2A;
-}
-pre, .rustdoc.source .example-wrap {
-	background-color: #2A2A2A;
-}
-
-.sidebar, .mobile-topbar, .sidebar-menu-toggle {
-	background-color: #505050;
-}
-
 .rust-logo {
 	filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
@@ -45,28 +32,6 @@ pre, .rustdoc.source .example-wrap {
 		drop-shadow(0 -1px 0 #fff)
 }
 
-/* Improve the scrollbar display on firefox */
-* {
-	scrollbar-color: rgb(64, 65, 67) #717171;
-}
-.sidebar {
-	scrollbar-color: rgba(32,34,37,.6) #5a5a5a;
-}
-
-/* Improve the scrollbar display on webkit-based browsers */
-::-webkit-scrollbar-track {
-	background-color: #717171;
-}
-::-webkit-scrollbar-thumb {
-	background-color: rgba(32, 34, 37, .6);
-}
-.sidebar::-webkit-scrollbar-track {
-	background-color: #717171;
-}
-.sidebar::-webkit-scrollbar-thumb {
-	background-color: rgba(32, 34, 37, .6);
-}
-
 .sidebar .current,
 .sidebar a:hover {
 	background: #444;
@@ -356,21 +321,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
 }
 
 @media (max-width: 700px) {
-	.sidebar-menu {
-		background-color: #505050;
-		border-bottom-color: #e0e0e0;
-		border-right-color: #e0e0e0;
-	}
-
 	.sidebar-elems {
-		background-color: #505050;
 		border-right-color: #000;
 	}
-
-	#sidebar-filler {
-		background-color: #505050;
-		border-bottom-color: #e0e0e0;
-	}
 }
 
 kbd {
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index c6ba13fe1d6..73731bc8f9f 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -4,6 +4,11 @@
 	--settings-input-color: #2196f3;
 	--sidebar-background-color: #F5F5F5;
 	--sidebar-background-color-hover: #E0E0E0;
+	--code-block-background-color: #F5F5F5;
+	--scrollbar-track-background-color: #dcdcdc;
+	--scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6);
+	--scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
+	--headings-border-bottom-color: #ddd;
 }
 
 .slider {
@@ -16,57 +21,16 @@ input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
 
-h1.fqn {
-	border-bottom-color: #DDDDDD;
-}
-h2, h3, h4 {
-	border-bottom-color: #DDDDDD;
-}
-
 .in-band {
 	background-color: white;
 }
 
-.docblock code, .docblock-short code {
-	background-color: #F5F5F5;
-}
-pre, .rustdoc.source .example-wrap {
-	background-color: #F5F5F5;
-}
-
-.sidebar, .mobile-topbar, .sidebar-menu-toggle {
-	background-color: #F5F5F5;
-}
-
-/* Improve the scrollbar display on firefox */
-* {
-	scrollbar-color: rgba(36, 37, 39, 0.6) #e6e6e6;
-}
-
-.sidebar {
-	scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
-}
-
 .rust-logo {
 	/* This rule exists to force other themes to explicitly style the logo.
 	 * Rustdoc has a custom linter for this purpose.
 	 */
 }
 
-/* Improve the scrollbar display on webkit-based browsers */
-::-webkit-scrollbar-track {
-	background-color: #ecebeb;
-}
-::-webkit-scrollbar-thumb {
-	background-color: rgba(36, 37, 39, 0.6);
-}
-.sidebar::-webkit-scrollbar-track {
-	background-color: #dcdcdc;
-}
-.sidebar::-webkit-scrollbar-thumb {
-	background-color: rgba(36, 37, 39, 0.6);
-}
-
 .sidebar .current,
 .sidebar a:hover {
 	background-color: #fff;
@@ -77,10 +41,6 @@ pre, .rustdoc.source .example-wrap {
 	background-color: #FDFFD3 !important;
 }
 
-.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5, .docblock h6 {
-	border-bottom-color: #ddd;
-}
-
 .docblock table td, .docblock table th {
 	border-color: #ddd;
 }
@@ -339,21 +299,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
 }
 
 @media (max-width: 700px) {
-	.sidebar-menu {
-		background-color: #F5F5F5;
-		border-bottom-color: #e0e0e0;
-		border-right-color: #e0e0e0;
-	}
-
 	.sidebar-elems {
-		background-color: #F5F5F5;
 		border-right-color: #000;
 	}
-
-	#sidebar-filler {
-		background-color: #F5F5F5;
-		border-bottom-color: #e0e0e0;
-	}
 }
 
 kbd {