Use Nord theme for dark theme

arvidn · Nov 21, 2023 · cd3d66d · cd3d66d
1 parent 9b9935a
commit cd3d66d
Showing 1 changed file with 49 additions and 24 deletions.
diff --git a/docs/style.css b/docs/style.css
@@ -1,3 +1,29 @@
+:root {
+	/* Nord Color Theme: https://www.nordtheme.com/
+	   Details about the palette and use cause of each color: https://www.nordtheme.com/docs/colors-and-palettes */
+
+	/* Polar Night  */
+    --nord0: #2e3440;
+    --nord1: #3b4252;
+    --nord2: #434c5e;
+    --nord3: #4c566a;
+	/* Snow Storm */
+    --nord4: #d8dee9;
+    --nord5: #e5e9f0;
+    --nord6: #eceff4;
+	/* Frost */
+    --nord7: #8fbcbb;
+    --nord8: #88c0d0;
+    --nord9: #81a1c1;
+    --nord10: #5e81ac;
+	/* Aurora */
+    --nord11: #bf616a;
+    --nord12: #d08770;
+    --nord13: #ebcb8b;
+    --nord14: #a3be8c;
+    --nord15: #b48ead;
+}
+
 @media (prefers-color-scheme: light) {
     body {
         background-color: white;
@@ -7,8 +33,8 @@
 
 @media (prefers-color-scheme: dark) {
     body {
-        background-color: black;
-        color: #ddd;
+        background-color: var(--nord0);
+        color: var(--nord6);
     }
 }
 
@@ -72,29 +98,29 @@ h2 {
 
 @media (prefers-color-scheme: dark) {
     tt {
-        background-color: rgb(255 255 255 / 20%);
+        background-color: var(--nord3);
     }
 
     table {
-        border-color: #777;
+        border-color: var(--nord7);
     }
 
     th,
     td {
-        border-color: #444;
+        border-color: var(--nord2);
     }
 
     th {
-        border-bottom-color: white;
+        border-bottom-color: var(--nord7);
     }
 
     a.reference,
     a {
-        color: #bbf;
+        color: var(--nord8);
     }
 
     hr {
-        border-color: #777;
+        border-color: var(--nord7);
     }
 }
 
@@ -171,23 +197,23 @@ p.first {
 
 @media (prefers-color-scheme: dark) {
     #footer {
-        color: #888;
+        color: var(--nord5);
     }
 
     #footer a {
-        color: #ccc;
+        color: var(--nord9);
     }
 
     #footer a:hover {
-        color: #fff;
+        color: var(--nord8);
     }
 
     #gradient {
-        background: #444;
+        background: var(--nord1);
     }
 
     #filler {
-        background: linear-gradient(#444, black);
+        background: linear-gradient(var(--nord1), var(--nord0));
     }
 }
 
@@ -281,7 +307,7 @@ table.docinfo td {
 
 @media (prefers-color-scheme: dark) {
     #libraryBody {
-        border-color: #777;
+        border-color: var(--nord7);
     }
 }
 
@@ -332,7 +358,7 @@ table.docinfo td {
 
 @media (prefers-color-scheme: dark) {
     div.main-toc {
-        border-color: #888;
+        border-color: var(--nord3);
     }
 }
 
@@ -362,8 +388,8 @@ div.main-toc {
 
 @media (prefers-color-scheme: dark) {
     #table-of-contents {
-        background-color: black;
-        border-color: #76c;
+        background-color: var(--nord1);
+        border-color: var(--nord10);
     }
 }
 
@@ -427,8 +453,8 @@ div.main-toc {
 
 @media (prefers-color-scheme: dark) {
     pre {
-        background: #222;
-        border-color: #666;
+        background: var(--nord2);
+        border-color: var(--nord1);
     }
 }
 
@@ -468,21 +494,21 @@ pre {
 
 @media (prefers-color-scheme: dark) {
     .string {
-        color: #ff6;
+        color: var(--nord14);
     }
 
     .comment {
         font-style: italic;
-        color: #99f;
+        color: var(--nord10);
     }
 
     .preproc {
         font-style: italic;
-        color: #f7f;
+        color: var(--nord10);
     }
 
     .number {
-        color: #7f7;
+        color: var(--nord15);
     }
 }
 
@@ -511,7 +537,6 @@ pre {
 }
 
 @media (prefers-color-scheme: dark) {
-    div.warning,
     div.note,
     div.important {
         background: #0f3a0f;