Use system colors

2 files changed, 24 insertions, 66 deletions

diff --git a/_css/style.css b/_css/style.css
index 5eb5926..354e65e 100644
--- a/_css/style.css
+++ b/_css/style.css
@@ -1,49 +1,15 @@
 /* Variables */
 :root {
-    --black: #1c1b19;
-    --red: #ef2f27;
-    --green: #519f50;
-    --yellow: #fbb829;
-    --blue: #2c78bf;
-    --magenta: #e02c6d;
-    --cyan: #0aaeb3;
-    --white: #d0bfa1;
-    --bright-black: #918175;
-    --bright-red: #f75341;
-    --bright-green: #98bc37;
-    --bright-yellow: #fed06e;
-    --bright-blue: #68a8e4;
-    --bright-magenta: #ff5c8f;
-    --bright-cyan: #53fde9;
-    --bright-white: #fce8c3;
-
-    --block-bg: var(--black);
-    --fade-fg: var(--bright-black);
-    --link-fg: var(--green);
-    --overlay-bg: #8881;
-    --text-bg: #121212;
-    --text-fg: var(--bright-white);
-}
-
-@media (prefers-color-scheme: light) {
-    :root {
-        --block-bg: #eeeeec;
-        --fade-fg: #888a85;
-        --link-fg: #436e58;
-        --text-bg: #ffffff;
-        --text-fg: #2e3436;
-    }
+    --overlay-bg: #8882;
+    --overlay-border: #8884;
 }
 
 /* Default font and layout */
 html {
-    background-color: var(--text-bg);
     box-sizing: border-box;
-    color: var(--text-fg);
     font-size: clamp(100%, 2vw, 150%);
     margin: auto;
     max-width: 36rem;
-    scrollbar-color: var(--fade-fg) var(--overlay-bg);
 }
 
 body { margin: 0 1rem }
@@ -64,7 +30,7 @@ p, details {
 .franklin-content h4 a,
 .franklin-content h5 a,
 .franklin-content h6 a {
-    color: var(--text-fg);
+    color: CanvasText;
 }
 
 .franklin-content h1 a:hover,
@@ -83,19 +49,13 @@ p, details {
 /* General formatting */
 .franklin-content li p { margin: 0 }
 
-.franklin-content a {
-    color: var(--link-fg);
-    text-decoration: none;
-}
+.franklin-content a { text-decoration: none }
 
 .franklin-content a:hover {
     text-decoration: underline;
  }
 
 /* Hyperrefs and footnotes */
-.franklin-content .bibref a,
-.franklin-content .eqref a { color: var(--link-fg) }
-
 .franklin-content .fndef {
     border: none;
     margin: 1ex 0;
@@ -132,12 +92,10 @@ p, details {
 .note p:first-child { font-weight: bold }
 .franklin-content blockquote {
     background: var(--overlay-bg);
-    border-left: 0.25rem solid #8884;
-}
-.note {
-    background-color: #51affe25;
-    border-left: 0.25rem solid var(--blue);
+    color: ButtonText;
+    border-left: 0.25rem solid var(--overlay-border);
 }
+.note { background-color: var(--overlay-bg) }
 
 /* Header */
 header {
@@ -150,19 +108,16 @@ header {
 
 header a {
     border-bottom: solid;
-    color: var(--link-fg);
     font-weight: bold;
     margin: 0 0.5rem;
     text-decoration: none;
-    transition: color 0.3s ease;
 }
-header a:hover { color: var(--text-fg) }
 
 nav, nav li { display: inline-block }
 nav ul { margin: 0 }
 
 footer, .tags, .right {
-    color: var(--fade-fg);
+    color: GrayText;
     font-size: 80%;
 }
 
@@ -172,7 +127,7 @@ footer {
 }
 
 footer a, .tags a {
-    color: var(--fade-fg)!important;
+    color: GrayText;
     text-decoration: underline!important;
 }
 
@@ -185,9 +140,9 @@ footer a, .tags a {
 
 /* Table */
 table {
-    border-bottom: 0.15em solid var(--text-fg);
+    border-bottom: 0.15em solid;
     border-collapse: collapse;
-    border-top: 0.15em solid var(--text-fg);
+    border-top: 0.15em solid;
     line-height: 1em;
     margin-bottom: 1.5em;
     margin-left: auto;
@@ -195,12 +150,13 @@ table {
     text-align: center;
 }
 
-tr:first-of-type > th { border-bottom: 0.08em solid var(--text-fg) }
+tr:first-of-type > th { border-bottom: 0.08em solid }
 tr, th, td { padding: 0.5em }
 
 /* highlight.js */
 code, .hljs {
-    background-color: var(--block-bg);
+    background-color: ButtonFace;
+    color: CanvasText;
     font-size: inherit;
     padding: 0.1em 0.2em;
 }
@@ -211,22 +167,22 @@ code, .hljs {
     overflow-x: auto;
 }
 
-.hljs-built_in .hljs-name, .hljs-title, .hljs-type { color: var(--cyan) }
-.hljs-code, .hljs-selector-class { color: var(--bright-blue) }
-.hljs-comment, .hljs-deletion, .hljs-meta { color: var(--fade-fg) }
+.hljs-built_in .hljs-name, .hljs-title, .hljs-type { color: Teal }
+.hljs-code, .hljs-selector-class { color: LinkText }
+.hljs-comment, .hljs-deletion, .hljs-meta { color: GrayText }
 .hljs-comment, .hljs-emphasis { font-style: italic; }
-.hljs-string { color: var(--bright-green) }
+.hljs-string { color: Green }
 .hljs-strong { font-weight: bold; }
 
 .hljs-bullet, .hljs-quote, .hljs-link, .hljs-number,
-.hljs-regexp, .hljs-literal { color: var(--bright-magenta) }
+.hljs-regexp, .hljs-literal { color: VisitedText }
 
 .hljs-keyword, .hljs-selector-tag, .hljs-section,
-.hljs-attribute, .hljs-variable { color: var(--red) }
+.hljs-attribute, .hljs-variable { color: ActiveText }
 
 .hljs-subst, .hljs-symbol, .hljs-selector-id, .hljs-selector-attr,
 .hljs-selector-pseudo, .hljs-template-tag, .hljs-template-variable,
-.hljs-addition { color: var(--red) }
+.hljs-addition { color: Olive }
 
 .comment {
     background-color: var(--overlay-bg);
@@ -244,7 +200,8 @@ code, .hljs {
 }
 .fead h3 { margin: 0 0 1ex }
 .fead article {
-    background: var(--overlay-bg);
+    background: ButtonFace;
+    color: ButtonText;
     display: flex;
     flex-direction: column;
     flex: 1 1 0;
diff --git a/_layout/hair.html b/_layout/hair.html
index ffebb85..07821e4 100644
--- a/_layout/hair.html
+++ b/_layout/hair.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang=en>
 <meta charset=utf-8>
+<meta name=color-scheme content='dark light'>
 <meta name=viewport content='width=device-width, initial-scale=1'>
 <link rel='alternate' type='application/rss+xml' title='{{website_title}}'
       href='/{{ispage /tag/*}}tag/{{fd_tag}}/{{end}}{{rss_file}}.xml'>