chore: Local storage dark mode (#5689)

Author: kyle-ssg

frontend/common/safeLocalStorage.ts

@@ -0,0 +1,18 @@
+export function storageGet(key: string): string | null {
+  try {
+    return localStorage?.getItem(key) ?? null
+  } catch (err) {
+    //Storage / privacy errors
+    console.error(err)
+    return null
+  }
+}
+
+export function storageSet(key: string, value: string): void {
+  try {
+    localStorage.setItem(key, value)
+  } catch (err) {
+    //Storage / privacy errors
+    console.error(err)
+  }
+}

frontend/common/stores/config-store.js

@@ -1,5 +1,6 @@
 import Project from 'common/project'
 import { setDarkMode } from 'project/darkMode'
+import { storageGet } from 'common/safeLocalStorage'
 
 const Dispatcher = require('../dispatcher/dispatcher')
 const BaseStore = require('./base/_store')
@@ -11,7 +12,7 @@ const controller = {
   },
   loaded(oldFlags) {
     //todo: Remove this after a few weeks have passed
-    if (API.getCookie('dark_mode') === undefined) {
+    if (storageGet('dark_mode') === null) {
       setDarkMode(flagsmith.hasFeature('dark_mode'))
     }
     if (!oldFlags || !Object.keys(oldFlags).length) {

frontend/web/project/darkMode.ts

@@ -1,20 +1,21 @@
 import API from './api'
+import { storageGet, storageSet } from 'common/safeLocalStorage'
 
 export const getDarkMode = () => {
-  return API.getCookie('dark_mode') === 'true'
+  return storageGet('dark_mode') === 'true'
 }
 export const setDarkMode = (enabled: boolean) => {
   if (enabled) {
-    API.setCookie('dark_mode', true)
+    storageSet('dark_mode', 'true')
     document.body.classList.add('dark')
     document.documentElement.setAttribute('data-bs-theme', 'dark')
   } else {
-    API.setCookie('dark_mode', 'false')
+    storageSet('dark_mode', 'false')
     document.body.classList.remove('dark')
     document.documentElement.removeAttribute('data-bs-theme')
   }
 }
 
-if (API.getCookie('dark_mode')) {
+if (storageGet('dark_mode')) {
   setDarkMode(getDarkMode())
 }