teuserer/www.netz39.de
1
0
Fork 0
mirror of https://github.com/netz39/www.netz39.de.git synced 2025-01-31 09:33:18 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make auto darkmode working by using "prefers-color-scheme" tag

Browse source
This commit is contained in:
MG-5 2023-11-01 12:50:00 +01:00
parent c01b9d499c
commit 93f92368c2
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
_includes/default/head.liquid
View file

@ -6,12 +6,21 @@
{% if site.color_theme == 'auto' %} {% if site.color_theme == 'auto' %}
<script> <script>
const isAutoTheme = true; const isAutoTheme = true;
document.documentElement.setAttribute('data-theme', sessionStorage.getItem('theme')) const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
document.documentElement.setAttribute('data-theme', storedTheme);
} else if (prefersDarkMode) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
</script> </script>
{% else %} {% else %}
<script> <script>
const isAutoTheme = false; const isAutoTheme = false;
document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}") document.documentElement.setAttribute('data-theme', "{{ site.color_theme | default: 'light' }}");
</script> </script>
{% endif %} {% endif %}