dark mode

Author: tcmal

site/css/gic.css

@@ -85,7 +85,7 @@ img {
 }
 
 /* Selected parts from: */
-/* GIC.css Version 1.1.0
+/* GIC.css Version 1.2.0
  * (c) Copyright Ariadne (me@aria.rip) 2026.
  * Made available under the MIT license */
 :root {
@@ -164,7 +164,6 @@ img {
     --black-tint-95: #f3f3f3;
     --white: #ffffff;
 
-
     --colour-brand: var(--blue);
 
     --colour-text: var(--black);
@@ -196,6 +195,95 @@ img {
     --colour-surface-background: var(--blue-tint-95);
     --colour-surface-text: var(--black);
     --colour-surface-board: var(--blue-tint-50);
+    --colour-button-text: var(--white);
+
+    /* Dark theme, from catpuccin mocha */
+    @media (prefers-color-scheme: dark) {
+        color-scheme: dark;
+        --blue: #89b4fa;
+        --blue-base: #89b4fa;
+        --blue-tint-25: #6787bc;
+        --blue-tint-50: #455a7d;
+        --blue-tint-80: #1b2432;
+        --blue-tint-95: #07090d;
+        --blue-shade-10: #95bcfb;
+        --blue-shade-25: #a7c7fb;
+        --blue-shade-50: #c4dafd;
+        --blue-shade-95: #f9fbff;
+        --green: #a6e3a1;
+        --green-tint-25: #7daa79;
+        --green-tint-50: #537251;
+        --green-tint-80: #212d20;
+        --green-tint-95: #080b08;
+        --green-shade-25: #bceab9;
+        --green-shade-50: #d3f1d0;
+        --teal: #94e2d5;
+        --teal-tint-25: #6faaa0;
+        --teal-tint-50: #4a716b;
+        --teal-tint-80: #1e2d2b;
+        --teal-tint-95: #070b0b;
+        --teal-shade-25: #afe9e0;
+        --teal-shade-50: #caf1ea;
+        --purple: #cba6f7;
+        --purple-tint-25: #987db9;
+        --purple-tint-50: #66537c;
+        --purple-tint-80: #292131;
+        --purple-tint-95: #0a080c;
+        --purple-shade-25: #d8bcf9;
+        --purple-shade-50: #e5d3fb;
+        --pink: #f5c2e7;
+        --pink-tint-25: #b892ad;
+        --pink-tint-50: #7b6174;
+        --pink-tint-80: #31272e;
+        --pink-tint-95: #0c0a0c;
+        --pink-shade-25: #f8d1ed;
+        --pink-shade-50: #fae1f3;
+        --red: #f38ba8;
+        --red-tint-25: #b6687e;
+        --red-tint-50: #7a4654;
+        --red-tint-80: #311c22;
+        --red-tint-95: #0c0708;
+        --red-shade-25: #f6a8be;
+        --red-shade-50: #f9c5d4;
+        --orange: #fab387;
+        --orange-tint-25: #bc8665;
+        --orange-tint-50: #7d5a44;
+        --orange-tint-80: #32241b;
+        --orange-tint-95: #0d0907;
+        --orange-shade-25: #fbc6a5;
+        --orange-shade-50: #fdd9c3;
+        --yellow: #f9e2af;
+        --yellow-tint-25: #bbaa83;
+        --yellow-tint-50: #7d7158;
+        --yellow-tint-80: #322d23;
+        --yellow-tint-95: #0c0b09;
+        --yellow-shade-25: #fbe9c3;
+        --yellow-shade-50: #fcf1d7;
+        --brown: #f2cdcd;
+        --brown-tint-25: #b69a9a;
+        --brown-tint-50: #796767;
+        --brown-tint-95: #0c0a0a;
+        --black: #1e1e2e;
+        --black-tint-25: #171723;
+        --black-tint-50: #0f0f17;
+        --black-tint-80: #060609;
+        --black-tint-95: #020202;
+        --white: #cdd6f4;
+        --white-shade-25: #9aa1b7;
+
+        --colour-text: var(--white);
+        --colour-body-background: var(--black);
+        --colour-text-secondary: var(--white-shade-25);
+        --colour-border: var(--white);
+        --colour-input-border: var(--white);
+        --colour-focus-text: var(--white);
+        --colour-link-active: var(--white);
+        --colour-surface-background: var(--blue-tint-80);
+        --colour-surface-text: #fff;
+        --colour-surface-board: var(--blue-tint-50);
+        --colour-button-text: var(--black);
+    }
+
 
     --width-input-border: 2px;
     --width-form-group-error: 5px;
@@ -271,6 +359,8 @@ img {
 /*   8e  8eeee8 8eee8 8   8 8e    8eee8e 8eee8 8eee8 8eee8 8eeee8  */
 /*   88    88   88    8   8 88 "8 88   8 88  8 88    88  8   88    */
 /*   88    88   88    8eee8 88ee8 88   8 88  8 88    88  8   88 */
+html { background: var(--colour-body-background); }
+
 body {
     font-family: var(--font-variable);
     font-weight: var(--font-weight-normal);
@@ -361,17 +451,6 @@ a {
         }
     }
 
-    &.inverse {
-        &,
-        &:visited {
-            color: var(--white);
-        }
-
-        &:focus {
-            color: var(--colour-focus-text);
-        }
-    }
-
     &.error {
         &,
         &:visited {
@@ -469,14 +548,15 @@ hr.visible { border-bottom: 1px solid var(--colour-border) }
 
 /* utilities */
 .break-word { word-break: break-word; }
+
 /* ____ ____ ____ _  _ ____  */
 /* |___ |  | |__/ |\/| [__   */
 /* |    |__| |  \ |  | ___]  */
 /*                           */
 button {
     --button-bg: var(--green-shade-25);
     --button-bg-darker: var(--green-shade-50);
-    --text: var(--white);
+    --text: var(--colour-button-text);
 
     text-decoration: none;
     font-weight: var(--font-weight-normal);
@@ -519,10 +599,6 @@ button {
         --button-bg: var(--red-shade-25);
         --button-bg-darker: var(--red-shade-50);
     }
-    &.inverse {
-        --button-bg: var(--blue-tint-80);
-        --button-bg-darker: var(--blue-tint-95);
-    }
     &[disabled] {
         opacity: .5;
         cursor: notallowed;

site/img/logo.svg

@@ -5,7 +5,7 @@
     </head>
     <body>
         <div class="jumbotron">
-            <img id="logo" alt="Edinburgh Hacklab Logo" src="img/logo.svg"/>
+            <img id="logo" alt="Edinburgh Hacklab Logo" src="img/logo.svg" />
             <h1>Edinburgh Hacklab</h1>
         </div>
         <div>