90% datk mode addes

added dark mode plus a few changes

Author: SuperninjaXII

assets/css/base.css

@@ -25,7 +25,7 @@
   --font-md: 16px;
   --font-lg: 24px;
   --font-xlg: 32px;
-  --font-xxlg:48px;
+  --font-xxlg: 48px;
 
   --space-xs: 0.25rem;
   --space-sm: 0.4rem;
@@ -46,6 +46,32 @@
   --green-5: hsl(90, 90%, 20%);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --black: #000;
+    --white: #fff;
+    --bg: #121212;
+    --bg2: #171717;
+  }
+
+  a {
+    color: var(--green-4);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--neutral-1) !important;
+  }
+
+  p {
+    color: var(--neutral-2) !important;
+  }
+}
+
 *,
 :root,
 body {
@@ -54,6 +80,22 @@ body {
   padding: 0;
 }
 
+.light {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+h1 {
+  color: var(--neutral-5);
+}
+
+p {
+  color: var(--neutral-4);
+}
+
 a {
   color: var(--green-5);
 }

assets/css/markdown.css

@@ -5,7 +5,6 @@ main .container {
   margin-top: var(--space-md);
   width: 45svw;
   line-height: 20px;
-  text-transform: none;
 
   h1,
   h2,
@@ -69,29 +68,15 @@ main .container {
     }
 
     .copy-btn {
-      display: flex;
-      flex-direction: row;
-      width: auto;
-      padding: var(--space-xs);
+      height: 25px;
+      padding-inline: 20px;
+      background: var(--bg2);
       border-radius: 0.5rem;
-      border: none;
       border: 1px solid var(--neutral-3);
       outline: none;
       margin-left: auto;
+      color: var(--neutral-5);
 
-      p,
-      img {
-        margin-top: auto;
-        margin-bottom: auto;
-      }
-
-      p {
-        margin-left: 1;
-      }
-
-      img {
-        width: 30px;
-      }
     }
   }
 
@@ -123,10 +108,10 @@ main .container {
     border-left: 4px solid var(--green-2);
     padding: var(--space-md);
     margin-bottom: var(--space-lg);
+    background: var(--bg2);
 
     p {
       text-indent: 0px;
-      color: var(--neutral-5);
     }
   }
 }
@@ -144,8 +129,24 @@ main .container {
     }
 
     h3 {
-      font-size: var(--font-md) !important;
+      font-size: var(--font-lg) !important;
+      text-decoration: underline;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .container {
+      color: var(--neutral-1);
+    }
+
+    p {
+      color: var(--neutral-2) !important;
+    }
+
+    button {
+      color: var(--neutral-1) !important;
     }
+
   }
 
 }

assets/css/style.css

@@ -13,7 +13,8 @@ header {
   top: 0;
   width: 100vw;
   height: 8vh;
-  background: var(--white);
+  background: var(--bg2);
+  color: var(--neutral-1);
   border-bottom: .9px solid var(--neutral-2);
 
   .menu {
@@ -90,6 +91,7 @@ header {
     transition: all 300ms;
     visibility: visible;
 
+
     .topics-group {
       padding-left: var(--space-lg);
       padding-top: var(--space-md);
@@ -196,7 +198,7 @@ header {
   }
 
   nav {
-    background: var(--white);
+    background: var(--bg);
     position: fixed;
     width: 50svw !important;
     height: 95svh !important;
@@ -223,6 +225,23 @@ header {
   }
 }
 
-@media (1250px >=width) {
-  /* … */
+@media (prefers-color-scheme: dark) {
+  a {
+    color: var(--neutral-1) !important;
+  }
+
+  header,
+  nav,
+  aside {
+    border-color: var(--neutral-5) !important;
+  }
+
+
+  nav .topic-heading {
+    color: var(--neutral-1) !important;
+  }
+
+  nav ul li {
+    color: var(--neutral-2) !important;
+  }
 }

assets/js/app.js

@@ -15,13 +15,13 @@ function loadCopyButtons(containerSelector) {
 
     const button = document.createElement("button");
     button.className = "copy-btn";
-    button.innerHTML = `<p>copy</p><img src="../icons/copy.svg" alt="copy"/>`;
+    button.innerHTML = `copy`
     pre.appendChild(button);
     button.addEventListener("click", () => {
       navigator.clipboard.writeText(code.textContent).then(() => {
         button.textContent = "Copied";
         setTimeout(() => {
-          button.innerHTML = `<img src="../icons/copy.svg" alt="copy"/>`;
+          button.innerHTML = `copy`
         }, 1500);
       });
     });

icons/GitHub_Invertocat_Dark.svg

@@ -6,22 +6,31 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>linuxmint|Documentation</title>
     <link href="assets/css/style.css" rel="stylesheet" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
-    <link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin-latte.css">
 
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-light.min.css"
+        media="screen" />
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark.min.css"
+        media="screen and (prefers-color-scheme: dark)" />
 
 </head>
 
 <body>
     <header>
         <div class="menu">
-            <img src="./icons/menu.svg" alt="menu" class="icon" onclick="toggleMenu()">
+            <picture>
+                <source srcset="./icons/menu-dark.svg" media="(prefers-color-scheme: dark)">
+                <img src="./icons/menu.svg" alt="menu" class="icon" onclick="toggleMenu()">
+            </picture>
         </div>
-        <div class="brand">
-            <img src="./icons/linux-mint.svg" alt="logo" class="logo" id="logo" />
+        <div class="brand light">
+            <picture>
+                <source srcset="./icons/mint-logo.svg" media="(prefers-color-scheme: dark)">
+                <img class="logo" src="./icons/linux-mint.svg">
+            </picture>
             <p>Mint</p>
         </div>
+
         <div class="secondary-nav" hx-push-url="true">
             <li class="active">
                 <a href="/index.html">Documentation</a>