style: add dark mode theme with toggle functionality

themes/conventional-commits/layouts/partials/footer.html

@@ -10,7 +10,8 @@
       {{ end }}
     </div>
     <a href="https://www.netlify.com">
-      <img src="https://www.netlify.com/img/global/badges/netlify-light.svg"/>
+      <img class="netlify-badge-light" src="https://www.netlify.com/img/global/badges/netlify-light.svg" alt="Deploys by Netlify"/>
+      <img class="netlify-badge-dark" src="https://www.netlify.com/img/global/badges/netlify-dark.svg" alt="Deploys by Netlify"/>
     </a>
     {{ end }}
     <div class="footer__logos">

themes/conventional-commits/layouts/partials/head.html

@@ -8,8 +8,19 @@
 
     gtag('config', 'UA-2173276-5');
   </script>
-
+
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme');
+      if (theme) {
+        document.documentElement.classList.add('theme-' + theme);
+      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('theme-dark');
+      }
+    })();
+  </script>
   <link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
+  <script src="{{ .Site.BaseURL | absURL }}switchcss.js"></script>
 
   <title>{{ .Param "Title" }}</title>
   <meta name="description" content="{{ .Param "Description" }}"/>

themes/conventional-commits/layouts/partials/header.html

@@ -25,6 +25,9 @@
           <a href="/en/about" class="no-style-a">About</a>
         </button>
       </li>
+      <li class="header__menu-item">
+        {{- partial "theme-toggle.html" . -}}
+      </li>
     </ul>
   </div>
 </header>

themes/conventional-commits/layouts/partials/theme-toggle.html

@@ -0,0 +1,7 @@
+<button 
+  class="theme-toggle" 
+  data-theme-toggle 
+  title="Toggle theme"
+  aria-label="Toggle theme">
+  ☀️
+</button>

themes/conventional-commits/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hugo-conventional-commits-theme",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {

themes/conventional-commits/static/css/scss/abstracts/_theme-variables.scss

@@ -0,0 +1,41 @@
+:root {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --text-primary: #000000;
+  --text-secondary: #666666;
+  --divider: #e1e1e1;
+  --accent-start: #FE5196;
+  --accent-end: #F77062;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0F0C17;
+    --surface: #1E1A29;
+    --text-primary: #E2E2E2;
+    --text-secondary: #A0A0A0;
+    --divider: #3C3748;
+    --accent-start: #6E33D3;
+    --accent-end: #F6705A;
+  }
+}
+
+.theme-dark {
+  --bg: #0F0C17;
+  --surface: #1E1A29;
+  --text-primary: #E2E2E2;
+  --text-secondary: #A0A0A0;
+  --divider: #3C3748;
+  --accent-start: #6E33D3;
+  --accent-end: #F6705A;
+}
+
+.theme-light {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --text-primary: #000000;
+  --text-secondary: #666666;
+  --divider: #e1e1e1;
+  --accent-start: #FE5196;
+  --accent-end: #F77062;
+}

themes/conventional-commits/static/css/scss/components/_theme-toggle.scss

@@ -0,0 +1,39 @@
+.theme-toggle {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-size: 1.2em;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  color: white;
+  min-width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    stroke: currentColor;
+    fill: none;
+  }
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.4);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  .theme-dark & {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+}

themes/conventional-commits/static/css/scss/style.scss

@@ -1,9 +1,12 @@
+@import 'abstracts/theme-variables';
 @import 'base/base';
 @import 'layout/header';
 @import 'layout/footer';
 @import 'layout/welcome';
 @import "components/dropdown";
 @import "components/banner-image";
+@import "components/theme-toggle";
 @import "themes/markdown";
 @import "themes/conventional-commits";
+@import "themes/dark-mode";
 @import "vendors/github-markdown-css";

themes/conventional-commits/static/css/scss/themes/_dark-mode.scss

