diff --git a/src/_Layout.cshtml b/src/_Layout.cshtml
index e294f32bb73..20187c1b1df 100644
--- a/src/_Layout.cshtml
+++ b/src/_Layout.cshtml
@@ -1,4 +1,4 @@
-
+
@Page.Title
@@ -6,6 +6,7 @@
+
diff --git a/src/css/site.css b/src/css/site.css
index 0607bb27c6c..ae8c29172c4 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -1,7 +1,19 @@
-@-ms-viewport {
+@-ms-viewport {
width: device-width;
}
+:root {
+ --bg-0: light-dark(white, #121212);
+ --bg-1: light-dark(#f1f1f1, #0e0e0e);
+ --bg-2: light-dark(#c0c0c0, #000);
+ --fg-0: light-dark(#333, #e0e0e0);
+ --fg-link: light-dark(dodgerblue, #67b4ff);
+ --bg-header: light-dark(#555, #222);
+ --fg-header: light-dark(white, var(--fg-0));
+ --bg-selection: light-dark(#000, initial);
+ --fg-selection: light-dark(white, initial);
+}
+
body {
font:
18px/1.5 'Segoe UI',
@@ -11,8 +23,8 @@ body {
Arial,
sans-serif;
margin: 0;
- background: white;
- color: #333;
+ background: var(--bg-0);
+ color: var(--fg-0);
-ms-touch-action: manipulation;
touch-action: manipulation;
}
@@ -36,7 +48,7 @@ img {
}
a {
- color: dodgerblue;
+ color: var(--fg-link);
}
a:hover {
@@ -49,13 +61,13 @@ ol {
}
::selection {
- background: #000;
- color: white;
+ background: var(--bg-selection);
+ color: var(--fg-selection);
}
::-moz-selection {
- background: #000;
- color: white;
+ background: var(--bg-selection);
+ color: var(--fg-selection);
}
.container {
@@ -65,14 +77,14 @@ ol {
}
header {
- background: #555;
- color: #fff;
+ background: var(--bg-header);
+ color: var(--fg-header);
height: 60px;
line-height: 60px;
}
header h1 a {
- color: #fff;
+ color: var(--fg-header);
text-decoration: none;
margin: 0;
}
@@ -94,9 +106,9 @@ header h1 a {
#main article pre {
overflow: auto;
max-width: 100%;
- background: #f1f1f1;
+ background: var(--bg-1);
padding: 0.6em;
- border: 1px solid silver;
+ border: 1px solid var(--bg-2);
border-radius: 5px;
line-height: normal;
}
@@ -156,7 +168,7 @@ footer {
}
footer p {
- border-top: 1px solid #f1f1f1;
+ border-top: 1px solid var(--bg-1);
margin-top: 50px;
padding-top: 10px;
}