Something went wrong. Try again.
experiments in a post-browser web
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130/** * Peek Default Theme * Base16 color scheme with light and dark variants * * Usage: * - No data-theme attribute: follows system preference * - data-theme="light": force light mode * - data-theme="dark": force dark mode */
/* ========== Light Mode (default) ========== */:root { /* Base16 Grayscale */ --base00: #ffffff; /* Default Background */ --base01: #f5f5f5; /* Lighter Background (status bars, line numbers) */ --base02: #e0e0e0; /* Selection Background */ --base03: #b0b0b0; /* Comments, Invisibles, Line Highlighting */ --base04: #666666; /* Dark Foreground (status bars) */ --base05: #333333; /* Default Foreground, Caret, Delimiters */ --base06: #1a1a1a; /* Light Foreground (rarely used) */ --base07: #0f0f0f; /* Light Background (rarely used) */
/* Base16 Accent Colors */ --base08: #d73a49; /* Red - Variables, Errors, Diff Deleted */ --base09: #e36209; /* Orange - Integers, Boolean, Constants */ --base0A: #c08b00; /* Yellow - Classes, Search Background */ --base0B: #22863a; /* Green - Strings, Success, Diff Inserted */ --base0C: #1b7c83; /* Cyan - Support, Regex, Escape Chars */ --base0D: #0066cc; /* Blue - Functions, Primary Accent */ --base0E: #6f42c1; /* Purple - Keywords, Storage */ --base0F: #8b4513; /* Brown - Deprecated */
/* Semantic Aliases */ --theme-bg: var(--base00); --theme-bg-secondary: var(--base01); --theme-bg-tertiary: var(--base02); --theme-text: var(--base05); --theme-text-secondary: var(--base04); --theme-text-muted: var(--base03); --theme-border: var(--base02); --theme-accent: var(--base0D); --theme-success: var(--base0B); --theme-warning: var(--base0A); --theme-danger: var(--base08);
/* Surface — floating panels on transparent/layered backgrounds */ --theme-surface-border: 1px solid rgba(0, 0, 0, 0.12); --theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
/* Typography - system-ui has 96%+ support (caniuse.com/font-family-system-ui) */ --theme-font-sans: system-ui, sans-serif; --theme-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", monospace;}
/* ========== Dark Mode (system preference) ========== */@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Base16 Grayscale - Dark */ --base00: #1c1c1e; /* Default Background */ --base01: #2c2c2e; /* Lighter Background */ --base02: #3a3a3c; /* Selection Background */ --base03: #636366; /* Comments, Invisibles */ --base04: #98989d; /* Dark Foreground */ --base05: #f5f5f7; /* Default Foreground */ --base06: #ffffff; /* Light Foreground */ --base07: #ffffff; /* Light Background */
/* Base16 Accent Colors - Dark (adjusted for dark bg) */ --base08: #ff453a; /* Red */ --base09: #ff9f0a; /* Orange */ --base0A: #ffd60a; /* Yellow */ --base0B: #30d158; /* Green */ --base0C: #64d2ff; /* Cyan */ --base0D: #0a84ff; /* Blue */ --base0E: #bf5af2; /* Purple */ --base0F: #ac8e68; /* Brown */
--theme-surface-border: 1px solid rgba(255, 255, 255, 0.2); --theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.5); }}
/* ========== Forced Light Mode ========== */[data-theme="light"] { --base00: #ffffff; --base01: #f5f5f5; --base02: #e0e0e0; --base03: #b0b0b0; --base04: #666666; --base05: #333333; --base06: #1a1a1a; --base07: #0f0f0f;
--base08: #d73a49; --base09: #e36209; --base0A: #c08b00; --base0B: #22863a; --base0C: #1b7c83; --base0D: #0066cc; --base0E: #6f42c1; --base0F: #8b4513;
--theme-surface-border: 1px solid rgba(0, 0, 0, 0.12); --theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);}
/* ========== Forced Dark Mode ========== */[data-theme="dark"] { --base00: #1c1c1e; --base01: #2c2c2e; --base02: #3a3a3c; --base03: #636366; --base04: #98989d; --base05: #f5f5f7; --base06: #ffffff; --base07: #ffffff;
--base08: #ff453a; --base09: #ff9f0a; --base0A: #ffd60a; --base0B: #30d158; --base0C: #64d2ff; --base0D: #0a84ff; --base0E: #bf5af2; --base0F: #ac8e68;
--theme-surface-border: 1px solid rgba(255, 255, 255, 0.2); --theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.5);}