fix: improve color scheme

3 files changed, 44 insertions, 252 deletions

diff --git a/sass/_colors.scss b/sass/_colors.scss
index 35d0c13..2a63c6e 100644
--- a/sass/_colors.scss
+++ b/sass/_colors.scss
@@ -1,50 +1,49 @@
+@import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
+@import url("syntax-theme-light.css") (prefers-color-scheme: light);
+
 :root {
   color-scheme: light dark;
 
-  --bg_h: #1d2021;
-  --bg_s: #32302f;
-  --bg: #282828;
+  --bg: #1d2021;
   --bg1: #3c3836;
   --bg2: #504945;
   --bg3: #665c54;
   --bg4: #7c6f64;
 
-  --fg: #fbf1c7;
+  --fg: #f9f5d7;
   --fg1: #ebdbb2;
   --fg2: #d5c4a1;
   --fg3: #bdae93;
   --fg4: #a89984;
 
-  --red: #fb4934;
-  --green: #b8bb26;
-  --yellow: #fabd2f;
-  --blue: #83a598;
-  --purple: #d3869b;
-  --aqua: #8ec07c;
-  --gray: #928374;
-  --orange: #fe8019;
+  --red: #cc2412;
+  --green: #98971a;
+  --yellow: #d79921;
+  --blue: #458588;
+  --purple: #b16286;
+  --cyan: #689d6a;
+  --gray: #a89984;
+  --orange: #d65d0e;
 
-  --red-dim: #cc2412;
-  --green-dim: #98971a;
-  --yellow-dim: #d79921;
-  --blue-dim: #458588;
-  --purple-dim: #b16286;
-  --aqua-dim: #689d6a;
-  --gray-dim: #a89984;
-  --orange-dim: #d65d0e;
+  --bright-red: #fb4934;
+  --bright-green: #b8bb26;
+  --bright-yellow: #fabd2f;
+  --bright-blue: #83a598;
+  --bright-purple: #d3869b;
+  --bright-cyan: #8ec07c;
+  --bright-gray: #928374;
+  --bright-orange: #fe8019;
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    --bg_h: #f9f5d7;
-    --bg_s: #f2e5bc;
-    --bg: #fbf1c7;
+    --bg: #f9f5d7;
     --bg1: #ebdbb2;
     --bg2: #d5c4a1;
     --bg3: #bdae93;
     --bg4: #a89984;
 
-    --fg: #282828;
+    --fg: #1d2021;
     --fg1: #3c3836;
     --fg2: #504945;
     --fg3: #665c54;
@@ -55,17 +54,17 @@
     --yellow: #b57614;
     --blue: #076678;
     --purple: #8f3f71;
-    --aqua: #427b58;
+    --cyan: #427b58;
     --orange: #af3a03;
     --gray: #928374;
 
-    --red-dim: #cc2412;
-    --green-dim: #98971a;
-    --yellow-dim: #d79921;
-    --blue-dim: #458598;
-    --purple-dim: #b16286;
-    --aqua-dim: #689d6a;
-    --orange-dim: #d65d0e;
-    --gray-dim: #7c6f64;
+    --bright-red: #cc2412;
+    --bright-green: #98971a;
+    --bright-yellow: #d79921;
+    --bright-blue: #458598;
+    --bright-purple: #b16286;
+    --bright-cyan: #689d6a;
+    --bright-orange: #d65d0e;
+    --bright-gray: #7c6f64;
   }
 }
