Implement logic setting/disabling accessibility override colors when …

…theme is changed in settings
kommunarr · Aug 27, 2023 · 2a651c2 · 2a651c2
1 parent ecbcd90
commit 2a651c2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 19 deletions.
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
@@ -6,7 +6,7 @@ import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtSlider from '../ft-slider/ft-slider.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
-import { colors } from '../../helpers/colors'
+import { colors, calculateColorContrastRatio } from '../../helpers/colors'
 
 export default defineComponent({
   name: 'ThemeSettings',
@@ -25,6 +25,21 @@ export default defineComponent({
       uiScaleStep: 5,
       disableSmoothScrollingToggleValue: false,
       showRestartPrompt: false,
+      colorValues: function () {
+        const cardColor = getComputedStyle(document.querySelector('.ft-card')).getPropertyValue('--card-bg-color').trim()
+
+        // while the AA standard is 4.5, this contrast checker seems to consistently give results that are 1.3 points below most other contrast checkers
+        const accessibleColors = colors.filter(color => (1.3 + calculateColorContrastRatio(cardColor, color.value)) >= 4.5)
+        return accessibleColors.map(color => color.name)
+      },
+
+      colorNames: function () {
+        return this.colorValues().map(colorVal => {
+          // add spaces before capital letters
+          const colorName = colorVal.replaceAll(/([A-Z])/g, ' $1').trim()
+          return this.$t(`Settings.Theme Settings.Main Color Theme.${colorName}`)
+        })
+      },
       restartPromptValues: [
         'yes',
         'no'
@@ -56,6 +71,14 @@ export default defineComponent({
       return this.$store.getters.getSecColor
     },
 
+    accessibilityOverrideMainColor: function () {
+      return this.$store.getters.getAccessibilityOverrideMainColor
+    },
+
+    accessibilityOverrideSecColor: function () {
+      return this.$store.getters.getAccessibilityOverrideSecColor
+    },
+
     isSideNavOpen: function () {
       return this.$store.getters.getIsSideNavOpen
     },
@@ -102,17 +125,6 @@ export default defineComponent({
       ]
     },
 
-    colorValues: function () {
-      return colors.map(color => color.name)
-    },
-
-    colorNames: function () {
-      return this.colorValues.map(colorVal => {
-        // add spaces before capital letters
-        const colorName = colorVal.replaceAll(/([A-Z])/g, ' $1').trim()
-        return this.$t(`Settings.Theme Settings.Main Color Theme.${colorName}`)
-      })
-    },
     usingElectron: function () {
       return process.env.IS_ELECTRON
     }
@@ -150,11 +162,24 @@ export default defineComponent({
       })
     },
 
+    handleBaseThemeChange: function (value) {
+      this.updateBaseTheme(value).then(() => {
+        const colorValues = this.colorValues()
+        const accessibilityOverrideMainColor = !colorValues.includes(this.mainColor) ? colorValues[0] : ''
+        const accessibilityOverrideSecColor = !colorValues.includes(this.secColor) ? colorValues[1] : ''
+
+        this.updateAccessibilityOverrideMainColor(accessibilityOverrideMainColor)
+        this.updateAccessibilityOverrideSecColor(accessibilityOverrideSecColor)
+      })
+    },
+
     ...mapActions([
       'updateBarColor',
       'updateBaseTheme',
       'updateMainColor',
       'updateSecColor',
+      'updateAccessibilityOverrideMainColor',
+      'updateAccessibilityOverrideSecColor',
       'updateExpandSideBar',
       'updateUiScale',
       'updateDisableSmoothScrolling',

diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
@@ -57,20 +57,20 @@
         :value="baseTheme"
         :select-names="baseThemeNames"
         :select-values="baseThemeValues"
-        @change="updateBaseTheme"
+        @change="handleBaseThemeChange"
       />
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Main Color Theme.Main Color Theme')"
-        :value="mainColor"
-        :select-names="colorNames"
-        :select-values="colorValues"
+        :value="accessibilityOverrideMainColor || mainColor"
+        :select-names="colorNames()"
+        :select-values="colorValues()"
         @change="updateMainColor"
       />
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Secondary Color Theme')"
-        :value="secColor"
-        :select-names="colorNames"
-        :select-values="colorValues"
+        :value="accessibilityOverrideSecColor || secColor"
+        :select-names="colorNames()"
+        :select-values="colorValues()"
         @change="updateSecColor"
       />
     </ft-flex-box>