diff --git a/ui/src/plugins/dark/Dark.js b/ui/src/plugins/dark/Dark.js
index 7c54622837c..7715fc673c7 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({
+  isEnabled: 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.isEnabled = 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.isEnabled = matchMedia.matches
 
       $q.dark = {
+        isEnabled: 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.isEnabled = matchMedia.matches
           $q.dark.isActive = val === true
           $q.dark.mode = val
         },