Merge pull request #43 from tuurep/issue/17-light-mode

jannis-baum · Nov 27, 2023 · 3a67feb · 3a67feb
2 parents c9395e0 + 0daba26
commit 3a67feb
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 1 deletion.
diff --git a/static/highlight.css b/static/highlight.css
@@ -42,3 +42,122 @@
     color: #ffdcd7;
     background-color: #67060c;
 }
+
+/* light mode */
+/* source: https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css */
+@media (prefers-color-scheme: light) {
+    .hljs {
+        color: #24292e;
+        background: #ffffff;
+    }
+
+    .hljs-doctag,
+    .hljs-keyword,
+    .hljs-meta .hljs-keyword,
+    .hljs-template-tag,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable.language_ {
+        /* prettylights-syntax-keyword */
+        color: #d73a49;
+    }
+
+    .hljs-title,
+    .hljs-title.class_,
+    .hljs-title.class_.inherited__,
+    .hljs-title.function_ {
+        /* prettylights-syntax-entity */
+        color: #6f42c1;
+    }
+
+    .hljs-attr,
+    .hljs-attribute,
+    .hljs-literal,
+    .hljs-meta,
+    .hljs-number,
+    .hljs-operator,
+    .hljs-variable,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-id {
+        /* prettylights-syntax-constant */
+        color: #005cc5;
+    }
+
+    .hljs-regexp,
+    .hljs-string,
+    .hljs-meta .hljs-string {
+        /* prettylights-syntax-string */
+        color: #032f62;
+    }
+
+    .hljs-built_in,
+    .hljs-symbol {
+        /* prettylights-syntax-variable */
+        color: #e36209;
+    }
+
+    .hljs-comment,
+    .hljs-code,
+    .hljs-formula {
+        /* prettylights-syntax-comment */
+        color: #6a737d;
+    }
+
+    .hljs-name,
+    .hljs-quote,
+    .hljs-selector-tag,
+    .hljs-selector-pseudo {
+        /* prettylights-syntax-entity-tag */
+        color: #22863a;
+    }
+
+    .hljs-subst {
+        /* prettylights-syntax-storage-modifier-import */
+        color: #24292e;
+    }
+
+    .hljs-section {
+        /* prettylights-syntax-markup-heading */
+        color: #005cc5;
+        font-weight: bold;
+    }
+
+    .hljs-bullet {
+        /* prettylights-syntax-markup-list */
+        color: #735c0f;
+    }
+
+    .hljs-emphasis {
+        /* prettylights-syntax-markup-italic */
+        color: #24292e;
+        font-style: italic;
+    }
+
+    .hljs-strong {
+        /* prettylights-syntax-markup-bold */
+        color: #24292e;
+        font-weight: bold;
+    }
+
+    .hljs-addition {
+        /* prettylights-syntax-markup-inserted */
+        color: #22863a;
+        background-color: #f0fff4;
+    }
+
+    .hljs-deletion {
+        /* prettylights-syntax-markup-deleted */
+        color: #b31d28;
+        background-color: #ffeef0;
+    }
+
+    .hljs-char.escape_,
+    .hljs-link,
+    .hljs-params,
+    .hljs-property,
+    .hljs-punctuation,
+    .hljs-tag {
+        /* purposely ignored */
+    }
+}
diff --git a/static/style.css b/static/style.css
@@ -24,7 +24,7 @@ h1, h2 {
 pre {
     background-color: #161616;
     padding: 1rem;
-    overflow: scroll;
+    overflow: auto;
 }
 code {
     background-color: #333;
@@ -66,6 +66,15 @@ a#parent-dir {
 }
 a#parent-dir:hover { opacity: 1; }
 
+/* --------------------------------------------------------------------------
+ * QUOTES ------------------------------------------------------------------- */
+blockquote {
+    padding: 0 1em;
+    color: #6a6a6a;
+    border-left: .25em solid #353535;
+    margin-left: 0
+}
+
 /* --------------------------------------------------------------------------
  * LISTS -------------------------------------------------------------------- */
 li.task-list-item { list-style: none; }
@@ -86,3 +95,37 @@ li.dir-list-file:before { content: '📄' }
 /* --------------------------------------------------------------------------
  * IMAGES ------------------------------------------------------------------- */
 img, svg { max-width: 100%; }
+
+/* --------------------------------------------------------------------------
+ * LIGHT MODE --------------------------------------------------------------- */
+@media (prefers-color-scheme: light) {
+    html {
+        background-color: white;
+        color: #1f2328;
+    }
+
+    h1, h2 {
+        border-bottom: 0.2px solid #d8dee4;
+    }
+
+    pre {
+        background-color: #f6f8fa;
+    }
+
+    code {
+        background-color: #afb8c133;
+    }
+
+    a {
+        color: #0969da;
+    }
+
+    a#parent-dir {
+        background-color: #afb8c133;
+    }
+
+    blockquote {
+        color: #656d76;
+        border-left: .25em solid #d0d7de;
+    }
+}