Initial commit

.gitignore

@@ -35,6 +35,7 @@ eggs/
 
 lib/
 !src/newsreader/scss/lib
+!src/newsreader/js/lib
 
 lib64/
 parts/

src/newsreader/js/index.js

@@ -1,3 +1,4 @@
+import './lib/index.js';
 import './pages/homepage/index.js';
 import './pages/categories/index.js';
 import './pages/rules/index.js';

src/newsreader/js/lib/index.js

@@ -0,0 +1 @@
+import './theme.js';

src/newsreader/js/lib/theme.js

@@ -0,0 +1,80 @@
+function isCSSVariablesSupported() {
+  return window.CSS && window.CSS.supports('color', 'var(--fake-color');
+}
+
+function changeTheme(e) {
+  const isDark = sessionStorage.getItem('t-dark') ? true : false;
+
+  if (isDark) {
+    document.documentElement.classList.add('js-t-dark');
+  } else {
+    document.documentElement.classList.remove('js-t-dark');
+  }
+
+  try {
+    console.log(`Setting storage to ${!isDark}`);
+    sessionStorage.setItem('t-dark', !isDark);
+  } catch (e) {
+    // do nothing.
+  }
+}
+
+function prefersDarkTheme() {
+  try {
+    const currentPref = sessionStorage.getItem('t-dark');
+
+    if (currentPref === 'true') {
+      console.log('Current pref set');
+      return true;
+    } else if (
+      !currentPref &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      console.log('Media query matches');
+      return true;
+    } else {
+      console.log('Does not prefersDarkTheme');
+      return false;
+    }
+  } catch (e) {
+    return false;
+  }
+}
+
+function toggleDarkTheme(dark) {
+  if (dark) {
+    document.documentElement.classList.add('js-t-dark');
+  } else {
+    document.documentElement.classList.remove('js-t-dark');
+  }
+
+  try {
+    sessionStorage.setItem('t-dark', dark);
+  } catch (e) {
+    // do nothing.
+  }
+}
+
+function initThemeSelector() {
+  const themeButton = document.getElementsByClassName('theme-switcher')[0];
+  const mqPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+  if (prefersDarkTheme()) {
+    console.log('Prefers dark theme');
+    toggleDarkTheme(true);
+  }
+
+  themeButton.addEventListener('click', changeTheme);
+
+  mqPrefersDarkTheme.addListener(mq => {
+    toggleDarkTheme(mq.matches);
+  });
+}
+
+function init() {
+  if (isCSSVariablesSupported()) {
+    initThemeSelector();
+  }
+}
+
+init();

src/newsreader/templates/base.html

@@ -27,6 +27,8 @@
           <li class="nav__item"><a href="{% url 'accounts:register' %}">Register</a></li>
         {% endif %}
       </ol>
+
+      <button class="theme-switcher"></button>
     </nav>
 
     {% if messages %}