eightball/all-in-one
1
0
Fork 0
mirror of https://github.com/nextcloud/all-in-one.git synced 2025-12-19 22:16:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

fix(ui): ensure theme-toggle button is visible on first visit

Browse source 
Signed-off-by: ernolf <raphael.gradenwitz@googlemail.com>
This commit is contained in:
ernolf 2024-10-17 17:18:58 +02:00
parent 2b6e81c074
commit a5b25ab56b
No known key found for this signature in database
GPG key ID: 0B145139A170715C
2 changed files with 13 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

18
php/public/toggle-dark-mode.js
View file

@ -1,7 +1,7 @@
// Function to toggle theme // Function to toggle theme
function toggleTheme() { function toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme'); const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = (currentTheme === 'dark') ? 'light' : 'dark'; const newTheme = (currentTheme === 'dark') ? '' : 'dark'; // Toggle between no theme and dark theme
document.documentElement.setAttribute('data-theme', newTheme); document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme); localStorage.setItem('theme', newTheme);
@ -13,14 +13,14 @@ function toggleTheme() {
// Function to apply saved theme from localStorage // Function to apply saved theme from localStorage
function applySavedTheme() { function applySavedTheme() {
const savedTheme = localStorage.getItem('theme'); const savedTheme = localStorage.getItem('theme');
if (savedTheme) { if (savedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', savedTheme); document.documentElement.setAttribute('data-theme', 'dark');
document.getElementById('theme-icon').textContent = '☀️'; // Sun icon for dark mode
// Ensure the icon is set correctly based on the saved theme } else {
const themeIcon = document.getElementById('theme-icon'); document.documentElement.removeAttribute('data-theme'); // Default to light theme (no data-theme)
themeIcon.textContent = savedTheme === 'dark' ? '☀️' : '🌙'; document.getElementById('theme-icon').textContent = '🌙'; // Moon icon for light mode
} }
} }
// Apply theme when the page loads // Immediately apply the saved theme
document.addEventListener('DOMContentLoaded', applySavedTheme); applySavedTheme();

6
php/templates/layout.twig
View file

@ -4,16 +4,18 @@
<link rel="stylesheet" href="/style.css?v3" media="all" /> <link rel="stylesheet" href="/style.css?v3" media="all" />
<link rel="icon" href="/img/favicon.png"> <link rel="icon" href="/img/favicon.png">
<script type="text/javascript" src="forms.js"></script> <script type="text/javascript" src="forms.js"></script>
<script type="text/javascript" src="toggle-dark-mode.js"></script>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
{% block body %}{% endblock %} {% block body %}{% endblock %}
</div> </div>
<button id="theme-toggle" onclick="toggleTheme()"><span id="theme-icon"/></button>
<script type="text/javascript" src="toggle-dark-mode.js"></script>
<div id="overlay"> <div id="overlay">
<div class="loader"></div> <div class="loader"></div>
</div> </div>
<button id="theme-toggle" onclick="toggleTheme()">
<span id="theme-icon">🌙</span>
</button>
</body> </body>
</html> </html>