-
Hi, thank you for the great work! I've been using the theme to make a landing page for my product: https://konsulin.care/ I made some changes, which are stashed in my repo. However, I don't understand how to set the light mode as a default theme. How do I achieve that? |
Beta Was this translation helpful? Give feedback.
Answered by
lamurian
Jul 11, 2024
Replies: 1 comment
-
After digging around, I managed to set the light mode as its default theme by changing var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark') {
themeToggleLightIcon.classList.remove('hidden');
document.documentElement.classList.add('dark');
} else {
themeToggleDarkIcon.classList.remove('hidden');
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light'); // Ensure light mode is set by default in localStorage
}
var themeToggleBtn = document.getElementById('theme-toggle');
themeToggleBtn.addEventListener('click', function() {
// toggle icons inside button
themeToggleDarkIcon.classList.toggle('hidden');
themeToggleLightIcon.classList.toggle('hidden');
// if set via local storage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
}); |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
lamurian
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
After digging around, I managed to set the light mode as its default theme by changing
assets/js/darkmode.js
into: