Add dark mode

lovejavaee · Apr 13, 2021 · f757a6f · f757a6f
1 parent b454346
commit f757a6f
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 76 deletions.
diff --git a/_sass/_og.scss b/_sass/_og.scss
@@ -3,17 +3,38 @@
 //
 
 :root {
-  --red: #f03e3e;
-  --pink: #d6336c;
-  --purple: #7048e8;
-  --blue: #1c7ed6;
-  --indigo: #4263eb;
-  --cyan: #1098ad;
-  --gray: #212529;
+  --blue: #0d6efd;
+  --indigo: #6610f2;
+  --purple: #6f42c1;
+  --pink: #d63384;
+  --red: #dc3545;
+  --orange: #fd7e14;
+  --yellow: #ffc107;
+  --green: #198754;
+  --teal: #20c997;
+  --cyan: #0dcaf0;
+  --white: #fff;
+  --gray: #6c757d;
+  --gray-dark: #343a40;
+
+  --blue-300: #6ea8fe;
+  --blue-700: #084298;
 
   --body-bg: #fff;
   --body-color: #212529;
   --accent-bg: #f8f9fa;
+  --link-color: var(--blue);
+  --masthead-bg: var(--blue);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-bg: #212529;
+    --body-color: #dee2e6;
+    --accent-bg: #2a2f34;
+    --link-color: var(--blue-300);
+    --masthead-bg: var(--blue-700);
+  }
 }
 
 *,
