frontend: improve theme initialization logic to prevent flickering
This commit is contained in:
parent
cc39f03bc9
commit
5a398982d4
@ -12,10 +12,20 @@
|
|||||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Apply the saved theme on initial load to prevent flickering
|
// Apply the correct theme on initial load to prevent flickering
|
||||||
(function () {
|
(function () {
|
||||||
const savedTheme = localStorage.getItem('ovMeet-theme') || 'light';
|
const savedTheme = localStorage.getItem('ovMeet-theme');
|
||||||
if (savedTheme === 'dark') {
|
let theme = 'light';
|
||||||
|
|
||||||
|
if (savedTheme) {
|
||||||
|
// Use saved preference
|
||||||
|
theme = savedTheme;
|
||||||
|
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||||
|
// Use system preference
|
||||||
|
theme = 'dark';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (theme === 'dark') {
|
||||||
document.documentElement.setAttribute('data-theme', 'dark');
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user