Add support for prefers-color-scheme media query
Showing the changes to assets/javascripts/templates (1 of 5 files). Show all
Unified · Split
| @@ -1,13 +1,29 @@ | ||
| 1 | +themeOption = ({ label, value }, settings) -> """ | |
| 2 | + <label class="_settings-label _theme-label"> | |
| 3 | + <input type="radio" name="theme" value="#{value}"#{if settings.theme == value then ' checked' else ''}> | |
| 4 | + #{label} | |
| 5 | + </label> | |
| 6 | +""" | |
| 7 | + | |
| 1 | 8 | app.templates.settingsPage = (settings) -> """ |
| 2 | 9 | <h1 class="_lined-heading">Preferences</h1> |
| 3 | 10 | |
| 11 | + <div class="_settings-fieldset"> | |
| 12 | + <h2 class="_settings-legend">Theme:</h2> | |
| 13 | + <div class="_settings-inputs"> | |
| 14 | + #{if settings.autoSupported | |
| 15 | + themeOption label: "Automatic <small>Matches system setting</small>", value: "auto", settings | |
| 16 | + else | |
| 17 | + ""} | |
| 18 | + #{themeOption label: "Light", value: "default", settings} | |
| 19 | + #{themeOption label: "Dark", value: "dark", settings} | |
| 20 | + </div> | |
| 21 | + </div> | |
| 22 | + | |
| 4 | 23 | <div class="_settings-fieldset"> |
| 5 | 24 | <h2 class="_settings-legend">General:</h2> |
| 6 | 25 | |
| 7 | 26 | <div class="_settings-inputs"> |
| 8 | − <label class="_settings-label"> | |
| 9 | − <input type="checkbox" form="settings" name="dark" value="1"#{if settings.dark then ' checked' else ''}>Enable dark theme | |
| 10 | − </label> | |
| 11 | 27 | <label class="_settings-label _setting-max-width"> |
| 12 | 28 | <input type="checkbox" form="settings" name="layout" value="_max-width"#{if settings['_max-width'] then ' checked' else ''}>Enable fixed-width layout |
| 13 | 29 | </label> |