Created Flash-bang

static/main/css/colors.css

@@ -16,9 +16,11 @@
     --color-scale-gray-9: #0d1117;
 
     --color-scale-gray-0-transparent-10: #f0f6fc1a;
+    --color-scale-gray-1-transparent-15: #c9d1d966;
+    --color-scale-gray-3-transparent-20: #8b949e33;
     --color-scale-gray-4-transparent-40: #6e768166;
+    --color-scale-gray-5-transparent-50: #484f5880;
     --color-scale-gray-8-transparent-50: #161b2280;
-    --color-scale-gray-9-transparent-0: #0d111700;
 
     --color-scale-purple-0: #eddeff;
     --color-scale-purple-1: #e2c5ff;
@@ -31,10 +33,19 @@
     --color-scale-purple-8: #3c1e70;
     --color-scale-purple-9: #271052;
 
-    --color-scale-purple-4-transparent-06: #a371f70f;
+    --color-scale-purple-2-transparent-40: #d2a8ff4d;
+    --color-scale-purple-4-transparent-10: #a371f71a;
 
+    --base-text-weight-semibold: 600;
+
+    --font-monospace: "JetBrains Mono", Menlo, Consolas, monospace;
+    font-family: "Roboto", arial, sans-serif;
+    font-size: 16px;
+}
+
+[data-color-mode="dark"] {
     --color-canvas-default: var(--color-scale-gray-9);
-    --color-canvas-default-transparent: var(--color-scale-gray-9-transparent-0);
+    --color-canvas-default-transparent: var(--color-transparent);
     --color-canvas-subtle: var(--color-scale-gray-8);
     --color-canvas-subtle-transparent: var(--color-scale-gray-4-transparent-40);
 
@@ -43,7 +54,8 @@
 
     --color-header-bg-default: var(--color-scale-gray-8);
     --color-header-bg-transparent: var(--color-scale-gray-8-transparent-50);
-    --color-header-text: var(--color-scale-white-transparent-70);
+    --color-header-text: var(--color-scale-gray-0);
+    --color-header-text-hover: var(--color-scale-white-transparent-70);
 
     --color-btn-text: var(--color-scale-gray-1);
     --color-btn-bg: var(--color-scale-gray-7);
@@ -61,8 +73,45 @@
     --color-accent-fg: var(--color-scale-purple-4);
 
     --color-text-link: var(--color-accent-fg);
-    --base-text-weight-semibold: 600;
+
-    --font-monospace: "JetBrains Mono", Menlo, Consolas, monospace;
+    --color-card-default: var(--color-scale-gray-8);
-    font-family: "Roboto", arial, sans-serif;
+    --color-card-border: var(--color-scale-gray-0-transparent-10);
-    font-size: 16px;
+    --color-card-bg-hover: var(--color-scale-purple-4-transparent-10);
+    --color-card-accent: var(--color-accent-fg);
+}
+
+[data-color-mode="light"] {
+    --color-canvas-default: var(--color-scale-white);
+    --color-canvas-default-transparent: var(--color-transparent);
+    --color-canvas-subtle: var(--color-scale-gray-0);
+    --color-canvas-subtle-transparent: var(--color-scale-gray-3-transparent-20);
+
+    --color-border-default: var(--color-scale-gray-1);
+    --color-border-muted: var(--color-scale-gray-2);
+
+    --color-header-bg-default: var(--color-scale-gray-7);
+    --color-header-bg-transparent: var(--color-scale-gray-5-transparent-50);
+    --color-header-text: var(--color-scale-gray-0);
+    --color-header-text-hover: var(--color-scale-white-transparent-70);
+
+    --color-btn-text: var(--color-scale-gray-7);
+    --color-btn-bg: var(--color-scale-gray-0);
+    --color-btn-border: var(--color-scale-gray-1-transparent-15);
+    --color-btn-hover-bg: var(--color-scale-gray-2);
+    --color-btn-hover-border: var(--color-scale-gray-1-transparent-15);
+    --color-btn-active-border: var(--color-scale-gray-1-transparent-15);
+
+    --color-fg-default: var(--color-scale-gray-7);
+    --color-fg-muted: var(--color-scale-gray-5);
+    --color-fg-subtle: var(--color-scale-gray-4);
+    --color-fg-on-emphasis: var(--color-scale-white);
+    --color-text-hover: var(--color-fg-muted);
+
+    --color-accent-fg: var(--color-scale-purple-5);
+    --color-text-link: var(--color-accent-fg);
+
+    --color-card-default: var(--color-scale-gray-1);
+    --color-card-border: var(--color-scale-gray-1-transparent-15);
+    --color-card-bg-hover: var(--color-scale-purple-2-transparent-40);
+    --color-card-accent: var(--color-accent-fg);
 }

static/main/css/index.css

