lucas/playground.shiny.space
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix dark mode flash by inlining critical script

Browse source 
- Move dark mode detection to inline script in HTML head
- Prevents white flash in Firefox by applying theme before render
- Clean up redundant code in dark-mode.js
- Apply fix to all HTML pages for consistent behavior

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Lucas 2025-06-14 04:09:18 +02:00
parent ba5c3a9650
commit 7a4fa4b312
8 changed files with 42 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
account.html
View file

@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Information</title> <title>Account Information</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button> <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>

6
ajax.html
View file

@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Demo</title> <title>AJAX Demo</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button> <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>

8
dark-mode.js
View file

@ -1,11 +1,3 @@
// Apply saved theme immediately to prevent flash
(function() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
})();
// Dark mode toggle functionality // Dark mode toggle functionality
function toggleDarkMode() { function toggleDarkMode() {
const html = document.documentElement; const html = document.documentElement;

6
echo-test.html
View file

@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echo Test</title> <title>Echo Test</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button> <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>

6
index.html
View file

@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground - Feature Showcase</title> <title>Playground - Feature Showcase</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button> <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>

6
items.html
View file

@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Items Management - Test</title> <title>Items Management - Test</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button> <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>

6
mining.html
View file

@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mining Resources - Playground</title> <title>Mining Resources - Playground</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body> <body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button> <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>

6
random.html
View file

@ -5,6 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Number Generator</title> <title>Random Number Generator</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script>
// Apply dark mode immediately to prevent flash
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
</script>
</head> </head>
<body class="text-center"> <body class="text-center">
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button> <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>