diff options
| author | Daniel Friesel <derf@finalrewind.org> | 2021-04-27 21:55:20 +0200 |
|---|---|---|
| committer | Daniel Friesel <derf@finalrewind.org> | 2021-04-27 21:55:20 +0200 |
| commit | d09aaa6f0c33d4c22f383e93bf389e821f4c76c4 (patch) | |
| tree | 2580dd4f4cf9804e47dda50f45d53be6b537bf7e | |
| parent | 7a8d2dde13b51dbefd99b5c45e0294a6b7486d7f (diff) | |
add a bit of dark mode
| -rwxr-xr-x | bin/pyggle | 2 | ||||
| -rw-r--r-- | share/css/dark.css | 14 | ||||
| -rw-r--r-- | share/css/light.css | 3 | ||||
| -rw-r--r-- | share/html_start | 25 |
4 files changed, 43 insertions, 1 deletions
@@ -146,7 +146,7 @@ def copy_files(base_dir): imgwidth = f"{args.size}px" imgheight = f"{args.size}px" - css_files = ["glightbox.min.css"] + css_files = ["glightbox.min.css", "light.css", "dark.css"] js_files = ["glightbox.min.js"] for css_file in css_files: diff --git a/share/css/dark.css b/share/css/dark.css new file mode 100644 index 0000000..64ea7c2 --- /dev/null +++ b/share/css/dark.css @@ -0,0 +1,14 @@ +body, html { + color: #eeeeee; + background-color: #333333; +} + +a { + color: #9999ff; +} + +.glightbox-clean +.gslide-description { + color: #eeeeee!important; + background-color: #333333!important; +} diff --git a/share/css/light.css b/share/css/light.css new file mode 100644 index 0000000..0fb96c9 --- /dev/null +++ b/share/css/light.css @@ -0,0 +1,3 @@ +a { + color: #000099; +} diff --git a/share/html_start b/share/html_start index 0e21831..68be715 100644 --- a/share/html_start +++ b/share/html_start @@ -5,8 +5,33 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href=".data/css/main.css"/> + <link rel="stylesheet" type="text/css" href=".data/css/light.css" id="theme"/> <!-- glightbox (C) biati digital, MIT licensed. <https://biati-digital.github.io/glightbox/> --> <link rel="stylesheet" href=".data/css/glightbox.min.css" /> + <script> + function addStyleSheet(name, id) { + var path = '.data/css/' + name + '.css'; + var old = document.getElementById(id); + if (old && (old.href != path)) { + old.href = path; + } + } + var otherTheme = { + 'dark': 'light', + 'light': 'dark', + }; + var currentTheme = localStorage.getItem('theme'); + if (!otherTheme.hasOwnProperty(currentTheme)) { + currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } + addStyleSheet(currentTheme, 'theme'); + + function toggleTheme() { + currentTheme = otherTheme[currentTheme] || 'light'; + localStorage.setItem('theme', currentTheme); + addStyleSheet(currentTheme, 'theme'); + } + </script> <script src=".data/js/glightbox.min.js"></script> </head> <body><div> |