History

Merge pull request #1086 from simon04/prefers-color-scheme

Add support for prefers-color-scheme media query

Jed Fox committed 6 years ago

Commit 364be3b2 parents af8576f cc406a85 files · +62 −16Browse files

Showing the changes to assets/javascripts/app (1 of 5 files). Show all

Unified · Split

assets/javascripts/app/settings.coffee+22−6
@@ -7,7 +7,8 @@ class app.Settings · 6 unmodified lines
7 'arrowScroll'7 'arrowScroll'
8 'analyticsConsent'8 'analyticsConsent'
9 'docs'9 'docs'
10 'dark'10 'dark' # legacy
11 'theme'
11 'layout'12 'layout'
12 'size'13 'size'
13 'tips'14 'tips'
@@ -31,10 +32,16 @@ class app.Settings · 17 unmodified lines
31 manualUpdate: false32 manualUpdate: false
32 schema: 133 schema: 1
33 analyticsConsent: false34 analyticsConsent: false
35 theme: 'auto'
34 36
35 constructor: ->37 constructor: ->
36 @store = new CookiesStore38 @store = new CookiesStore
37 @cache = {}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 get: (key) ->46 get: (key) ->
40 return @cache[key] if @cache.hasOwnProperty(key)47 return @cache[key] if @cache.hasOwnProperty(key)
@@ -43,7 +50,7 @@ class app.Settings · 2 unmodified lines
43 set: (key, value) ->50 set: (key, value) ->
44 @store.set(key, value)51 @store.set(key, value)
45 delete @cache[key]52 delete @cache[key]
46 @toggleDark(value) if key == 'dark'53 @setTheme(value) if key == 'theme'
47 return54 return
48 55
49 del: (key) ->56 del: (key) ->
@@ -114,15 +121,24 @@ class app.Settings · 64 unmodified lines
114 return121 return
115 122
116 initLayout: ->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 @toggleLayout(layout, @hasLayout(layout)) for layout in @LAYOUTS128 @toggleLayout(layout, @hasLayout(layout)) for layout in @LAYOUTS
119 @initSidebarWidth()129 @initSidebarWidth()
120 return130 return
121 131
122 toggleDark: (enable) ->132 setTheme: (theme) ->
133 if theme is 'auto'
134 theme = if @darkModeQuery.matches then 'dark' else 'default'
123 classList = document.documentElement.classList135 classList = document.documentElement.classList
124 classList.toggle('_theme-default', !enable)136 classList.remove('_theme-default', '_theme-dark')
125 classList.toggle('_theme-dark', enable)137 classList.add('_theme-' + theme)
138 @updateColorMeta()
139 return
140
141 updateColorMeta: ->
126 color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim()142 color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim()
127 $('meta[name=theme-color]').setAttribute('content', color)143 $('meta[name=theme-color]').setAttribute('content', color)
128 return144 return