@@ -40,7 +61,7 @@ body {
 }
 
 a {
-  color: var(--blue);
+  color: var(--link-color);
   text-decoration: none;
 
   &:hover {
@@ -153,7 +174,7 @@ pre {
   padding-bottom: 3rem;
   margin-bottom: 3rem;
   color: #fff;
-  background-color: var(--blue);
+  background-color: var(--masthead-bg);
 
   @media (min-width: 960px) {
     padding-top: 6rem;
@@ -265,7 +286,7 @@ pre {
 h2 {
   padding-top: 1rem;
   margin-bottom: 1.5rem;
-  border-top: .125rem solid;
+  border-top: .25rem solid;
 }
 
 

diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss
@@ -1,66 +1,132 @@
-.hll { background-color: #ffffcc }
- /*{ background: #f0f3f3; }*/
-.c { color: #999; } /* Comment */
-.err { color: #AA0000; background-color: #FFAAAA } /* Error */
-.k { color: #006699; } /* Keyword */
-.o { color: #555555 } /* Operator */
-.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
-.cp { color: #009999 } /* Comment.Preproc */
-.c1 { color: #999; } /* Comment.Single */
-.cs { color: #999; } /* Comment.Special */
-.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
-.ge { font-style: italic } /* Generic.Emph */
-.gr { color: #FF0000 } /* Generic.Error */
-.gh { color: #003300; } /* Generic.Heading */
-.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
-.go { color: #AAAAAA } /* Generic.Output */
-.gp { color: #000099; } /* Generic.Prompt */
-.gs { } /* Generic.Strong */
-.gu { color: #003300; } /* Generic.Subheading */
-.gt { color: #99CC66 } /* Generic.Traceback */
-.kc { color: #006699; } /* Keyword.Constant */
-.kd { color: #006699; } /* Keyword.Declaration */
-.kn { color: #006699; } /* Keyword.Namespace */
-.kp { color: #006699 } /* Keyword.Pseudo */
-.kr { color: #006699; } /* Keyword.Reserved */
-.kt { color: #007788; } /* Keyword.Type */
-.m { color: #FF6600 } /* Literal.Number */
-.s { color: #d44950 } /* Literal.String */
-.na { color: #4f9fcf } /* Name.Attribute */
-.nb { color: #336666 } /* Name.Builtin */
-.nc { color: #00AA88; } /* Name.Class */
-.no { color: #336600 } /* Name.Constant */
-.nd { color: #9999FF } /* Name.Decorator */
-.ni { color: #999999; } /* Name.Entity */
-.ne { color: #CC0000; } /* Name.Exception */
-.nf { color: #CC00FF } /* Name.Function */
-.nl { color: #9999FF } /* Name.Label */
-.nn { color: #00CCFF; } /* Name.Namespace */
-.nt { color: #2f6f9f; } /* Name.Tag */
-.nv { color: #003333 } /* Name.Variable */
-.ow { color: #000000; } /* Operator.Word */
-.w { color: #bbbbbb } /* Text.Whitespace */
-.mf { color: #FF6600 } /* Literal.Number.Float */
-.mh { color: #FF6600 } /* Literal.Number.Hex */
-.mi { color: #FF6600 } /* Literal.Number.Integer */
-.mo { color: #FF6600 } /* Literal.Number.Oct */
-.sb { color: #CC3300 } /* Literal.String.Backtick */
-.sc { color: #CC3300 } /* Literal.String.Char */
-.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
-.s2 { color: #CC3300 } /* Literal.String.Double */
-.se { color: #CC3300; } /* Literal.String.Escape */
-.sh { color: #CC3300 } /* Literal.String.Heredoc */
-.si { color: #AA0000 } /* Literal.String.Interpol */
-.sx { color: #CC3300 } /* Literal.String.Other */
-.sr { color: #33AAAA } /* Literal.String.Regex */
-.s1 { color: #CC3300 } /* Literal.String.Single */
-.ss { color: #FFCC33 } /* Literal.String.Symbol */
-.bp { color: #336666 } /* Name.Builtin.Pseudo */
-.vc { color: #003333 } /* Name.Variable.Class */
-.vg { color: #003333 } /* Name.Variable.Global */
-.vi { color: #003333 } /* Name.Variable.Instance */
-.il { color: #FF6600 } /* Literal.Number.Integer.Long */
-
-.css .o,
-.css .o + .nt,
-.css .nt + .nt { color: #999; }
+// GitHub
+:root {
+    --base00: #ffffff;
+    --base01: #f5f5f5;
+    --base02: #c8c8fa;
+    --base03: #969896;
+    --base04: #030303;
+    --base05: #333333;
+    --base06: #ffffff;
+    --base07: #b08800;
+    --base08: #ed6a43;
+    --base09: #0086b3;
+    --base0A: #795da3;
+    --base0B: #183691;
+    --base0C: #183691;
+    --base0D: #795da3;
+    --base0E: #a71d5d;
+    --base0F: #333333;
+  }
+
+  // One Light
+  // :root {
+  //   --base00: #fafafa;
+  //   --base01: #f0f0f1;
+  //   --base02: #e5e5e6;
+  //   --base03: #a0a1a7;
+  //   --base04: #696c77;
+  //   --base05: #383a42;
+  //   --base06: #202227;
+  //   --base07: #090a0b;
+  //   --base08: #ca1243;
+  //   --base09: #d75f00;
+  //   --base0A: #c18401;
+  //   --base0B: #50a14f;
+  //   --base0C: #0184bc;
+  //   --base0D: #4078f2;
+  //   --base0E: #a626a4;
+  //   --base0F: #986801;
+  // }
+
+  @media (prefers-color-scheme: dark) {
+    // One Dark
+    :root {
+      --base00: #282c34;
+      --base01: #353b45;
+      --base02: #3e4451;
+      --base03: #545862;
+      --base04: #565c64;
+      --base05: #abb2bf;
+      --base06: #b6bdca;
+      --base07: #d19a66;
+      --base08: #e06c75;
+      --base09: #d19a66;
+      --base0A: #e5c07b;
+      --base0B: #98c379;
+      --base0C: #56b6c2;
+      --base0D: #61afef;
+      --base0E: #c678dd;
+      --base0F: #be5046;
+    }
+  }
+
+  .hll { background-color: #ffffff }
+  .c { color: var(--base03) }
+  .err { color: var(--base08) }
+  .k { color: var(--base0E) }
+  .l { color: var(----base09) }
+  .n { color: var(--base08) }
+  .o { color: var(--base08) }
+  .p { color: var(--base05) }
+  .cm { color: var(--base04) }
+  .cp { color: var(--base04) }
+  .c1 { color: var(--base03) }
+  .cs { color: var(--base04) }
+  .gd { color: var(--base08) }
+  .ge { font-style: italic }
+  .gh { color: #ffffff; font-weight: bold }
+  .gi { color: var(--base0C) }
+  .gp { color: var(--base04); font-weight: bold }
+  .gs { font-weight: bold }
+  .gu { color: var(--base0C); font-weight: bold }
+  .kc { color: var(--base0E) }
+  .kd { color: var(--base0E) }
+  .kn { color: var(--base0C) }
+  .kp { color: var(--base0E) }
+  .kr { color: var(--base0E) }
+  .kt { color: var(--base0A) }
+  .ld { color: var(--base0C) }
+  .m { color: var(--base09) }
+  .s { color: var(--base0C) }
+  .na { color: var(--base08) }
+  .nb { color: var(--base05) }
+  .nc { color: var(--base07) }
+  .no { color: var(--base08) }
+  .nd { color: var(--base07) }
+  .ni { color: #ffffff }
+  .ne { color: var(--base08) }
+  .nf { color: var(--base0B) }
+  .nl { color: var(--base05) }
+  .nn { color: var(--base0A) }
+  .nx { color: var(--base0A) }
+  .py { color: var(--base08) }
+  .nt { color: var(--base08) }
+  .nv { color: var(--base08) }
+  .ow { color: var(--base0C) }
+  .w { color: #ffffff }
+  .mf { color: var(--base09) }
+  .mh { color: var(--base09) }
+  .mi { color: var(--base09) }
+  .mo { color: var(--base09) }
+  .sb { color: var(--base0C) }
+  .sc { color: #ffffff }
+  .sd { color: var(--base04) }
+  .s2 { color: var(--base0C) }
+  .se { color: var(--base09) }
+  .sh { color: var(--base0C) }
+  .si { color: var(--base09) }
+  .sx { color: var(--base0C) }
+  .sr { color: var(--base0C) }
+  .s1 { color: var(--base0C) }
+  .ss { color: var(--base0C) }
+  .bp { color: var(--base05) }
+  .vc { color: var(--base08) }
+  .vg { color: var(--base08) }
+  .vi { color: var(--base08) }
+  .il { color: var(--base09) }
+
+  // Color commas in rgba() values
+  .m + .o { color: var(--base03) }
+
+  // Fix bash
+  .language-sh .c { color: var(--base03) }