Add support for prefers-color-scheme media query
Showing the changes to assets/javascripts/app (1 of 5 files). Show all
Unified · Split
| @@ -7,7 +7,8 @@ class app.Settings · 6 unmodified lines | ||
| 7 | 7 | 'arrowScroll' |
| 8 | 8 | 'analyticsConsent' |
| 9 | 9 | 'docs' |
| 10 | − 'dark' | |
| 10 | + 'dark' # legacy | |
| 11 | + 'theme' | |
| 11 | 12 | 'layout' |
| 12 | 13 | 'size' |
| 13 | 14 | 'tips' |
| @@ -31,10 +32,16 @@ class app.Settings · 17 unmodified lines | ||
| 31 | 32 | manualUpdate: false |
| 32 | 33 | schema: 1 |
| 33 | 34 | analyticsConsent: false |
| 35 | + theme: 'auto' | |
| 34 | 36 | |
| 35 | 37 | constructor: -> |
| 36 | 38 | @store = new CookiesStore |
| 37 | 39 | @cache = {} |
| 40 | + @autoSupported = window.matchMedia('(prefers-color-scheme)').media != 'not all' | |
| 41 | + if @autoSupported | |
| 42 | + @darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)') | |
| 43 | + @darkModeQuery.addListener => @setTheme(@get('theme')) | |
| 44 | + | |
| 38 | 45 | |
| 39 | 46 | get: (key) -> |
| 40 | 47 | return @cache[key] if @cache.hasOwnProperty(key) |
| @@ -43,7 +50,7 @@ class app.Settings · 2 unmodified lines | ||
| 43 | 50 | set: (key, value) -> |
| 44 | 51 | @store.set(key, value) |
| 45 | 52 | delete @cache[key] |
| 46 | − @toggleDark(value) if key == 'dark' | |
| 53 | + @setTheme(value) if key == 'theme' | |
| 47 | 54 | return |
| 48 | 55 | |
| 49 | 56 | del: (key) -> |
| @@ -114,15 +121,24 @@ class app.Settings · 64 unmodified lines | ||
| 114 | 121 | return |
| 115 | 122 | |
| 116 | 123 | initLayout: -> |
| 117 | − @toggleDark(@get('dark') is 1) | |
| 124 | + if @get('dark') is 1 | |
| 125 | + @set('theme', 'dark') | |
| 126 | + @del 'dark' | |
| 127 | + @setTheme(@get('theme')) | |
| 118 | 128 | @toggleLayout(layout, @hasLayout(layout)) for layout in @LAYOUTS |
| 119 | 129 | @initSidebarWidth() |
| 120 | 130 | return |
| 121 | 131 | |
| 122 | − toggleDark: (enable) -> | |
| 132 | + setTheme: (theme) -> | |
| 133 | + if theme is 'auto' | |
| 134 | + theme = if @darkModeQuery.matches then 'dark' else 'default' | |
| 123 | 135 | classList = document.documentElement.classList |
| 124 | − classList.toggle('_theme-default', !enable) | |
| 125 | − classList.toggle('_theme-dark', enable) | |
| 136 | + classList.remove('_theme-default', '_theme-dark') | |
| 137 | + classList.add('_theme-' + theme) | |
| 138 | + @updateColorMeta() | |
| 139 | + return | |
| 140 | + | |
| 141 | + updateColorMeta: -> | |
| 126 | 142 | color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim() |
| 127 | 143 | $('meta[name=theme-color]').setAttribute('content', color) |
| 128 | 144 | return |