From 89cfccd100210e047c373d7e777f7eaa073a144c Mon Sep 17 00:00:00 2001 From: Peter Temi Date: Mon, 2 Dec 2024 18:03:51 +0100 Subject: [PATCH 1/2] Update Dark.js --- ui/src/plugins/dark/Dark.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/src/plugins/dark/Dark.js b/ui/src/plugins/dark/Dark.js index 7c54622837c..130155b075d 100644 --- a/ui/src/plugins/dark/Dark.js +++ b/ui/src/plugins/dark/Dark.js @@ -1,6 +1,7 @@ import { createReactivePlugin } from '../../utils/private.create/create.js' const Plugin = createReactivePlugin({ + isPreferred: false, isActive: false, mode: false }, { @@ -9,11 +10,13 @@ const Plugin = createReactivePlugin({ set (val) { if (__QUASAR_SSR_SERVER__) return + const matchMedia = window.matchMedia('(prefers-color-scheme: dark)') Plugin.mode = val + Plugin.isPreferred = matchMedia.matches if (val === 'auto') { if (Plugin.__media === void 0) { - Plugin.__media = window.matchMedia('(prefers-color-scheme: dark)') + Plugin.__media = matchMedia Plugin.__updateMedia = () => { Plugin.set('auto') } Plugin.__media.addListener(Plugin.__updateMedia) } @@ -42,8 +45,10 @@ const Plugin = createReactivePlugin({ if (__QUASAR_SSR_SERVER__) { this.isActive = dark === true + this.isPreferred = matchMedia.matches $q.dark = { + isPreferred: false, isActive: false, mode: false, set: val => { @@ -51,6 +56,7 @@ const Plugin = createReactivePlugin({ .replace(' body--light', '') .replace(' body--dark', '') + ` body--${ val === true ? 'dark' : 'light' }` + $q.dark.isPreferred = false $q.dark.isActive = val === true $q.dark.mode = val }, From 961fed9b9957fd33bf7469694a4c4c4d214e4499 Mon Sep 17 00:00:00 2001 From: Peter Temi Date: Mon, 2 Dec 2024 18:06:13 +0100 Subject: [PATCH 2/2] Update Dark.json --- ui/src/plugins/dark/Dark.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ui/src/plugins/dark/Dark.json b/ui/src/plugins/dark/Dark.json index 3715e0548a6..9e35f0e293d 100644 --- a/ui/src/plugins/dark/Dark.json +++ b/ui/src/plugins/dark/Dark.json @@ -13,6 +13,12 @@ }, "props": { + "isPreferred": { + "type": "Boolean", + "desc": "Is Dark mode enabled?", + "reactive": true + }, + "isActive": { "type": "Boolean", "desc": "Is Dark mode active?",