Simplify CSS theming by setting CSS variables

matthiaskrgr · Jun 28, 2022 · 7f6ce7d · 7f6ce7d
1 parent a518b3a
commit 7f6ce7d
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 199 deletions.
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -114,6 +114,9 @@ body {
 	-webkit-font-feature-settings: "kern", "liga";
 	-moz-font-feature-settings: "kern", "liga";
 	font-feature-settings: "kern", "liga";
+
+	background-color: var(--main-background-color);
+	color: var(--main-color);
 }
 
 h1 {
@@ -214,6 +217,26 @@ a.srclink,
 	font-family: "Fira Sans", Arial, NanumBarunGothic, sans-serif;
 }
 
+h1, h2, h3, h4,
+a#toggle-all-docs,
+a.anchor,
+.small-section-header a,
+#source-sidebar a,
+pre.rust a,
+.sidebar h2 a,
+.sidebar h3 a,
+.mobile-topbar h2 a,
+.in-band a,
+.search-results a,
+.module-item .stab,
+.import-item .stab,
+.result-name .primitive > i, .result-name .keyword > i,
+.content .method .where,
+.content .fn .where,
+.content .where.fmt-newline {
+	color: var(--main-color);
+}
+
 ol, ul {
 	padding-left: 24px;
 }
@@ -391,6 +414,14 @@ nav.sub {
 	display: none;
 }
 
+.source .sidebar, #sidebar-toggle, #source-sidebar {
+	background-color: var(--sidebar-background-color);
+}
+
+#sidebar-toggle:hover {
+	background-color: var(--sidebar-background-color-hover);
+}
+
 .source .sidebar > *:not(#sidebar-toggle) {
 	opacity: 0;
 	visibility: hidden;
@@ -1003,6 +1034,11 @@ table,
 	top: -5px;
 }
 
+.popover, .popover::before {
+	background-color: var(--main-background-color);
+	color: var(--main-color);
+}
+
 #help-button .popover {
 	max-width: 600px;
 }
@@ -1423,6 +1459,25 @@ pre.rust {
 	animation: rotating 2s linear infinite;
 }
 
+.setting-line .radio-line input:checked {
+	box-shadow: inset 0 0 0 3px var(--main-background-color);
+	background-color: var(--settings-input-color);
+}
+.setting-line .radio-line input:focus {
+	box-shadow: 0 0 1px 1px var(--settings-input-color);
+}
+/* In here we combine both `:focus` and `:checked` properties. */
+.setting-line .radio-line input:checked:focus {
+	box-shadow: inset 0 0 0 3px var(--main-background-color),
+		0 0 2px 2px var(--settings-input-color);
+}
+.setting-line .radio-line input:hover {
+	border-color: var(--settings-input-color) !important;
+}
+input:checked + .slider {
+	background-color: var(--settings-input-color);
+}
+
 #help-button > button {
 	font-family: "Fira Sans", Arial, sans-serif;
 	text-align: center;

diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
@@ -3,30 +3,12 @@ Based off of the Ayu theme
 Original by Dempfi (https://github.com/dempfi/ayu)
 */
 
-/* General structure and fonts */
-
-body, .popover, .popover::before {
-	background-color: #0f1419;
-	color: #c5c5c5;
-}
-
-.setting-line .radio-line input {
-	border-color: #c5c5c5;
-}
-.setting-line .radio-line input:checked {
-	box-shadow: inset 0 0 0 3px #0f1419;
-	background-color: #ffb454;
-}
-.setting-line .radio-line input:focus {
-	box-shadow: 0 0 1px 1px #ffb454;
-}
-/* In here we combine both `:focus` and `:checked` properties. */
-.setting-line .radio-line input:checked:focus {
-	box-shadow: inset 0 0 0 3px 0f1419,
-		0 0 2px 2px #ffb454;
-}
-.setting-line .radio-line input:hover {
-	border-color: #ffb454 !important;
+:root {
+	--main-background-color: #0f1419;
+	--main-color: #c5c5c5;
+	--settings-input-color: #ffb454;
+	--sidebar-background-color: #14191f;
+	--sidebar-background-color-hover: rgba(70, 70, 70, 0.33);
 }
 
 .slider {
@@ -35,9 +17,6 @@ body, .popover, .popover::before {
 .slider:before {
 	background-color: white;
 }
-input:checked + .slider {
-	background-color: #ffb454;
-}
 input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
@@ -125,10 +104,6 @@ pre, .rustdoc.source .example-wrap {
 	color: #ffb44c;
 }
 
-.source .sidebar {
-	background-color: #14191f;
-}
-
 .sidebar-elems .location {
 	color: #ff7733;
 }
@@ -149,12 +124,6 @@ pre, .rustdoc.source .example-wrap {
 	border-color: #5c6773;
 }
 
-.content .method .where,
-.content .fn .where,
-.content .where.fmt-newline {
-	color: #c5c5c5;
-}
-
 .search-results a:hover {
 	background-color: #777;
 }
@@ -229,17 +198,6 @@ a {
 	color: #39AFD7;
 }
 
-a#toggle-all-docs,
-a.anchor,
-.small-section-header a,
-#source-sidebar a,
-pre.rust a,
-.sidebar h2 a,
-.sidebar h3 a,
-.mobile-topbar h2 a,
-.in-band a {
-	color: #c5c5c5;
-}
 .sidebar h2 a,
 .sidebar h3 a {
 	color: white;
@@ -613,15 +571,6 @@ kbd {
 	color: #999;
 }
 
-#sidebar-toggle {
-	background-color: #14191f;
-}
-#sidebar-toggle:hover {
-	background-color: rgba(70, 70, 70, 0.33);
-}
-#source-sidebar {
-	background-color: #14191f;
-}
 #source-sidebar > .title {
 	color: #fff;
 	border-bottom-color: #5c6773;

diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
@@ -1,25 +1,9 @@
-body, .popover, .popover::before {
-	background-color: #353535;
-	color: #ddd;
-}
-
-.setting-line .radio-line input {
-	border-color: #ddd;
-}
-.setting-line .radio-line input:checked {
-	box-shadow: inset 0 0 0 3px #353535;
-	background-color: #2196f3;
-}
-.setting-line .radio-line input:focus {
-	box-shadow: 0 0 1px 1px #2196f3;
-}
-/* In here we combine both `:focus` and `:checked` properties. */
-.setting-line .radio-line input:checked:focus {
-	box-shadow: inset 0 0 0 3px #353535,
-		0 0 2px 2px #2196f3;
-}
-.setting-line .radio-line input:hover {
-	border-color: #2196f3 !important;
+:root {
+	--main-background-color: #353535;
+	--main-color: #ddd;
+	--settings-input-color: #2196f3;
+	--sidebar-background-color: #565656;
+	--sidebar-background-color-hover: #676767;
 }
 
 .slider {
@@ -28,16 +12,10 @@ body, .popover, .popover::before {
 .slider:before {
 	background-color: white;
 }
-input:checked + .slider {
-	background-color: #2196F3;
-}
 input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
 
-h1, h2, h3, h4 {
-	color: #ddd;
-}
 h1.fqn {
 	border-bottom-color: #d2d2d2;
 }
@@ -94,10 +72,6 @@ pre, .rustdoc.source .example-wrap {
 	background: #444;
 }
 
-.source .sidebar {
-	background-color: #565656;
-}
-
 .line-numbers span { color: #3B91E2; }
 .line-numbers .line-highlighted {
 	background-color: #0a042f !important;
@@ -111,12 +85,6 @@ pre, .rustdoc.source .example-wrap {
 	border-color: #ddd;
 }
 
-.content .method .where,
-.content .fn .where,
-.content .where.fmt-newline {
-	color: #ddd;
-}
-
 .search-results a:hover {
 	background-color: #777;
 }
@@ -210,20 +178,6 @@ a {
 	color: #D2991D;
 }
 
-a#toggle-all-docs,
-a.anchor,
-.small-section-header a,
-#source-sidebar a,
-pre.rust a,
-.sidebar h2 a,
-.sidebar h3 a,
-.mobile-topbar h2 a,
-.in-band a {
-	color: #ddd;
-}
-.search-results a {
-	color: #ddd;
-}
 a.test-arrow {
 	color: #dedede;
 }
@@ -257,11 +211,6 @@ details.undocumented > summary::before {
 	border-color: #008dfd;
 }
 
-.module-item .stab,
-.import-item .stab {
-	color: #ddd;
-}
-
 .stab.empty-impl { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; }
 .stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #2f2f2f; }
 .stab.deprecated { background: #ffc4c4; border-color: #db7b7b; color: #2f2f2f; }
@@ -287,10 +236,6 @@ details.undocumented > summary::before {
 	color: grey;
 }
 
-.result-name .primitive > i, .result-name .keyword > i {
-	color: #ddd;
-}
-
 .line-numbers :target { background-color: transparent; }
 
 /* Code highlighting */
@@ -484,15 +429,6 @@ kbd {
 	color: #ccc;
 }
 
-#sidebar-toggle {
-	background-color: #565656;
-}
-#sidebar-toggle:hover {
-	background-color: #676767;
-}
-#source-sidebar {
-	background-color: #565656;
-}
 #source-sidebar > .title {
 	border-bottom-color: #ccc;
 }