* Switch from SASS variables to CSS variables for most styling These are the simple cases, and the more complex ones will be covered by future commits. I’ve also replaced $fooZ ± 1 with the appropriate variable to avoid a runtime `calc()`. * Eliminate the `$style` variable 🔥 I’ve added a `--absolute` variable that’s `white` in dark mode and `black` in regular mode. * Remove `$inputFocusBorder` 🔥 * Switch the Prism styles to CSS variables * Convert `$mediumScreen` to a mixin * 🔥 `$selectionText` * Eliminate the final uses of SCSS variables I’ve dropped the 95% opacity on the background of the method source code overlay in RDoc since the difference isn’t noticeable but it makes implementation a lot easier. * Misc fixes * Extract the common variables from the two themes to a new file * Remove illegal usages of CSS variables in SCSS functions This flattens out the buttons on the settings page which makes the styles simpler (and more modern-looking IMO) and removes the box-shadow on the button, which was completely invisible to me. * Fix usages of SCSS functions in CSS variables * Use `html._theme-*` selectors * Eliminate `application-dark.css`; switch themes by toggling classes This also means that the Application Cache doesn’t have to get updated when toggling themes, and a new CSS file that’s nearly the same doesn’t need to be downloaded.
Showing the changes to assets/javascripts (1 of 53 files). Show all
Unified · Split
| @@ -24,12 +24,10 @@ class app.views.SettingsPage extends app.View · 23 unmodified lines | |||
| 24 | 'Preferences' | 24 | 'Preferences' |
| 25 | 25 | ||
| 26 | toggleDark: (enable) -> | 26 | toggleDark: (enable) -> |
| 27 | css = $('link[rel="stylesheet"][data-alt]') | 27 | html = document.documentElement |
| 28 | alt = css.getAttribute('data-alt') | 28 | html.classList.toggle('_theme-default') |
| 29 | css.setAttribute('data-alt', css.getAttribute('href')) | 29 | html.classList.toggle('_theme-dark') |
| 30 | css.setAttribute('href', alt) | ||
| 31 | app.settings.set('dark', !!enable) | 30 | app.settings.set('dark', !!enable) |
| 32 | app.appCache?.updateInBackground() | ||
| 33 | return | 31 | return |
| 34 | 32 | ||
| 35 | toggleLayout: (layout, enable) -> | 33 | toggleLayout: (layout, enable) -> |