teuserer/www.netz39.de
1
0
Fork 0
mirror of https://github.com/netz39/www.netz39.de.git synced 2025-01-19 04:20:10 +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

15
_includes/default/head.liquid
View file

@ -2,16 +2,25 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=5"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=5">
<!-- Theme Mode--> <!-- Theme Mode -->
{% 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 %}