Lucien Cartier-Tilet
e710c594f1
This commit adds the Nord theme into the list of available themes. The
Nord theme is now the default theme for dark-based systems.
Theme buttons now have their own class to make it easier to change
them without too much work.
The `style.scss' file has been split up in three different files:
- main.scss, the new file to load from the HTML page, imports the two
other files
- themes.scss, containing all the theming of the websites
- style.scss, containing the rest
All websites loading the theme will now need to load it from
`main.scss' instead of `style.scss', likewise with the `.css'
extension
24 lines
669 B
Dart
24 lines
669 B
Dart
import 'dart:html' show window, querySelector;
|
|
|
|
final localStorage = window.localStorage;
|
|
|
|
Future<void> setTheme([String theme]) async {
|
|
final currentTheme = theme ?? localStorage['theme'] ??
|
|
() {
|
|
final devicePrefersDark =
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
return devicePrefersDark ? 'nord' : 'light';
|
|
}();
|
|
localStorage['theme'] = currentTheme;
|
|
querySelector('body')
|
|
..classes.clear()
|
|
..classes.add(currentTheme);
|
|
}
|
|
|
|
void enableThemeChanger() {
|
|
final themes = <String>['light', 'dark', 'nord', 'black'];
|
|
themes.forEach((theme) =>
|
|
querySelector('#${theme}Btn').onClick.listen((_) => setTheme(theme))
|
|
);
|
|
}
|