@@ -51,7 +51,7 @@ video {
     border-radius: 100%;
     margin: 0 0.5rem 1rem 0.5rem;
     width: 3rem;
-    aspect-ratio: 1;
+    aspect-ratio: 1/1;
 }
 
 .social-link:hover > i {

static/main/css/layout.css

@@ -36,7 +36,7 @@ em {
     margin: 1rem;
     padding: 1rem;
     width: 3rem;
-    aspect-ratio: 1;
+    aspect-ratio: 1/1;
 }
 
 .primary-header {
@@ -56,12 +56,12 @@ em {
 }
 
 .primary-navigation a {
-    color: var(--color-fg-default);
+    color: var(--color-header-text);
     font-size: 1.5rem;
     text-decoration: none;
-}
+    padding: 1rem 0;
-.primary-navigation a:hover {
+    margin: -1rem 0;
-    color: var(--color-text-hover);
+    border-radius: 0.5rem;
 }
 
 .primary-navigation a > [aria-hidden="true"] {
@@ -83,9 +83,15 @@ em {
         transform: translateX(100%);
         transition: transform 350ms ease-out;
     }
+
     .primary-navigation a {
         padding: 1rem;
         text-align: right;
+        transition: background-color 350ms;
+    }
+
+    .primary-navigation a:hover {
+        background-color: var(--color-btn-hover-bg);
     }
 
     .primary-navigation[data-visible="true"] {
@@ -95,6 +101,9 @@ em {
     .mobile-nav-toggle {
         display: flex;
     }
+    [data-color-mode="light"] {
+        --color-header-text: var(--color-fg-default);
+    }
 }
 
 @media (min-width: 35em) {
@@ -104,4 +113,13 @@ em {
         padding-inline: clamp(3rem, 8vw, 10rem);
         background-color: var(--color-header-bg-default);
     }
+
+    .primary-navigation a:hover {
+        color: var(--color-header-text-hover);
+    }
+}
+
+#color-mode-toggle {
+    width: 2rem;
+    height: 2rem;
 }

static/main/css/markdown.css

@@ -290,7 +290,14 @@
         border-left: none;
         border-right: none;
         border-radius: 0;
+    }
+
+    [data-color-mode="dark"] {
         background-color: var(--color-scale-gray-8);
         color: var(--color-scale-gray-0);
     }
+    [data-color-mode="light"] {
+        background-color: var(--color-scale-gray-2);
+        color: var(--color-scale-gray-9);
+    }
 }

static/main/css/navigation_button.css

@@ -11,7 +11,7 @@
     justify-content: center;
     align-items: center;
     width: var(--button-width);
-    aspect-ratio: 1;
+    aspect-ratio: 1/1;
     cursor: pointer;
     transition: all 0.5s ease-in-out;
     position: absolute;

static/main/js/lightmode.js

@@ -0,0 +1,26 @@
+let lightmode = localStorage.getItem("lightmode")
+const HTML = document.documentElement
+console.log(HTML)
+
+const ENABLE_LIGHT_MODE = () => {
+    HTML.setAttribute("data-color-mode", "light")
+    localStorage.setItem("lightmode", "enabled")
+}
+
+const DISABLE_LIGHT_MODE = () => {
+    HTML.setAttribute("data-color-mode", "dark")
+    localStorage.setItem("lightmode", null)
+}
+
+if (lightmode === "enabled") {
+    ENABLE_LIGHT_MODE()
+}
+
+document.querySelector("#color-mode-toggle").addEventListener("click", () => {
+    lightmode = localStorage.getItem("lightmode")
+    if (lightmode !== "enabled") {
+        ENABLE_LIGHT_MODE()
+    } else {
+        DISABLE_LIGHT_MODE()
+    }
+})

static/projects/css/projects.css

@@ -1,10 +1,3 @@
-:root {
-    --color-card-default: var(--color-scale-gray-8);
-    --color-card-border: var(--color-scale-gray-0-transparent-10);
-    --color-card-bg-hover: var(--color-scale-purple-4-transparent-06);
-    --color-card-accent: var(--color-accent-fg);
-}
-
 .body {
     align-items: center;
     display: flex;

templates/layout.html

@@ -1,6 +1,6 @@
 {% load static %}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-color-mode="dark">
     <head>
         <meta charset="UTF-8">
         <meta name="color-scheme" content="dark light">
@@ -26,6 +26,7 @@
               type="text/css"
               href="{% static 'main/css/layout.css' %}"/>
         <script src="{% static 'main/js/navigation.js' %}" defer></script>
+        <script src="{% static 'main/js/lightmode.js' %}" defer></script>
         {% block meta %}{% endblock %}
     </head>
     <body>
@@ -44,6 +45,9 @@
                      data-visible="false">
                     <a href="{% url 'home' %}" class="bold">Home</a>
                     <a href="{% url 'projects' %}" class="bold">Projects</a>
+                    <button id="color-mode-toggle"
+                            class="color-mode-toggle"
+                            aria-label="toggle dark mode "></button>
                 </div>
             </nav>
         </header>