diff --git a/public/css/themes/catppuccin_frappe.css b/public/css/themes/catppuccin_frappe.css new file mode 100644 index 0000000..23d951e --- /dev/null +++ b/public/css/themes/catppuccin_frappe.css @@ -0,0 +1,82 @@ +body { + /* Catppuccin Frappe color palette */ + --rosewater: #f2d5cf; + --flamingo: #eebebe; + --pink: #f4b8e4; + --mauve: #ca9ee6; + --red: #e78284; + --maroon: #ea999c; + --peach: #ef9f76; + --yellow: #e5c890; + --green: #a6d189; + --teal: #81c8be; + --sky: #99d1db; + --sapphire: #85c1dc; + --blue: #8caaee; + --lavender: #babbf1; + --text: #c6d0f5; + --subtext1: #b5bfe2; + --subtext0: #a5adce; + --overlay2: #949cbb; + --overlay1: #838ba7; + --overlay0: #737994; + --surface2: #626880; + --surface1: #51576d; + --surface0: #414559; + --base: #303446; + --mantle: #292c3c; + --crust: #232634; + + /* Predefined colors */ + /* --bg_color: var(--mantle); */ + --bg_color: var(--base); + --fg_color: var(--text); + --fg_faded: var(--subtext1); + --fg_dark: var(--accent); + --fg_nav: var(--accent); + + /* --bg_panel: var(--crust); + --bg_elements: var(--base); + --bg_overlays: var(--base); */ + --bg_panel: var(--mantle); + --bg_elements: var(--crust); + --bg_overlays: var(--mantle); + --bg_hover: var(--crust); + + --grey: var(--subtext1); + --dark_grey: var(--overlay0); + --darker_grey: var(--base); + --darkest_grey: var(--mantle); + --border_grey: var(--base); + + --accent: var(--rosewater); + --accent_light: hsl(10, 56%, 96%); /* increase lightness by 5% */ + --accent_dark: hsl(10, 56%, 86%); /* decrease lightness by 5% */ + --accent_border: hsl(10, 56%, 86%); + + --play_button: var(--accent); + --play_button_hover: var(--accent); + + --more_replies_dots: hsl(10, 56%, 86%); + --error_red: var(--red); + + --verified_blue: var(--blue); + --icon_text: var(--text); + + --tab: var(--text); + --tab_selected: var(--accent); + + --profile_stat: var(--text); + + /* Catppuccin tweaks */ + /* background-color: var(--bg_color); + color: var(--fg_color); + line-height: 1.3; + margin: 0; */ + + /* Fix Poll Leader color */ + /* Text is illegible when using light accents otherwise */ + .poll-meter.leader { + color: var(--bg_color); + } +} diff --git a/public/css/themes/catppuccin_latte.css b/public/css/themes/catppuccin_latte.css new file mode 100644 index 0000000..be9101c --- /dev/null +++ b/public/css/themes/catppuccin_latte.css @@ -0,0 +1,82 @@ +body { + /* Catppuccin Latte color palette */ + --rosewater: #dc8a78; + --flamingo: #dd7878; + --pink: #ea76cb; + --mauve: #8839ef; + --red: #d20f39; + --maroon: #e64553; + --peach: #fe640b; + --yellow: #df8e1d; + --green: #40a02b; + --teal: #179299; + --sky: #04a5e5; + --sapphire: #209fb5; + --blue: #1e66f5; + --lavender: #7287fd; + --text: #4c4f69; + --subtext1: #5c5f77; + --subtext0: #6c6f85; + --overlay2: #7c7f93; + --overlay1: #8c8fa1; + --overlay0: #9ca0b0; + --surface2: #acb0be; + --surface1: #bcc0cc; + --surface0: #ccd0da; + --base: #eff1f5; + --mantle: #e6e9ef; + --crust: #dce0e8; + + /* Predefined colors */ + /* --bg_color: var(--mantle); */ + --bg_color: var(--base); + --fg_color: var(--text); + --fg_faded: var(--subtext1); + --fg_dark: var(--accent); + --fg_nav: var(--accent); + + /* --bg_panel: var(--crust); + --bg_elements: var(--base); + --bg_overlays: var(--base); */ + --bg_panel: var(--mantle); + --bg_elements: var(--crust); + --bg_overlays: var(--mantle); + --bg_hover: var(--crust); + + --grey: var(--subtext1); + --dark_grey: var(--overlay0); + --darker_grey: var(--base); + --darkest_grey: var(--mantle); + --border_grey: var(--base); + + --accent: var(--rosewater); + --accent_light: hsl(10, 56%, 96%); /* increase lightness by 5% */ + --accent_dark: hsl(10, 56%, 86%); /* decrease lightness by 5% */ + --accent_border: hsl(10, 56%, 86%); + + --play_button: var(--accent); + --play_button_hover: var(--accent); + + --more_replies_dots: hsl(10, 56%, 86%); + --error_red: var(--red); + + --verified_blue: var(--blue); + --icon_text: var(--text); + + --tab: var(--text); + --tab_selected: var(--accent); + + --profile_stat: var(--text); + + /* Catppuccin tweaks */ + /* background-color: var(--bg_color); + color: var(--fg_color); + line-height: 1.3; + margin: 0; */ + + /* Fix Poll Leader color */ + /* Text is illegible when using light accents otherwise */ + .poll-meter.leader { + color: var(--bg_color); + } +} diff --git a/public/css/themes/catppuccin_macchiato.css b/public/css/themes/catppuccin_macchiato.css new file mode 100644 index 0000000..c1cb1bb --- /dev/null +++ b/public/css/themes/catppuccin_macchiato.css @@ -0,0 +1,82 @@ +body { + /* Catppuccin Macchiato color palette */ + --rosewater: #f4dbd6; + --flamingo: #f0c6c6; + --pink: #f5bde6; + --mauve: #c6a0f6; + --red: #ed8796; + --maroon: #ee99a0; + --peach: #f5a97f; + --yellow: #eed49f; + --green: #a6da95; + --teal: #8bd5ca; + --sky: #91d7e3; + --sapphire: #7dc4e4; + --blue: #8aadf4; + --lavender: #b7bdf8; + --text: #cad3f5; + --subtext1: #b8c0e0; + --subtext0: #a5adcb; + --overlay2: #939ab7; + --overlay1: #8087a2; + --overlay0: #6e738d; + --surface2: #5b6078; + --surface1: #494d64; + --surface0: #363a4f; + --base: #24273a; + --mantle: #1e2030; + --crust: #181926; + + /* Predefined colors */ + /* --bg_color: var(--mantle); */ + --bg_color: var(--base); + --fg_color: var(--text); + --fg_faded: var(--subtext1); + --fg_dark: var(--accent); + --fg_nav: var(--accent); + + /* --bg_panel: var(--crust); + --bg_elements: var(--base); + --bg_overlays: var(--base); */ + --bg_panel: var(--mantle); + --bg_elements: var(--crust); + --bg_overlays: var(--mantle); + --bg_hover: var(--crust); + + --grey: var(--subtext1); + --dark_grey: var(--overlay0); + --darker_grey: var(--base); + --darkest_grey: var(--mantle); + --border_grey: var(--base); + + --accent: var(--rosewater); + --accent_light: hsl(10, 56%, 96%); /* increase lightness by 5% */ + --accent_dark: hsl(10, 56%, 86%); /* decrease lightness by 5% */ + --accent_border: hsl(10, 56%, 86%); + + --play_button: var(--accent); + --play_button_hover: var(--accent); + + --more_replies_dots: hsl(10, 56%, 86%); + --error_red: var(--red); + + --verified_blue: var(--blue); + --icon_text: var(--text); + + --tab: var(--text); + --tab_selected: var(--accent); + + --profile_stat: var(--text); + + /* Catppuccin tweaks */ + /* background-color: var(--bg_color); + color: var(--fg_color); + line-height: 1.3; + margin: 0; */ + + /* Fix Poll Leader color */ + /* Text is illegible when using light accents otherwise */ + .poll-meter.leader { + color: var(--bg_color); + } +} diff --git a/public/css/themes/catppuccin_mocha.css b/public/css/themes/catppuccin_mocha.css new file mode 100644 index 0000000..c2bfa87 --- /dev/null +++ b/public/css/themes/catppuccin_mocha.css @@ -0,0 +1,82 @@ +body { + /* Catppuccin Mocha color palette */ + --rosewater: #f5e0dc; + --flamingo: #f2cdcd; + --pink: #f5c2e7; + --mauve: #cba6f7; + --red: #f38ba8; + --maroon: #eba0ac; + --peach: #fab387; + --yellow: #f9e2af; + --green: #a6e3a1; + --teal: #94e2d5; + --sky: #89dceb; + --sapphire: #74c7ec; + --blue: #89b4fa; + --lavender: #b4befe; + --text: #cdd6f4; + --subtext1: #bac2de; + --subtext0: #a6adc8; + --overlay2: #9399b2; + --overlay1: #7f849c; + --overlay0: #6c7086; + --surface2: #585b70; + --surface1: #45475a; + --surface0: #313244; + --base: #1e1e2e; + --mantle: #181825; + --crust: #11111b; + + /* Predefined colors */ + /* --bg_color: var(--mantle); */ + --bg_color: var(--base); + --fg_color: var(--text); + --fg_faded: var(--subtext1); + --fg_dark: var(--accent); + --fg_nav: var(--accent); + + /* --bg_panel: var(--crust); + --bg_elements: var(--base); + --bg_overlays: var(--base); */ + --bg_panel: var(--mantle); + --bg_elements: var(--crust); + --bg_overlays: var(--mantle); + --bg_hover: var(--crust); + + --grey: var(--subtext1); + --dark_grey: var(--overlay0); + --darker_grey: var(--base); + --darkest_grey: var(--mantle); + --border_grey: var(--base); + + --accent: var(--rosewater); + --accent_light: hsl(10, 56%, 96%); /* increase lightness by 5% */ + --accent_dark: hsl(10, 56%, 86%); /* decrease lightness by 5% */ + --accent_border: hsl(10, 56%, 86%); + + --play_button: var(--accent); + --play_button_hover: var(--accent); + + --more_replies_dots: hsl(10, 56%, 86%); + --error_red: var(--red); + + --verified_blue: var(--blue); + --icon_text: var(--text); + + --tab: var(--text); + --tab_selected: var(--accent); + + --profile_stat: var(--text); + + /* Catppuccin tweaks */ + /* background-color: var(--bg_color); + color: var(--fg_color); + line-height: 1.3; + margin: 0; */ + + /* Fix Poll Leader color */ + /* Text is illegible when using light accents otherwise */ + .poll-meter.leader { + color: var(--bg_color); + } +}