✨ remember dark mode

src/front-end/components/darkmode.vue

@@ -1,13 +1,24 @@
 <script lang="ts">
 import { Component } from 'vue';
+import { sessionState } from '../types';
 
 const DarkMode: Component = {
+ computed: {
+ session(): sessionState { return this.$store.state.session; },
+ },
  methods: {
- toggle() { document.body.classList.toggle('dark-mode'); },
+ toggle() {
+ const val = document.body.classList.toggle('dark-mode');
+
+ this.$store.commit('session.darkMode', val);
+ },
  },
  mounted() {
- if (matchMedia('prefers-color-scheme: dark').matches)
+ if (matchMedia('prefers-color-scheme: dark').matches
+ || (this.session as sessionState).darkMode)
+ {
  this.toggle();
+ }
  },
 };
 

src/front-end/store/modules/session.ts

@@ -9,6 +9,10 @@ const makeKey = (key: string): string =>
 
 /** Session property metadata */
 const properties: Record<string, sessionProperty> = {
+ darkMode: {
+ default() { return false; },
+ key: makeKey('darkMode'),
+ },
  id: {
  default() { return uuid(); },
  key: makeKey('id'),
@@ -21,6 +25,10 @@ const properties: Record<string, sessionProperty> = {
 
 export const sessionModule: Module<sessionState, any> = {
  mutations: {
+ 'session.darkMode'(state, payload: boolean) {
+ state.darkMode = payload;
+ localStorage.setItem(properties.darkMode.key, JSON.stringify(payload));
+ },
  'session.name'(state, payload: string) {
  state.name = payload;
  localStorage.setItem(properties.name.key, payload);
@@ -32,8 +40,16 @@ export const sessionModule: Module<sessionState, any> = {
  var entry = properties[v];
  const value = localStorage.getItem(entry.key) || entry.default();
 
- p[v] = value;
- localStorage.setItem(entry.key, value)
+ switch (typeof entry.default()) {
+ case 'boolean':
+ p[v] = JSON.parse(value);
+ break;
+ default:
+ p[v] = value;
+ break;
+ }
+
+ localStorage.setItem(entry.key, value);
 
  return p;
  },

src/front-end/types.ts

@@ -14,11 +14,12 @@ export type participantsState = {
 };
 
 export type sessionProperty = {
- default(): string,
+ default(): any,
  key: string,
 };
 
 export type sessionState = {
+ darkMode: boolean,
  id: string,
  name: string,
 };