pixeldev/test
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: theme switcher with light mode as default
All checks were successful
Deploy to dev.bl.pixeldev.eu / deploy (push) Successful in 2s
Details

Browse Source 
- Added CSS custom properties for light and dark themes
- Light mode is the default (data-theme="light" on <html>)
- Toggle button fixed top-right: switches between light/dark
- Preference persisted in localStorage so it survives page reloads

Closes #5
This commit is contained in:
OpenClaw Agent 2026-03-13 13:41:14 +00:00
parent 8ca647187d
commit 695ad3c9c6
1 changed files with 76 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
index.html
View File

@ -1,14 +1,88 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="light">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Deploy Test</title> <title>Deploy Test</title>
<style>body{background:#0d0d0d;color:#e0e0e0;font-family:system-ui;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem;}code{color:#7c9ef5;}</style> <style>
:root[data-theme="light"] {
--bg: #f5f5f5;
--fg: #111111;
--card: #ffffff;
--border: #ddd;
--accent: #4a6ef5;
--btn-bg: #111;
--btn-fg: #fff;
--btn-hover: #333;
}
:root[data-theme="dark"] {
--bg: #0d0d0d;
--fg: #e0e0e0;
--card: #161616;
--border: #2a2a2a;
--accent: #7c9ef5;
--btn-bg: #2a2a2a;
--btn-fg: #e0e0e0;
--btn-hover: #3a3a3a;
}
*, *::before, *::after { box-sizing: border-box; }
body {
background: var(--bg);
color: var(--fg);
font-family: system-ui, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
gap: 1rem;
transition: background .2s, color .2s;
margin: 0;
padding: 1rem;
}
h1 { margin: 0; }
p { max-width: 520px; text-align: center; line-height: 1.6; }
code { color: var(--accent); }
#theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--border);
border-radius: 8px;
padding: .45rem .85rem;
font-size: .85rem;
cursor: pointer;
font-family: inherit;
transition: background .15s;
}
#theme-toggle:hover { background: var(--btn-hover); }
</style>
</head> </head>
<body> <body>
<button id="theme-toggle">🌙 Dark mode</button>
<h1>Deploy verified</h1> <h1>Deploy verified</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Committed by OpenClaw at <code>2026-03-13 10:11:00 UTC</code></p> <p>Committed by OpenClaw at <code>2026-03-13 10:11:00 UTC</code></p>
<script>
(function() {
var root = document.documentElement;
var btn = document.getElementById('theme-toggle');
// Load saved preference; default to light
var saved = localStorage.getItem('theme') || 'light';
setTheme(saved);
btn.addEventListener('click', function() {
setTheme(root.getAttribute('data-theme') === 'light' ? 'dark' : 'light');
});
function setTheme(t) {
root.setAttribute('data-theme', t);
localStorage.setItem('theme', t);
btn.textContent = t === 'light' ? '🌙 Dark mode' : '☀️ Light mode';
}
})();
</script>
<script src="https://dev.bl.pixeldev.eu/feedback-tool/widget.js" data-repo="pixeldev/test"></script> <script src="https://dev.bl.pixeldev.eu/feedback-tool/widget.js" data-repo="pixeldev/test"></script>
</body> </body>
</html> </html>