michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-24 03:43:42 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve light/dark theme default for anonymous users

Browse source
This commit is contained in:
rimu 2024-08-05 18:13:11 +12:00
parent 024e1f37fb
commit 64d6fadb64
2 changed files with 21 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/static/js/scripts.js
View file

@ -1,3 +1,22 @@
const getStoredTheme = () => localStorage.getItem('theme');
const setStoredTheme = theme => localStorage.setItem('theme', theme);
const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
if (storedTheme) {
return storedTheme
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark')
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
}
}
// fires after DOM is ready for manipulation // fires after DOM is ready for manipulation
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
setupCommunityNameInput(); setupCommunityNameInput();
@ -7,6 +26,7 @@ document.addEventListener("DOMContentLoaded", function () {
setupTimeTracking(); setupTimeTracking();
setupMobileNav(); setupMobileNav();
setupLightDark(); setupLightDark();
setTheme(getPreferredTheme());
setupKeyboardShortcuts(); setupKeyboardShortcuts();
setupTopicChooser(); setupTopicChooser();
setupConversationChooser(); setupConversationChooser();

23
app/templates/base.html
View file

@ -52,6 +52,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True"> <meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"> <meta name="MobileOptimized" content="320">
<link rel="expect" blocking="render" href="#navbarSupportedContent">
{% block styles -%} {% block styles -%}
{{ bootstrap.load_css() }} {{ bootstrap.load_css() }}
<link href="{{ url_for('static', filename='styles.css', changed=getmtime('styles.css')) }}" type="text/css" rel="stylesheet" /> <link href="{{ url_for('static', filename='styles.css', changed=getmtime('styles.css')) }}" type="text/css" rel="stylesheet" />
@ -89,28 +90,6 @@
{% if noindex -%} {% if noindex -%}
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
{% endif -%} {% endif -%}
<script nonce="{{ session['nonce']}}">
const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
if (storedTheme) {
return storedTheme
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark')
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
}
}
setTheme(getPreferredTheme());
</script>
{% if preconnect and not low_bandwidth -%} {% if preconnect and not low_bandwidth -%}
<link rel="preconnect" href='{{ preconnect }}'> <link rel="preconnect" href='{{ preconnect }}'>
{% endif -%} {% endif -%}