feat: use system accent color

CyanSalt · Dec 15, 2020 · a173ea2 · a173ea2
1 parent 030005c
commit a173ea2
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/main/lib/theme.js b/main/lib/theme.js
@@ -1,4 +1,4 @@
-const { ipcMain, nativeTheme } = require('electron')
+const { ipcMain, nativeTheme, systemPreferences } = require('electron')
 const memoize = require('lodash/memoize')
 const { toRGBA, toCSSColor, toElectronColor, isDarkColor, mix } = require('../utils/color')
 const { resources, userData } = require('../utils/directory')
@@ -53,6 +53,8 @@ async function loadTheme() {
   if (!theme.cursorAccent) {
     theme.cursorAccent = theme.background
   }
+  const accentColor = systemPreferences.getAccentColor()
+  theme.systemAccent = accentColor ? `#${accentColor.slice(0, 6)}` : ''
   setThemeOptions({
     backgroundColor: toElectronColor({ ...backgroundRGBA, a: 0 }),
     vibrancy: opacity === 0 ? 'tooltip' : null,

diff --git a/renderer/components/app.vue b/renderer/components/app.vue
@@ -158,6 +158,7 @@ body {
   color: var(--theme-foreground, transparent);
   background: var(--theme-backdrop);
   transition: background 0.2s;
+  --system-accent: var(--design-blue);
 }
 .app.opaque {
   background: var(--theme-background);

diff --git a/renderer/components/basic/switch-control.vue b/renderer/components/basic/switch-control.vue
@@ -79,7 +79,7 @@ export default {
   transition: transform 0.2s;
 }
 .switch-control input:checked + .switch-content::before {
-  background: var(--design-blue);
+  background: var(--system-accent);
   opacity: 1;
 }
 .switch-control input:checked + .switch-content::after {

diff --git a/renderer/hooks/theme.mjs b/renderer/hooks/theme.mjs
@@ -11,10 +11,13 @@ export const useTheme = memoize(() => {
 })
 
 const themeStyleRef = computed(() => {
+  const property = {
+    systemAccent: '--system-accent',
+  }
   const theme = unref(useTheme())
   return Object.fromEntries(
     Object.entries(theme).filter(([key, value]) => value)
-      .map(([key, value]) => [`--theme-${key.toLowerCase()}`, value])
+      .map(([key, value]) => [property[key] ?? `--theme-${key.toLowerCase()}`, value])
   )
 })