diff --git a/sass/_syntax.scss b/sass/_syntax.scss
deleted file mode 100644
index d4cafa0..0000000
--- a/sass/_syntax.scss
+++ /dev/null
@@ -1,207 +0,0 @@
-/*
- * theme "gruvbox" generated by syntect
- */
-
-.z-code {
-  color: var(--fg);
-  background-color: var(--bg_h);
-}
-
-.z-punctuation.z-definition.z-tag {
-  color: var(--blue);
-}
-.z-punctuation.z-definition.z-entity {
-  color: var(--purple);
-}
-.z-constant {
-  color: var(--purple);
-}
-.z-constant.z-character.z-escape {
-  color: var(--green);
-}
-.z-constant.z-other {
-  color: var(--fg);
-}
-.z-entity {
-  color: var(--aqua);
-}
-.z-keyword.z-operator.z-comparison,
-.z-keyword.z-operator,
-.z-keyword.z-operator.z-symbolic,
-.z-keyword.z-operator.z-string,
-.z-keyword.z-operator.z-assignment,
-.z-keyword.z-operator.z-arithmetic,
-.z-keyword.z-operator.z-class,
-.z-keyword.z-operator.z-key,
-.z-keyword.z-operator.z-logical {
-  color: var(--orange);
-}
-.z-keyword,
-.z-keyword.z-operator.z-new,
-.z-keyword.z-other,
-.z-keyword.z-control {
-  color: var(--red);
-}
-.z-storage {
-  color: var(--red);
-}
-.z-string,
-.z-string.z-unquoted.z-heredoc .z-string {
-  color: var(--green);
-}
-.z-comment {
-  color: var(--gray);
-  font-style: italic;
-}
-.z-string.z-regexp .z-constant.z-character.z-escape {
-  color: var(--green);
-}
-.z-support {
-  color: var(--yellow);
-}
-.z-variable {
-  color: var(--fg);
-}
-.z-variable.z-language {
-  color: var(--fg);
-}
-.z-meta.z-function-call {
-  color: var(--fg);
-}
-.z-invalid {
-  color: var(--fg);
-  background-color: var(--red-dim);
-}
-.z-text .z-source,
-.z-string.z-unquoted.z-heredoc,
-.z-source .z-source {
-  color: var(--fg);
-}
-.z-string.z-quoted .z-source {
-  color: var(--green);
-}
-.z-string {
-  color: var(--green);
-}
-.z-support.z-constant {
-  color: var(--yellow);
-}
-.z-support.z-class {
-  color: var(--aqua);
-}
-.z-entity.z-name.z-tag {
-  color: var(--aqua);
-  font-weight: bold;
-}
-.z-meta.z-tag,
-.z-meta.z-tag .z-entity {
-  color: var(--aqua);
-}
-.z-constant.z-other.z-color.z-rgb-value {
-  color: var(--blue);
-}
-.z-meta.z-selector.z-css .z-entity.z-name.z-tag {
-  color: var(--red);
-}
-.z-meta.z-selector.z-css,
-.z-entity.z-other.z-attribute-name.z-id {
-  color: var(--green);
-}
-.z-meta.z-selector.z-css .z-entity.z-other.z-attribute-name.z-class {
-  color: var(--green);
-}
-.z-support.z-type.z-property-name.z-css {
-  color: var(--aqua);
-}
-.z-meta.z-preprocessor.z-at-rule .z-keyword.z-control.z-at-rule {
-  color: var(--yellow);
-}
-.z-meta.z-property-value .z-constant {
-  color: var(--yellow);
-}
-.z-meta.z-property-value .z-support.z-constant.z-named-color.z-css {
-  color: var(--orange);
-}
-.z-meta.z-constructor.z-argument.z-css {
-  color: var(--yellow);
-}
-.z-meta.z-diff,
-.z-meta.z-diff.z-header {
-  color: var(--blue);
-}
-.z-markup.z-deleted {
-  color: var(--red);
-}
-.z-markup.z-changed {
-  color: var(--yellow);
-}
-.z-markup.z-inserted {
-  color: var(--aqua);
-}
-.z-markup.z-bold {
-  font-weight: bold;
-}
-.z-markup.z-italic {
-  font-style: italic;
-}
-.z-markup.z-heading {
-  color: var(--aqua);
-  font-weight: bold;
-}
-.z-entity.z-name.z-type.z-class.z-php {
-  color: var(--aqua);
-}
-.z-keyword.z-other.z-phpdoc {
-  color: var(--gray);
-}
-.z-constant.z-numeric.z-css,
-.z-keyword.z-other.z-unit.z-css {
-  color: var(--purple);
-}
-.z-punctuation.z-definition.z-entity.z-css {
-  color: var(--green);
-}
-.z-variable.z-language.z-js {
-  color: var(--yellow);
-}
-.z-string.z-unquoted.z-label.z-js {
-  color: var(--fg);
-}
-.z-constant.z-other.z-table-name.z-sql {
-  color: var(--green);
-}
-.z-constant.z-other.z-database-name.z-sql {
-  color: var(--green);
-}
-.z-storage.z-type.z-dired.z-item.z-directory,
-.z-dired.z-item.z-directory {
-  color: var(--aqua);
-}
-.z-orgmode.z-link {
-  color: var(--yellow);
-  font-style: underline;
-}
-.z-orgmode.z-page {
-  color: var(--green);
-}
-.z-orgmode.z-break {
-  color: var(--purple);
-}
-.z-orgmode.z-headline {
-  color: var(--aqua);
-}
-.z-orgmode.z-tack {
-  color: var(--yellow);
-}
-.z-orgmode.z-follow_up {
-  color: var(--yellow);
-}
-.z-orgmode.z-checkbox {
-  color: var(--yellow);
-}
-.z-orgmode.z-checkbox.z-summary {
-  color: var(--yellow);
-}
-.z-orgmode.z-tags {
-  color: var(--red);
-}
diff --git a/sass/style.scss b/sass/style.scss
index c2eddb8..d234f58 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,7 +1,7 @@
-@import "colors", "code", "syntax";
+@import "colors", "code";
 
 html {
-  background: var(--bg_s);
+  background: var(--bg);
   color: var(--fg);
   font-size: 14pt;
   font-family: monospace;
@@ -20,10 +20,10 @@ ul.simple {
 }
 
 a {
-  color: var(--aqua);
+  color: var(--bright-cyan);
 
   &:visited {
-    color: var(--aqua-dim);
+    color: var(--cyan);
   }
 
   text-decoration: none;
@@ -33,12 +33,12 @@ a {
   }
 
   &:active {
-    background: var(--orange-dim);
+    background: var(--orange);
   }
 }
 
 footer {
-  color: var(--gray);
+  color: var(--bright-gray);
   font-size: 0.8rem;
 }
 
@@ -84,11 +84,11 @@ body {
     a,
     a:visited {
       font-size: 1.2rem;
-      color: var(--gray);
+      color: var(--bright-gray);
       font-weight: bold;
 
       &.active {
-        color: var(--orange-dim);
+        color: var(--orange);
       }
     }
   }
@@ -101,12 +101,12 @@ body {
     & > header {
       & > hgroup {
         & > :first-child {
-          color: var(--orange);
+          color: var(--bright-orange);
           margin-bottom: 0;
         }
 
         & > :not(:first-child) {
-          color: var(--gray-dim);
+          color: var(--gray);
           margin-top: 0;
           margin-bottom: 0;
         }
@@ -154,10 +154,10 @@ body {
   }
 
   li > article > header > hgroup > :first-child a {
-    color: var(--blue);
+    color: var(--bright-blue);
 
     &:visited {
-      color: var(--blue-dim);
+      color: var(--blue);
     }
   }