/* * themes.css — premade profile themes. * * Each theme overrides the core CSS variables defined in styles.css. The * default site theme is "aurora" (pink on dark) and intentionally has no * override block here — we just rely on the styles.css defaults. The other * eight themes are applied per-profile by setting `data-profile-theme="X"` * on from profile.js. * * Themes only affect pages that opt in by including this stylesheet and * setting the attribute (currently the public profile page and the profile * editor's live preview). The rest of the site stays on aurora. * * --glow-rgb is a numeric "R, G, B" triple matching --pink-bright. It is * used in rgba(var(--glow-rgb), 0.X) for shadows/halos so those re-tint * with the theme instead of leaking the default pink. * * peach and sakura are the two light themes. The rest are dark. */ body[data-profile-theme="ocean"], html[data-profile-theme="ocean"] { --bg: #061a26; --bg-elev: #0b2433; --bg-elev-2: #0f2e42; --bg-deep: #04111a; --border: #1a3a52; --border-pink: #1f4d70; --text: #d8eef7; --text-dim: #6d96b0; --pink: #5fbfd9; --pink-bright: #34d7ec; --pink-deep: #1b8aa8; --pink-soft: #a9e4f0; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.10); --glow-rgb: 52, 215, 236; --pink-rgb: 95, 191, 217; --pink-soft-rgb: 169, 228, 240; --danger-rgb: 255, 107, 107; } body[data-profile-theme="mountain"], html[data-profile-theme="mountain"] { --bg: #161818; --bg-elev: #1f2122; --bg-elev-2: #2a2d2f; --bg-deep: #0e1010; --border: #34383a; --border-pink: #4a4f52; --text: #e8e9eb; --text-dim: #909598; --pink: #b0b3b6; --pink-bright: #d8dadc; --pink-deep: #7e8285; --pink-soft: #c8cbce; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.08); --glow-rgb: 216, 218, 220; --pink-rgb: 176, 179, 182; --pink-soft-rgb: 200, 203, 206; --danger-rgb: 255, 107, 107; } body[data-profile-theme="sunset"], html[data-profile-theme="sunset"] { --bg: #1a0a05; --bg-elev: #2a1208; --bg-elev-2: #341a0d; --bg-deep: #0e0503; --border: #4a2010; --border-pink: #6a2a15; --text: #ffe4cc; --text-dim: #b5876b; --pink: #ff8a4c; --pink-bright: #ff5c2e; --pink-deep: #c8350f; --pink-soft: #ffb88e; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.12); --glow-rgb: 255, 92, 46; --pink-rgb: 255, 138, 76; --pink-soft-rgb: 255, 184, 142; --danger-rgb: 255, 107, 107; } body[data-profile-theme="forest"], html[data-profile-theme="forest"] { --bg: #0a1410; --bg-elev: #0f1f18; --bg-elev-2: #14291f; --bg-deep: #060c09; --border: #1f3a2c; --border-pink: #2c5240; --text: #d5ecdf; --text-dim: #7a9a87; --pink: #5dbb84; --pink-bright: #34d77a; --pink-deep: #1f8a4d; --pink-soft: #9eddb6; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.10); --glow-rgb: 52, 215, 122; --pink-rgb: 93, 187, 132; --pink-soft-rgb: 158, 221, 182; --danger-rgb: 255, 107, 107; } body[data-profile-theme="midnight"], html[data-profile-theme="midnight"] { --bg: #0a0a18; --bg-elev: #11112a; --bg-elev-2: #181838; --bg-deep: #050510; --border: #2a2a5a; --border-pink: #3a3a78; --text: #d8d5f0; --text-dim: #7a78a8; --pink: #8a78ff; --pink-bright: #a78fff; --pink-deep: #5d4cd9; --pink-soft: #b8a8ff; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.12); --glow-rgb: 167, 143, 255; --pink-rgb: 138, 120, 255; --pink-soft-rgb: 184, 168, 255; --danger-rgb: 255, 107, 107; } /* * peach is the warm light theme in the set. Because the site is dark by * default, this override flips the bg/text relationship; the scanline * overlay in styles.css (body::before) keeps a soft texture without * looking too aggressive on a light field. */ body[data-profile-theme="peach"], html[data-profile-theme="peach"] { --bg: #faf2ec; --bg-elev: #fff9f3; --bg-elev-2: #fceee2; --bg-deep: #f0e4d8; --border: #e8c8b0; --border-pink: #e0a890; --text: #5a3a2d; --text-dim: #a07868; --pink: #e77a5f; --pink-bright: #d65a3d; --pink-deep: #a83820; --pink-soft: #c8553a; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.15); --glow-rgb: 231, 122, 95; --pink-rgb: 231, 122, 95; --pink-soft-rgb: 200, 85, 58; --danger-rgb: 255, 107, 107; } body[data-profile-theme="vapor"], html[data-profile-theme="vapor"] { --bg: #1a0a2e; --bg-elev: #2a1248; --bg-elev-2: #38186b; --bg-deep: #100525; --border: #4a2880; --border-pink: #6a3aa8; --text: #f0d8ff; --text-dim: #b08fd0; --pink: #ff6ec7; --pink-bright: #00f0ff; --pink-deep: #c029a8; --pink-soft: #ffaee8; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.15); --glow-rgb: 0, 240, 255; --pink-rgb: 255, 110, 199; --pink-soft-rgb: 255, 174, 232; --danger-rgb: 255, 107, 107; } /* * sakura — the cool light theme. Cherry-blossom pink page, deep wine * body text. Pairs with the .sticker.themed variant in profile.css to * make theme-matched messages pop pink instead of using the rainbow. */ body[data-profile-theme="sakura"], html[data-profile-theme="sakura"] { --bg: #fdf2f7; --bg-elev: #fce8f0; --bg-elev-2: #f8d7e3; --bg-deep: #f7e2ea; --border: #f5c8d8; --border-pink: #ef9fbf; --text: #5a1f3a; --text-dim: #a06585; --pink: #e85a8e; --pink-bright: #d63d77; --pink-deep: #a8235c; --pink-soft: #c84279; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.16); --glow-rgb: 214, 61, 119; --pink-rgb: 232, 90, 142; --pink-soft-rgb: 200, 66, 121; --danger-rgb: 255, 107, 107; } /* * miku — Hatsune Miku. Teal-aquamarine with deep backgrounds. */ body[data-profile-theme="miku"], html[data-profile-theme="miku"] { --bg: #0a1a1a; --bg-elev: #0f2424; --bg-elev-2: #142e2e; --bg-deep: #071212; --border: #1a3d3d; --border-pink: #1f5252; --text: #d8f0f0; --text-dim: #6da0a0; --pink: #39d9d9; --pink-bright: #26e6e6; --pink-deep: #0f9999; --pink-soft: #8adede; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.16); --glow-rgb: 26, 217, 217; --pink-rgb: 57, 217, 217; --pink-soft-rgb: 138, 222, 222; --danger-rgb: 136, 192, 208; --good: #7be8a3; } /* * cosy — light mode pastel lavender. */ body[data-profile-theme="cosy"], html[data-profile-theme="cosy"] { --bg: #faf0ff; --bg-elev: #f5e8fa; --bg-elev-2: #eddff2; --bg-deep: #f7edfc; --border: #e0cce8; --border-pink: #d4b8e0; --text: #2a1a33; --text-dim: #8c6b9e; --pink: #b388d9; --pink-bright: #9b6fc4; --pink-deep: #7a4fa8; --pink-soft: #d4b8f0; --shadow: 0 0 28px rgba(var(--glow-rgb), 0.10); --glow-rgb: 155, 111, 196; --pink-rgb: 179, 136, 217; --pink-soft-rgb: 212, 184, 240; --danger-rgb: 200, 100, 120; --good: #7be8a3; }