Assets and sample color theme switcher

2026-05-01 18:00:26 +00:00 · 2023-10-18 21:00:04 +01:00
parent 521727983c
commit f5a54d528f
8 changed files with 103 additions and 0 deletions
@@ -0,0 +1,31 @@
+@import url("../fonts/OpenSans.ttf");
+@import url("../fonts/OpenSans-Italic.ttf");
+
+:root {
+    /* Colors */
+    --black: #131314;
+    --white: #FFFFFF;
+    --crimson: #BD1839;
+    --light-gray: #E7E7E7;
+
+    /* Background colors */
+    --dark-background: #1D1B1B;
+    --light-background: #FBFBFB;
+
+    /* Radiuses */
+    --card-radius: 30px;
+    --form-radius: 9px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-size: 16px;
+    font-family: 'Open Sans', sans-serif;
+    background-color: var(--background);
+    color: var(--text);
+}
@@ -0,0 +1,39 @@
+function getInitialTheme() {
+  const persistedColorPreference = window.localStorage.getItem('theme');
+  const hasPersistedPreference = typeof persistedColorPreference === 'string';
+
+  if (hasPersistedPreference) {
+    return persistedColorPreference;
+  }
+
+  const mql = window.matchMedia('(prefers-color-scheme: dark)');
+  const hasMediaQueryPreference = typeof mql.matches === 'boolean';
+
+  if (hasMediaQueryPreference) {
+    return mql.matches ? 'dark' : 'light';
+  }
+
+  return 'light';
+}
+
+function updateTheme(theme) {
+  root.style.setProperty('--theme', theme);
+  root.style.setProperty(
+    '--background',
+    theme === 'light' ? 'var(--light-background)' : 'var(--dark-background)'
+  );
+  root.style.setProperty('--text', theme === 'light' ? 'black' : 'white');
+}
+
+const root = document.documentElement;
+let theme = getInitialTheme();
+
+document.addEventListener('DOMContentLoaded', () => {
+  updateTheme(theme);
+});
+
+document.querySelector('#switch-theme').addEventListener('click', () => {
+  theme = theme === 'light' ? 'dark' : 'light';
+  window.localStorage.setItem('theme', theme);
+  updateTheme(theme);
+});
@@ -0,0 +1,7 @@
+---
+title: "Hazem Krimi"
+date: 2023-10-18T20:03:43+01:00
+---
+
+# Hazem Krimi
+
@@ -0,0 +1,21 @@
+{{ $styles := resources.Get "css/baseof.css" | toCSS | minify | fingerprint }}
+{{ $scripts := resources.Get "js/baseof.js" | minify | fingerprint }}
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="{{ $styles.Permalink }}">
+    {{ block "styles" . }}{{ end }}
+    <title>
+      {{ block "title" . }}
+        {{ .Site.Title }}
+      {{ end }}
+    </title>
+    <script defer src="{{ $scripts.Permalink }}"></script>
+  </head>
+  <body>
+    <main>
+      {{ block "main" . }}{{ end }}
+    </main>
+  </body>
+</html>
@@ -0,0 +1,4 @@
+{{ define "main" }}
+    {{ partial "theme-switch.html" . }}
+    {{ .Content }}
+{{ end }}
@@ -0,0 +1 @@
+<button id="switch-theme">Switch theme</button>
				`@@ -0,0 +1 @@`
				`<button id="switch-theme">Switch theme</button>`