60 lines
1.5 KiB
Text
60 lines
1.5 KiB
Text
---
|
|
// Theme switcher for AeThex (mockup, extendable)
|
|
let theme = 'default';
|
|
function setTheme(t: string) {
|
|
theme = t;
|
|
document.body.setAttribute('data-theme', t);
|
|
}
|
|
const themes = [
|
|
{ name: 'Default', value: 'default' },
|
|
{ name: 'Retro', value: 'retro' },
|
|
{ name: 'Neon', value: 'neon' },
|
|
{ name: 'Hacker', value: 'hacker' }
|
|
];
|
|
---
|
|
<div class="theme-switcher">
|
|
<span>Theme:</span>
|
|
{themes.map(t => (
|
|
<button class="theme-btn" client:click={() => setTheme(t.value)}>{t.name}</button>
|
|
))}
|
|
</div>
|
|
<style>
|
|
.theme-switcher {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0.7em;
|
|
margin: 2em 0 1em 0;
|
|
font-size: 1em;
|
|
}
|
|
.theme-btn {
|
|
background: #222;
|
|
color: #ffd580;
|
|
border: 1.5px solid #ffd580;
|
|
border-radius: 8px;
|
|
padding: 0.5em 1.2em;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
.theme-btn:hover {
|
|
background: #ffd580;
|
|
color: #222;
|
|
}
|
|
</style>
|
|
<script>
|
|
// Simple theme switcher logic
|
|
const themeStyles = {
|
|
retro: 'body[data-theme=retro] { background: #f4ecd8; color: #222; }',
|
|
neon: 'body[data-theme=neon] { background: #0f0020; color: #39ff14; }',
|
|
hacker: 'body[data-theme=hacker] { background: #101c10; color: #00ff00; }',
|
|
default: 'body[data-theme=default] { background: #0a0a0a; color: #fff; }'
|
|
};
|
|
const styleTag = document.createElement('style');
|
|
document.head.appendChild(styleTag);
|
|
function setThemeScript(t) {
|
|
document.body.setAttribute('data-theme', t);
|
|
styleTag.innerHTML = themeStyles[t] || '';
|
|
}
|
|
window.setTheme = setThemeScript;
|
|
</script>
|