diff --git a/assets/static/css/theme.css b/assets/static/css/theme.css index 2c32bed..b9ff6b1 100644 --- a/assets/static/css/theme.css +++ b/assets/static/css/theme.css @@ -1,11 +1,12 @@ /* ============================================================ - * Gruvbox terminal theme + * Terminal theme * ------------------------------------------------------------ * Project-owned styling. The vendored `app.css` (a pre-compiled * Tailwind + DaisyUI bundle) is NOT edited. This file loads * after it (see base.html / admin/base.html) and provides: * - * 1. the Gruvbox palette for DaisyUI's `dark` theme + * 1. Catppuccin Latte for DaisyUI's `light` theme + * and Gruvbox for DaisyUI's `dark` theme * 2. square corners (terminals have none) * 3. a terminal look & feel: monospace, window chrome, * vim-style statusline, CRT scanlines @@ -17,12 +18,41 @@ * (card/btn/badge/menu/...) do exist and are reused; everything * else is defined here as real, themeable CSS. * - * Palette: https://github.com/morhetz/gruvbox (dark, bright) + * Palettes: + * - https://github.com/catppuccin/catppuccin (Latte) + * - https://github.com/morhetz/gruvbox (dark, bright) * DaisyUI color vars are OKLch "L% C H" triplets; this file can * therefore tint anything with `oklch(var(--x) / )`. * ============================================================ */ -/* === 1. Gruvbox dark palette ================================ */ +/* === 1. Theme palettes ====================================== */ +/* Catppuccin Latte. */ +[data-theme="light"] { + --b1: 95.78% 0.006 264.5; /* #eff1f5 base */ + --b2: 93.35% 0.009 264.5; /* #e6e9ef mantle */ + --b3: 90.60% 0.012 264.5; /* #dce0e8 crust */ + --bc: 43.55% 0.043 279.3; /* #4c4f69 text */ + + --n: 80.83% 0.017 271.2; /* #bcc0cc surface1 */ + --nc: 43.55% 0.043 279.3; /* #4c4f69 text */ + + --p: 55.86% 0.226 262.1; /* #1e66f5 blue primary */ + --pc: 95.78% 0.006 264.5; /* #eff1f5 text on primary */ + --s: 55.47% 0.250 297.0; /* #8839ef mauve secondary */ + --sc: 95.78% 0.006 264.5; /* #eff1f5 text on secondary */ + --a: 60.23% 0.098 201.1; /* #179299 teal accent */ + --ac: 95.78% 0.006 264.5; /* #eff1f5 text on accent */ + + --in: 68.20% 0.145 235.4; /* #04a5e5 sky info */ + --su: 62.50% 0.177 140.4; /* #40a02b green success */ + --wa: 71.40% 0.149 67.8; /* #df8e1d yellow warning */ + --er: 55.05% 0.216 19.8; /* #d20f39 red error */ + --inc: 43.55% 0.043 279.3; /* #4c4f69 text on status */ + --suc: 95.78% 0.006 264.5; + --wac: 95.78% 0.006 264.5; + --erc: 95.78% 0.006 264.5; +} + /* Source hex noted per line. To retune: change hex, reconvert * to OKLch, update the value. */ [data-theme="dark"] { @@ -72,7 +102,16 @@ body { line-height: 1.6; } -/* Gruvbox text selection + scrollbars (dark only) */ +/* Text selection + scrollbars */ +[data-theme="light"] ::selection { background: #acb0be; color: #4c4f69; } +[data-theme="light"] { scrollbar-color: #bcc0cc #eff1f5; } +[data-theme="light"] ::-webkit-scrollbar { width: 12px; height: 12px; } +[data-theme="light"] ::-webkit-scrollbar-track { background: #eff1f5; } +[data-theme="light"] ::-webkit-scrollbar-thumb { + background: #bcc0cc; border: 3px solid #eff1f5; +} +[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #acb0be; } + [data-theme="dark"] ::selection { background: #fe8019; color: #282828; } [data-theme="dark"] { scrollbar-color: #504945 #282828; } [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } diff --git a/assets/views/admin/base.html b/assets/views/admin/base.html index ced9129..35d05c7 100644 --- a/assets/views/admin/base.html +++ b/assets/views/admin/base.html @@ -117,33 +117,31 @@ - + +
  • :set theme
    • +
    • +
    • +
    • + + diff --git a/assets/views/base.html b/assets/views/base.html index 08cfa95..020d065 100644 --- a/assets/views/base.html +++ b/assets/views/base.html @@ -313,33 +313,31 @@ -
      -
    • {{ t(key="settings-language", lang=lang | default(value='sk')) }}
      • -
    • -
      - -
      -
      • -
    • -
      -
      • +
    • + - -
      • -
    • {{ t(key="settings-theme", lang=lang | default(value='sk')) }}
      • -
      • -
      • -
      • -
    + +
  • {{ t(key="settings-theme", lang=lang | default(value='sk')) }}
    • +
    • +
    • +
    • + +