[devdocsgjs/main: 928/1867] Add support for prefers-color-scheme media query
- From: Andy Holmes <andyholmes src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [devdocsgjs/main: 928/1867] Add support for prefers-color-scheme media query
- Date: Fri, 19 Nov 2021 23:47:35 +0000 (UTC)
commit 0700f2d833622e29218b98200a86950cb8485285
Author: Simon Legner <Simon Legner gmail com>
Date: Wed Sep 11 21:50:21 2019 +0200
Add support for prefers-color-scheme media query
assets/javascripts/app/settings.coffee | 18 ++++++++++++------
.../javascripts/templates/pages/settings_tmpl.coffee | 16 +++++++++++++---
assets/javascripts/views/content/settings_page.coffee | 10 +++++-----
3 files changed, 30 insertions(+), 14 deletions(-)
---
diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee
index 350a08c0..bfe8ae73 100644
--- a/assets/javascripts/app/settings.coffee
+++ b/assets/javascripts/app/settings.coffee
@@ -7,7 +7,8 @@ class app.Settings
'arrowScroll'
'analyticsConsent'
'docs'
- 'dark'
+ 'dark' # legacy
+ 'theme'
'layout'
'size'
'tips'
@@ -43,7 +44,7 @@ class app.Settings
set: (key, value) ->
@store.set(key, value)
delete @cache[key]
- @toggleDark(value) if key == 'dark'
+ @setTheme(value) if key == 'theme'
return
del: (key) ->
@@ -114,15 +115,20 @@ class app.Settings
return
initLayout: ->
- @toggleDark(@get('dark') is 1)
+ if @get('dark') is 1
+ @set('theme', 'dark')
+ @del 'dark'
+ @setTheme(@get('theme'))
@toggleLayout(layout, @hasLayout(layout)) for layout in @LAYOUTS
@initSidebarWidth()
return
- toggleDark: (enable) ->
+ setTheme: (theme) ->
+ if not theme
+ theme = if window.matchMedia('(prefers-color-scheme: dark)').matches then 'dark' else 'default'
classList = document.documentElement.classList
- classList.toggle('_theme-default', !enable)
- classList.toggle('_theme-dark', enable)
+ classList.remove('_theme-default', '_theme-dark')
+ classList.add('_theme-' + theme)
color = getComputedStyle(document.documentElement).getPropertyValue('--headerBackground').trim()
$('meta[name=theme-color]').setAttribute('content', color)
return
diff --git a/assets/javascripts/templates/pages/settings_tmpl.coffee
b/assets/javascripts/templates/pages/settings_tmpl.coffee
index d5cb0985..07bfc65a 100644
--- a/assets/javascripts/templates/pages/settings_tmpl.coffee
+++ b/assets/javascripts/templates/pages/settings_tmpl.coffee
@@ -2,12 +2,22 @@ app.templates.settingsPage = (settings) -> """
<h1 class="_lined-heading">Preferences</h1>
<div class="_settings-fieldset">
- <h2 class="_settings-legend">General:</h2>
-
+ <h2 class="_settings-legend">Theme:</h2>
<div class="_settings-inputs">
<label class="_settings-label">
- <input type="checkbox" form="settings" name="dark" value="1"#{if settings.dark then ' checked' else
''}>Enable dark theme
+ <select form="settings" name="theme">
+ <option value=""#{if not settings.theme then ' selected' else ''}>automatic</option>
+ <option value="default"#{if settings.theme == 'default' then ' selected' else ''}>light</option>
+ <option value="dark"#{if settings.theme == 'dark' then ' selected' else ''}>dark</option>
+ </select>
</label>
+ </div>
+ </div>
+
+ <div class="_settings-fieldset">
+ <h2 class="_settings-legend">General:</h2>
+
+ <div class="_settings-inputs">
<label class="_settings-label _setting-max-width">
<input type="checkbox" form="settings" name="layout" value="_max-width"#{if settings['_max-width']
then ' checked' else ''}>Enable fixed-width layout
</label>
diff --git a/assets/javascripts/views/content/settings_page.coffee
b/assets/javascripts/views/content/settings_page.coffee
index 9ca606c6..fd747438 100644
--- a/assets/javascripts/views/content/settings_page.coffee
+++ b/assets/javascripts/views/content/settings_page.coffee
@@ -11,7 +11,7 @@ class app.views.SettingsPage extends app.View
currentSettings: ->
settings = {}
- settings.dark = app.settings.get('dark')
+ settings.theme = app.settings.get('theme')
settings.smoothScroll = !app.settings.get('fastScroll')
settings.arrowScroll = app.settings.get('arrowScroll')
settings.autoInstall = app.settings.get('autoInstall')
@@ -22,8 +22,8 @@ class app.views.SettingsPage extends app.View
getTitle: ->
'Preferences'
- toggleDark: (enable) ->
- app.settings.set('dark', !!enable)
+ setTheme: (value) ->
+ app.settings.set('theme', value)
return
toggleLayout: (layout, enable) ->
@@ -74,8 +74,8 @@ class app.views.SettingsPage extends app.View
onChange: (event) =>
input = event.target
switch input.name
- when 'dark'
- @toggleDark input.checked
+ when 'theme'
+ @setTheme input.value
when 'layout'
@toggleLayout input.value, input.checked
when 'smoothScroll'
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]