Apply color theme selector (GH-211)

Author: shorodilov

assets/icons/moon-svgrepo-com.svg

@@ -0,0 +1,33 @@
+// theme variables
+const themeAttribute = "data-theme"
+const theme = {
+ light: "light",
+ dark: "dark",
+}
+const userTheme = localStorage.getItem(themeAttribute)
+const isSystemThemeDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+
+
+// initial theme check
+const checkTheme = () => {
+ if (userTheme === theme.dark || (!userTheme && isSystemThemeDark)) {
+ document.documentElement.setAttribute(themeAttribute, theme.dark)
+ } else document.documentElement.setAttribute(themeAttribute, theme.light)
+}
+
+
+// manual theme select
+const swapTheme = () => {
+ const currentTheme = document.documentElement.getAttribute(themeAttribute)
+ const themeValue = currentTheme === theme.light ? theme.dark : theme.light
+ localStorage.setItem(themeAttribute, themeValue)
+ document.documentElement.setAttribute(themeAttribute, themeValue)
+}
+
+
+const swapThemeBtn = document.getElementById("swap-theme-btn");
+if (swapThemeBtn) swapThemeBtn.addEventListener("click", swapTheme)
+
+document.addEventListener("DOMContentLoaded", () => {
+ checkTheme()
+})

assets/icons/sun-svgrepo-com.svg

@@ -10,41 +10,101 @@
  ==============
  */
 
-// todo: add colors palette
+@import "./colors";
+
+:root[data-theme=light] {
+ --background: #{$gray-50};
+ --on-background: #{$on-gray-50};
+ --surface: white;
+ --on-surface: black;
+ --primary: #{$yellow-600};
+ --primary-accent: #{$yellow-a100};
+ --on-primary: #{$on-yellow-600};
+ --secondary: #{$blue-400};
+ --secondary-accent: #{$blue-a100};
+ --on-secondary: #{$on-blue-400};
+
+ #sun-icon {
+ display: none;
+ }
+}
+
+:root[data-theme=dark] {
+ --background: #{$gray-900};
+ --on-background: #{$on-gray-900};
+ --surface: #{$gray-700};
+ --on-surface: #{$on-gray-700};
+ --primary: #{$yellow-200};
+ --primary-accent: #{$yellow-a200};
+ --on-primary: #{$on-yellow-200};
+ --secondary: #{$blue-200};
+ --secondary-accent: #{$blue-a200};
+ --on-secondary: #{$on-blue-200};
+
+ #moon-icon {
+ display: none;
+ }
+}
+
+:root {
+ background-color: var(--background);
+ color: var(--on-background);
+
+ // color scheme selector
+ #swap-theme-btn {
+ pointer-events: all;
+ cursor: pointer;
+
+ background: none;
+ border: none;
+
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 1rem;
+
+ z-index: 1024;
+ }
+
+ .theme-icon {
+ width: 1rem;
+ height: auto;
+
+ background:none;
+ }
+}
 
 /**
  Sizing and alignments
  =====================
  */
 
 // items sizing
-
-html {
- font-size: 2.5rem;
+:root {
+ font-size: 2.5rem; // base font size
 
  body {
- font-size: 1em;
+ font-size: 1em; // 100% from base font size
  }
 
  small {
- font-size: 0.75em;
+ font-size: 0.75em; // 75% from base font size
  }
 
  h1 {
- font-size: 2em;
+ font-size: 2em; // 200% from base font size
  }
 
  h2 {
- font-size: 1.5em;
+ font-size: 1.5em; // 150% from base font size
  }
 
  h3 {
- font-size: 1.25em;
+ font-size: 1.25em; // 125% from base font size
  }
 }
 
 // align items and content
-
 .text-start {
  text-align: start;
 }
@@ -71,19 +131,16 @@ html {
 
 .fallback-message {
  font-family: sans-serif;
+ font-size: 0.5em;
  line-height: 1.3;
 
  width: 740px;
- padding: 20px;
- margin: 20px auto;
+ padding: 10px 60px;
+ margin: auto;
 
- border: 1px solid #E4C652; // todo: set up color using palette
  border-radius: 10px;
- background: #EEDC94; // todo: set up colo using palette
-
- p {
- margin-bottom: 10px;
- }
+ background: var(--primary);
+ color: var(--on-primary);
 }
 
 .impress-supported {

src/_static/js/theme.js

@@ -2,13 +2,18 @@
  * Webpack entry point
  */
 
+// add JS modules
+import "./_static/js/theme"
+
 // add stylesheets to webpack bundle
 import "./_static/scss/presentation-common.scss"
 import "./_static/scss/presentation-normalization.scss"
 
 // add assets/resources to webpack bundle
 import "../assets/icons/check-mark-svgrepo-com.svg"
 import "../assets/icons/cross-mark-svgrepo-com.svg"
+import "../assets/icons/moon-svgrepo-com.svg"
+import "../assets/icons/sun-svgrepo-com.svg"
 
 // import and initialize impress.js presentation framework
 import "../assets/impress.js/js/impress"

src/_static/scss/presentation-common.scss

@@ -19,6 +19,16 @@
 
 <body class="impress-not-supported">
 
+{{!
+ Presentation theme selector
+}}
+<div id="theme-selector" aria-label="select color scheme">
+ <button id="swap-theme-btn">
+ <img src="{{sunIcon}}" alt="sun icon" class="theme-icon" id="sun-icon">
+ <img src="{{moonIcon}}" alt="moon icon" class="theme-icon" id="moon-icon">
+ </button>
+</div>
+
 {{!
  impress.js fallback message
 

src/conf.js

@@ -5,11 +5,17 @@ const HTMLWebpackPlugin = require("html-webpack-plugin")
 const BASE_DIR = path.resolve(__dirname, "src")
 const BUILD_DIR = path.resolve(__dirname, "_build", "webpack")
 const ASSETS_DIR = path.resolve(__dirname, "assets")
+
 const commonHTMLWebpackPluginConfig = {
  favicon: path.resolve(ASSETS_DIR, "favicon.ico"),
  inject: "body", // inject scripts at the bottom of the body
 }
 
+const icons = {
+ moonIcon: "../assets/moon-svgrepo-com.svg",
+ sunIcon: "../assets/sun-svgrepo-com.svg",
+}
+
 const config = {
  mode: "development",
  entry: path.resolve(BASE_DIR, "conf.js"),
@@ -29,6 +35,9 @@ const config = {
  ...commonHTMLWebpackPluginConfig,
  template: path.resolve(BASE_DIR, "rdbms", "presentations", "normalization", "_index.hbs"),
  filename: path.resolve(BUILD_DIR, "normalization", "index.html"),
+ templateParameters: {
+ ...icons,
+ },
  }),
  ],
  module: {