Lucien Cartier-Tilet
9725e24b38
The default theme is now chosen based on the user’s preference stored in their device. If the device uses a dark theme, the website’s dark theme will be used by default. Otherwise, the light theme will be used by default.
54 lines
1.3 KiB
Dart
54 lines
1.3 KiB
Dart
import 'dart:html';
|
|
|
|
class Theme {
|
|
String _name;
|
|
String _icon;
|
|
|
|
Theme(String t_name, String t_icon) {
|
|
_name = t_name;
|
|
_icon = t_icon;
|
|
}
|
|
|
|
String getIcon() => _icon;
|
|
String getName() => _name;
|
|
}
|
|
|
|
final themes = {
|
|
'light': Theme('light', 'fa-sun'),
|
|
'dark': Theme('dark', 'fa-lightbulb'),
|
|
'black': Theme('black', 'fa-moon')
|
|
};
|
|
|
|
final localStorage = window.localStorage;
|
|
|
|
void enableThemeChanger() {
|
|
final darkBtn = querySelector('#darkBtn');
|
|
final lightBtn = querySelector('#lightBtn');
|
|
final blackBtn = querySelector('#blackBtn');
|
|
|
|
lightBtn.onClick.listen((_) => switchTheme(themes['light']));
|
|
darkBtn.onClick.listen((_) => switchTheme(themes['dark']));
|
|
blackBtn.onClick.listen((_) => switchTheme(themes['black']));
|
|
}
|
|
|
|
Future<void> setTheme() async {
|
|
final currentTheme = themes[localStorage['theme']] ??
|
|
() {
|
|
final devicePrefersDark =
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
return themes[devicePrefersDark ? 'dark' : 'light'];
|
|
}();
|
|
querySelector('body')
|
|
..classes.clear()
|
|
..classes.add(currentTheme.getName());
|
|
}
|
|
|
|
void switchTheme(Theme currentTheme) {
|
|
// Set HTML theme
|
|
querySelector('body')
|
|
..classes.clear()
|
|
..classes.add(currentTheme.getName());
|
|
// Set storage theme
|
|
localStorage['theme'] = currentTheme.getName();
|
|
}
|