Assets and sample color theme switcher

assets/css/baseof.css

@@ -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);
+}

assets/js/baseof.js

@@ -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);
+});