quasar/ui/src/plugins/dark/Dark.js at ba3c24fb671cbe8b953561ec2f6ff171252ef7ee · quasarframework/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { createReactivePlugin } from '../../utils/private.create/create.js'
import { getRootTarget } from '../../utils/private.dom/root.js'

const Plugin = createReactivePlugin(
  {
    isActive: false,
    mode: false
  },
  {
    __media: void 0,

    set(val) {
      if (__QUASAR_SSR_SERVER__) return

      Plugin.mode = val

      if (val === 'auto') {
        if (Plugin.__media === void 0) {
          Plugin.__media = window.matchMedia('(prefers-color-scheme: dark)')
          Plugin.__updateMedia = () => {
            Plugin.set('auto')
          }
          Plugin.__media.addListener(Plugin.__updateMedia)
        }

        val = Plugin.__media.matches
      } else if (Plugin.__media !== void 0) {
        Plugin.__media.removeListener(Plugin.__updateMedia)
        Plugin.__media = void 0
      }

      Plugin.isActive = val === true

      const target = getRootTarget()
      if (target?.classList) {
        target.classList.remove(`body--${val === true ? 'light' : 'dark'}`)
        target.classList.add(`body--${val === true ? 'dark' : 'light'}`)
      }
    },

    toggle() {
      if (__QUASAR_SSR_SERVER__ !== true) {
        Plugin.set(Plugin.isActive === false)
      }
    },

    install({ $q, ssrContext }) {
      const target = __QUASAR_SSR_CLIENT__ ? getRootTarget() : null
      const dark = __QUASAR_SSR_CLIENT__
        ? target?.classList?.contains('body--dark')
        : $q.config.dark

      if (__QUASAR_SSR_SERVER__) {
        this.isActive = dark === true

        $q.dark = {
          isActive: false,
          mode: false,
          set: val => {
            ssrContext._meta.bodyClasses =
              ssrContext._meta.bodyClasses
                .replace(' body--light', '')
                .replace(' body--dark', '') +
              ` body--${val === true ? 'dark' : 'light'}`

            $q.dark.isActive = val === true
            $q.dark.mode = val
          },
          toggle: () => {
            $q.dark.set($q.dark.isActive === false)
          }
        }

        $q.dark.set(dark)
        return
      }

      $q.dark = this

      if (this.__installed !== true) {
        this.set(dark !== void 0 ? dark : false)
      }
    }
  }
)

export default Plugin