phundrak/langue-phundrak-com
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Bettert CSS and Dart code

Browse Source
This commit is contained in:
Lucien Cartier-Tilet 2019-12-26 15:57:18 +01:00
parent 6b40058c9f
commit 60b1658135
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/css/main.scss
View File

@ -52,7 +52,7 @@ body {
#content {
max-width: 1100px;
margin: 20px auto;
padding: 10px;
padding: 20px;
box-shadow: 5px 5px 7px rgba(1, 1, 1, .6);
}

39
web/dart/main.dart
View File

@ -4,14 +4,18 @@ library main;
import 'dart:html';
import 'package:js/js.dart';
import './cookie.dart';
void main() {
reorganizeHtml();
createThemeSwitcher();
querySelector('.themeBtn').onClick.listen(themeSwitch);
themeSwitch(isThemeDark());
querySelector('.themeBtn').onClick.listen(themeSwitchMouse);
}
String cookieThemeName = 'theme';
void createThemeSwitcher() {
// set the correct CSS depending on the cookie, dark is enabled by default
var isDark = isThemeDark();
@ -23,26 +27,13 @@ void createThemeSwitcher() {
}
bool isThemeDark() {
if (Cookies.get('theme') == 'light') {
if (Cookies.get(cookieThemeName) == 'light') {
return false;
}
Cookies.set('theme', 'dark');
Cookies.set(cookieThemeName, 'dark');
return true;
}
bool setTheme(bool dark) {
Cookies.set('theme', (dark ? 'dark' : 'light'));
return !dark;
}
void themeSwitch(MouseEvent event) {
print('Switch theme');
bool isDark = setTheme(isThemeDark());
querySelector('.fas').className = 'fas fa-' + (isDark ? 'sun' : 'moon');
querySelector('#theme').attributes['href'] =
'/css/' + (isDark ? 'dark' : 'light') + '.css';
}
void reorganizeHtml() {
// Add a <hr> element after the content div
querySelector('#content').appendHtml('<hr>');
@ -57,3 +48,19 @@ void reorganizeHtml() {
largetable.children.add(table);
}
}
bool setTheme(bool dark) {
Cookies.set(cookieThemeName, (dark ? 'dark' : 'light'));
return !dark;
}
void themeSwitch(bool isDark) {
querySelector('.fas').className = 'fas fa-' + (isDark ? 'sun' : 'moon');
querySelector('#theme').attributes['href'] =
'/css/' + (isDark ? 'dark' : 'light') + '.css';
}
void themeSwitchMouse(MouseEvent event) {
bool isDark = setTheme(!isThemeDark());
themeSwitch(isDark);
}