auto-theme-mode based on browser theme and save and load user preferences!

packages/accessibility-buttons/src/index.js

@@ -1,5 +1,22 @@
 import './accessibility-buttons.css'
 
+function savePreference(key, value) {
+  try {
+    localStorage.setItem(key, value)
+  } catch (e) {
+    console.warn('Não foi possível salvar a preferência:', e)
+  }
+}
+
+function loadPreference(key) {
+  try {
+    return localStorage.getItem(key)
+  } catch (e) {
+    console.warn('Não foi possível carregar a preferência:', e)
+    return null
+  }
+}
+
 /**
  * accessibilityButtons
  * @param  {Array}  -
@@ -38,11 +55,11 @@
   // Set buttons name and aria label
   if (options) {
     for (var key in options) {
       if (options.hasOwnProperty(key)) {
         var obj = options[key]
 
         for (var prop in obj) {
           if (obj.hasOwnProperty(prop)) {
             setting[key][prop] = obj[prop]
           }
         }
@@ -59,9 +76,10 @@
     }),
     $contrastButton = $accessibilityButtons.filter((button) => {
       return button.getAttribute('data-accessibility') === 'contrast'
-    }),
-    storageFont = localStorage.accessibility_font,
-    storageContrast = localStorage.accessibility_contrast
+    })
+
+  var storageFont = loadPreference('accessibility_font')
+  var storageContrast = loadPreference('accessibility_contrast')
 
   // Check if exist storage and set the correct button names and aria attributes
   if (storageFont && $fontButton) {
@@ -116,7 +134,7 @@
             )
           })
 
-          localStorage.removeItem('accessibility_font')
+          savePreference('accessibility_font', 'false')
         } else if (type === 'contrast') {
           $contrastButton.forEach((button) => {
             button.innerHTML = setting.contrast.nameButtonAdd
@@ -126,15 +144,14 @@
             )
           })
 
-          localStorage.removeItem('accessibility_contrast')
+          savePreference('accessibility_contrast', 'false')
         }
       } else {
         $body.classList.add(classname)
 
         if (type === 'font') {
-          if (!storageFont) {
-            localStorage.setItem('accessibility_font', true)
-          }
+          savePreference('accessibility_font', 'true')
+
           $fontButton.forEach((button) => {
             button.innerHTML = setting.font.nameButtonDecrease
             button.setAttribute(
@@ -143,9 +160,8 @@
             )
           })
         } else if (type === 'contrast') {
-          if (!storageContrast) {
-            localStorage.setItem('accessibility_contrast', true)
-          }
+          savePreference('accessibility_contrast', 'true')
+
           $contrastButton.forEach((button) => {
             button.innerHTML = setting.contrast.nameButtonRemove
             button.setAttribute(
@@ -163,3 +179,26 @@
     $accessibilityButtons[i].addEventListener('click', accessibility())
   }
 }
+
+// Apply System Theme Preference
+function applySystemThemePreference() {
+  if (window.matchMedia) {
+    const prefersDark = window.matchMedia(
+      '(prefers-color-scheme: dark)',
+    ).matches
+
+    if (prefersDark) {
+      document.body.style.backgroundColor = 'black'
+      document.body.style.color = 'white'
+      console.info('Dark theme applied.')
+    } else {
+      document.body.style.backgroundColor = 'white'
+      document.body.style.color = 'black'
+      console.info('Light theme applied.')
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  applySystemThemePreference()
+})