@@ -0,0 +1,204 @@
+// Only apply dark theme styles when explicitly in dark mode
+.theme-dark {
+  body {
+    background-color: var(--bg);
+    color: var(--text-primary);
+  }
+
+  main {
+    background-color: var(--bg);
+  }
+
+  article {
+    background-color: var(--surface);
+    color: var(--text-primary);
+  }
+
+  .header {
+    .logo {
+      border-color: var(--text-primary);
+    }
+
+    &__menu {
+      color: var(--text-primary);
+    }
+  }
+
+  .welcome {
+    background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
+
+    .container, .mini_container {
+      color: var(--text-primary);
+    }
+
+    .welcome__action {
+      color: var(--text-primary);
+      border-color: var(--text-primary);
+
+      &:hover {
+        background-color: var(--text-primary);
+        color: var(--bg);
+      }
+    }
+  }
+
+  .dropdown {
+    &__label {
+      color: var(--text-primary);
+    }
+
+    &__options {
+      background-color: var(--surface);
+      border: 1px solid var(--divider);
+
+      // Dark mode scrollbar
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: var(--surface);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--divider);
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: var(--text-secondary);
+      }
+
+      // Arrow pointer color
+      &:before {
+        border-bottom-color: var(--surface) !important;
+      }
+    }
+
+    &__option {
+      border-bottom-color: var(--divider) !important;
+
+      a {
+        color: var(--text-primary);
+        border-bottom: 1px solid var(--divider) !important;
+      }
+
+      &:last-child a {
+        border-bottom: none !important;
+      }
+
+      &:hover {
+        background-color: var(--divider);
+      }
+    }
+  }
+
+  .footer {
+    background-color: var(--surface);
+    color: var(--text-secondary);
+    border-top: 1px solid var(--divider);
+  }
+}
+
+// Override GitHub markdown CSS with higher specificity for dark mode
+.theme-dark .markdown-body,
+html.theme-dark .markdown-body {
+  color: var(--text-primary) !important;
+
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--text-primary) !important;
+    border-bottom-color: var(--divider) !important;
+  }
+
+  p, li {
+    color: var(--text-secondary) !important;
+  }
+
+  blockquote {
+    border-left-color: var(--divider) !important;
+    color: var(--text-secondary) !important;
+  }
+
+  hr {
+    background-color: var(--divider) !important;
+    border-bottom-color: var(--divider) !important;
+  }
+
+  table {
+    border-color: var(--divider) !important;
+
+    th, td {
+      border-color: var(--divider) !important;
+    }
+
+    tr {
+      background-color: var(--surface) !important;
+      border-top-color: var(--divider) !important;
+
+      &:nth-child(2n) {
+        background-color: var(--bg) !important;
+      }
+    }
+  }
+
+  code {
+    background-color: var(--divider) !important;
+    color: var(--text-primary) !important;
+  }
+
+  pre {
+    background-color: var(--surface) !important;
+    border: 1px solid var(--divider) !important;
+
+    code {
+      background-color: transparent !important;
+      color: var(--text-primary) !important;
+    }
+  }
+
+  .highlight pre {
+    background-color: var(--surface) !important;
+  }
+
+  kbd {
+    background-color: var(--surface) !important;
+    border-color: var(--divider) !important;
+    color: var(--text-primary) !important;
+    box-shadow: inset 0 -1px 0 var(--divider) !important;
+  }
+
+  a {
+    color: var(--accent-start) !important;
+
+    &:hover {
+      color: var(--accent-end) !important;
+    }
+  }
+
+  img {
+    background-color: var(--surface) !important;
+  }
+}
+
+// GitHub SVG icon theme switching
+.theme-dark .github path {
+  fill: var(--text-secondary);
+}
+
+// Fix hardcoded white text colors
+.theme-dark .no-style-a {
+  color: var(--text-primary) !important;
+}
+
+// Netlify badge theme switching
+.netlify-badge-dark {
+  display: none;
+}
+
+.theme-dark .netlify-badge-light {
+  display: none;
+}
+
+.theme-dark .netlify-badge-dark {
+  display: inline;
+}

themes/conventional-commits/static/js/index.js

@@ -1,8 +1,10 @@
 import AnchorJS from 'anchor-js';
+import ThemeToggle from './theme-toggle.js';
 
 class App {
   constructor(anchors) {
     this.anchors = anchors;
+    new ThemeToggle();
     this.onInit();
   }