Something went wrong. Try again.
A warm, tech-dystopian color scheme inspired by corrupted hardware and failing systems. digitalrust.katsuricata.com
theme color-scheme color-theme warm color
Something went wrong. Try again.
1.7 kB · 65 lines
Svelte
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566<script lang="ts"> import { onMount } from 'svelte'; import { scheme, setScheme, startScheme } from '#lib/scheme.svelte.js';
onMount(startScheme);
function toggle() { setScheme(scheme.current === 'safe-mode' ? 'dark' : 'safe-mode'); }</script>
<button class="scheme-toggle" type="button" onclick={toggle} aria-pressed={scheme.current === 'safe-mode'} title="Switch between the dark theme and Safe Mode"> Safe Mode <span class="scheme-toggle-state">{scheme.current === 'safe-mode' ? 'On' : 'Off'}</span></button>
<style> .scheme-toggle { display: inline-flex; align-items: center; gap: var(--dr-space-sm); background: var(--dr-surface-elevated); color: var(--dr-text-secondary); border: 2px solid var(--dr-border-color); border-radius: var(--dr-radius); box-shadow: var(--dr-shadow-offset-sm), var(--dr-shadow-inner-highlight); font-family: var(--dr-font-heading); font-size: var(--dr-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--dr-space-xs) var(--dr-space-sm); cursor: pointer; transition: transform var(--dr-transition-fast), box-shadow var(--dr-transition-fast), border-color var(--dr-transition-fast); }
.scheme-toggle:hover { transform: var(--dr-press-hover); box-shadow: var(--dr-shadow-hover-md), var(--dr-shadow-inner-highlight); border-color: var(--dr-border-color-hover); }
.scheme-toggle:active { transform: var(--dr-press-active); box-shadow: var(--dr-shadow-active); }
.scheme-toggle:focus-visible { outline: var(--dr-focus-ring); outline-offset: var(--dr-focus-ring-offset); }
.scheme-toggle-state { color: var(--dr-text-primary); }</style>