/* Generated by scripts/themes.py from the game client's client/wolf/modules/wolfui/themes.lua. Do not edit: change the client's palette and re-run, so the site and the client cannot drift apart. The first block is the default. Each [data-theme] block overrides it, so the picker only has to set one attribute on and every colour on the page follows - no reload, unlike the game client, where the colours are baked into images and a theme takes effect at the next start. */ :root { --ground: #0a2c35; --surface: #0f3a45; --surface-high: #12454f; --line: #22687a; --line-hover: #2b7c8e; --ink: #e4f1f4; --ink-muted: #a9c9d1; --ink-faint: #5e838d; --ink-faint-text: #8fb5bf; --accent: #19708a; --accent-hover: #22879e; --accent-pressed: #125468; --accent-ink: #ffffff; --accent-soft: #16404c; --good: #2f8f5b; --warn: #b9781f; --bad: #c0453a; --ink-good: #6ecb94; --ink-warn: #e0a94a; --ink-bad: #f7a49d; --ink-accent: #58c4de; --row-hover: #14414d; --button-hover: #17505c; --button-pressed: #0c333d; --scrim: #00131aa8; --link: #58c4de; --link-hover: #19708a; --good-wash: #144748; --warn-wash: #28433f; --bad-wash: #2a3c43; --level-ink: #0d1014; color-scheme: dark; } :root .lv-1 { background: #6fae86; } :root .lv-2 { background: #4c9c6f; } :root .lv-3 { background: #3f9f92; } :root .lv-4 { background: #3f92b4; } :root .lv-5 { background: #5aa0d8; } :root .lv-6 { background: #7f93e0; } :root .lv-7 { background: #a487dc; } :root .lv-8 { background: #c98fc0; } :root .lv-9 { background: #d09a3c; } :root .lv-10 { background: #d9665d; } :root[data-theme="teal"] { --ground: #aed0d9; --surface: #c5dde3; --surface-high: #bad6dd; --line: #7aa8b4; --line-hover: #588e9d; --ink: #0b2b33; --ink-muted: #2f4a50; --ink-faint: #476369; --ink-faint-text: #364f55; --accent: #065465; --accent-hover: #0a6e85; --accent-pressed: #043d4a; --accent-ink: #ffffff; --accent-soft: #8fbcc8; --good: #2f8f5b; --warn: #b9781f; --bad: #c0453a; --ink-good: #175033; --ink-warn: #623d05; --ink-bad: #85261f; --ink-accent: #065465; --row-hover: #97c0cb; --button-hover: #cfe4e9; --button-pressed: #99c2ce; --scrim: #04222aa0; --link: #065465; --link-hover: #065465; --good-wash: #aed1cf; --warn-wash: #c3cec6; --bad-wash: #c4c6ca; --level-ink: #ffffff; color-scheme: light; } :root[data-theme="teal"] .lv-1 { background: #25563c; } :root[data-theme="teal"] .lv-2 { background: #1d5738; } :root[data-theme="teal"] .lv-3 { background: #1d554f; } :root[data-theme="teal"] .lv-4 { background: #23536c; } :root[data-theme="teal"] .lv-5 { background: #16517f; } :root[data-theme="teal"] .lv-6 { background: #374896; } :root[data-theme="teal"] .lv-7 { background: #5e3c8e; } :root[data-theme="teal"] .lv-8 { background: #74376a; } :root[data-theme="teal"] .lv-9 { background: #6b4412; } :root[data-theme="teal"] .lv-10 { background: #88302b; } :root[data-theme="deep"] { --ground: #8bb3c0; --surface: #a3c6d0; --surface-high: #97bdc8; --line: #5b8d9c; --line-hover: #437686; --ink: #04191e; --ink-muted: #132f36; --ink-faint: #2e4a52; --ink-faint-text: #1b343b; --accent: #04414f; --accent-hover: #065465; --accent-pressed: #022c36; --accent-ink: #ffffff; --accent-soft: #6fa0b0; --good: #2f8f5b; --warn: #b9781f; --bad: #c0453a; --ink-good: #0d3520; --ink-warn: #442a04; --ink-bad: #5d1a15; --ink-accent: #033642; --row-hover: #79a8b6; --button-hover: #adccd5; --button-pressed: #7ba7b5; --scrim: #04222ab0; --link: #033642; --link-hover: #04414f; --good-wash: #92bebe; --warn-wash: #a6bab5; --bad-wash: #a7b3b9; --level-ink: #ffffff; color-scheme: light; } :root[data-theme="deep"] .lv-1 { background: #173524; } :root[data-theme="deep"] .lv-2 { background: #113321; } :root[data-theme="deep"] .lv-3 { background: #113330; } :root[data-theme="deep"] .lv-4 { background: #153242; } :root[data-theme="deep"] .lv-5 { background: #0d314c; } :root[data-theme="deep"] .lv-6 { background: #212c5c; } :root[data-theme="deep"] .lv-7 { background: #3a2557; } :root[data-theme="deep"] .lv-8 { background: #472142; } :root[data-theme="deep"] .lv-9 { background: #41290b; } :root[data-theme="deep"] .lv-10 { background: #521d1a; } :root[data-theme="dusk"] { --ground: #0a2c35; --surface: #0f3a45; --surface-high: #12454f; --line: #22687a; --line-hover: #2b7c8e; --ink: #e4f1f4; --ink-muted: #a9c9d1; --ink-faint: #5e838d; --ink-faint-text: #8fb5bf; --accent: #19708a; --accent-hover: #22879e; --accent-pressed: #125468; --accent-ink: #ffffff; --accent-soft: #16404c; --good: #2f8f5b; --warn: #b9781f; --bad: #c0453a; --ink-good: #6ecb94; --ink-warn: #e0a94a; --ink-bad: #f7a49d; --ink-accent: #58c4de; --row-hover: #14414d; --button-hover: #17505c; --button-pressed: #0c333d; --scrim: #00131aa8; --link: #58c4de; --link-hover: #19708a; --good-wash: #144748; --warn-wash: #28433f; --bad-wash: #2a3c43; --level-ink: #0d1014; color-scheme: dark; } :root[data-theme="dusk"] .lv-1 { background: #6fae86; } :root[data-theme="dusk"] .lv-2 { background: #4c9c6f; } :root[data-theme="dusk"] .lv-3 { background: #3f9f92; } :root[data-theme="dusk"] .lv-4 { background: #3f92b4; } :root[data-theme="dusk"] .lv-5 { background: #5aa0d8; } :root[data-theme="dusk"] .lv-6 { background: #7f93e0; } :root[data-theme="dusk"] .lv-7 { background: #a487dc; } :root[data-theme="dusk"] .lv-8 { background: #c98fc0; } :root[data-theme="dusk"] .lv-9 { background: #d09a3c; } :root[data-theme="dusk"] .lv-10 { background: #d9665d; } :root[data-theme="night"] { --ground: #12151a; --surface: #191d24; --surface-high: #212630; --line: #3d4756; --line-hover: #5b6a7e; --ink: #e8ebef; --ink-muted: #9aa4b1; --ink-faint: #5d6673; --ink-faint-text: #8a94a2; --accent: #3f6fd8; --accent-hover: #5480e0; --accent-pressed: #3259b4; --accent-ink: #ffffff; --accent-soft: #232c42; --good: #2f8f5b; --warn: #b9781f; --bad: #c0453a; --ink-good: #6fbd8c; --ink-warn: #d9a44a; --ink-bad: #e8867c; --ink-accent: #6f96e8; --row-hover: #1e2430; --button-hover: #232936; --button-pressed: #161a21; --scrim: #000000c0; --link: #6f96e8; --link-hover: #3f6fd8; --good-wash: #1c2e2c; --warn-wash: #312b23; --bad-wash: #322327; --level-ink: #0d1014; color-scheme: dark; } :root[data-theme="night"] .lv-1 { background: #6fae86; } :root[data-theme="night"] .lv-2 { background: #4c9c6f; } :root[data-theme="night"] .lv-3 { background: #3f9f92; } :root[data-theme="night"] .lv-4 { background: #3f92b4; } :root[data-theme="night"] .lv-5 { background: #5aa0d8; } :root[data-theme="night"] .lv-6 { background: #7f93e0; } :root[data-theme="night"] .lv-7 { background: #a487dc; } :root[data-theme="night"] .lv-8 { background: #c98fc0; } :root[data-theme="night"] .lv-9 { background: #d09a3c; } :root[data-theme="night"] .lv-10 { background: #d9665d; } /* What the picker offers, in order: teal (Teal), deep (Deep teal), dusk (Dusk teal), night (Night) */