Last active 1740583978

Kagi Catppuccin Latte/Mocha Theme

kagi-catppuccin-mocha.css Raw
1/* Catppuccin Theme for Kagi - With Theme Class Support */
2
3/* Core variables - Dark theme (Mocha) is default */
4:root, .theme_moon_dark {
5 /* Catppuccin Mocha colors */
6 --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7;
7 --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af;
8 --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec;
9 --blue: #89b4fa; --lavender: #b4befe; --text: #cdd6f4; --subtext1: #bac2de;
10 --subtext0: #a6adc8; --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086;
11 --surface2: #585b70; --surface1: #45475a; --surface0: #313244; --base: #1e1e2e;
12 --mantle: #181825; --crust: #11111b;
13
14 /* Set dark mode scheme and core UI variables */
15 --color-scheme: dark;
16 --app-bg: var(--base); --app-text: var(--text); --header-bg: var(--app-bg);
17 --app-frame-bg: var(--app-bg); --landing-bg: var(--app-bg);
18 --app-bg-opac: rgba(30, 30, 46, 0); --bottom-bar-bg: var(--yellow);
19 --white: var(--text);
20
21 /* Derived color mappings */
22 --graphite: var(--base); --graphite-25: var(--overlay2); --graphite-50: var(--flamingo);
23 --graphite-70: var(--pink); --graphite-100: var(--mauve); --graphite-200: var(--red);
24 --graphite-300: var(--maroon); --graphite-400: var(--peach); --graphite-500: var(--yellow);
25 --graphite-600: var(--green); --graphite-700: var(--teal); --graphite-800: var(--sky);
26 --graphite-850: var(--sapphire); --graphite-900: var(--blue); --graphite-950: var(--lavender);
27 --graphite-1000: var(--text);
28
29 /* Chrome palette */
30 --chrome-25: var(--rosewater); --chrome-50: var(--flamingo); --chrome-70: var(--pink);
31 --chrome-100: var(--mauve); --chrome-200: var(--red); --chrome-300: var(--maroon);
32 --chrome-400: var(--peach); --chrome-500: var(--yellow); --chrome-600: var(--green);
33 --chrome-700: var(--teal); --chrome-800: var(--sky); --chrome-850: var(--sapphire);
34 --chrome-900: var(--blue); --chrome-950: var(--lavender); --chrome-1000: var(--text);
35
36 /* Purple palette */
37 --purple-300: var(--lavender); --purple-400: var(--blue); --purple-500: var(--sapphire);
38 --purple-600: var(--sky); --purple-800: var(--teal); --purple-900: var(--green);
39
40 /* Primary palette (mirrors graphite) */
41 --primary: var(--text); --primary-25: var(--overlay2); --primary-50: var(--flamingo);
42 --primary-70: var(--pink); --primary-100: var(--mauve); --primary-200: var(--red);
43 --primary-300: var(--maroon); --primary-400: var(--peach); --primary-500: var(--yellow);
44 --primary-600: var(--green); --primary-700: var(--teal); --primary-800: var(--sky);
45 --primary-850: var(--sapphire); --primary-900: var(--blue); --primary-950: var(--lavender);
46 --primary-1000: var(--text); --primary-g: var(--text); --primary-g-2: var(--red);
47 --primary-g-6: var(--green); --primary-g-8: var(--sky); --primary-300-solid: var(--maroon);
48
49 /* Functional colors */
50 --warning: var(--peach); --info: var(--sky); --danger: var(--red); --success: var(--green);
51 --calm: var(--surface0); --link: var(--purple-600); --primary-hover: var(--purple-600);
52 --primary-hover-hover: var(--purple-500); --primary-visited: var(--teal);
53
54 /* UI Elements */
55 --kagi-highlight: var(--yellow); --beta-tag-bg: var(--yellow); --beta-tag-text: var(--base);
56 --beta-tag-inside-corners: var(--maroon); --kagi-light-cream: var(--rosewater);
57 --kagi-accent: var(--surface1); --kagi-sky: var(--sky); --kagi-sky-b: var(--sapphire);
58 --kagi-sky-i: var(--sky); --kagi-orange: var(--maroon);
59 --resultsummary-highlight: var(--surface2); --resultsummary-highlight_text: var(--text);
60 --kagi-graphite: var(--text); --kagi-graphite-s: var(--overlay2);
61 --kagi-graphite-text: var(--base); --kagi-graphite-ia: var(--text);
62 --kagi-graphite-ia-color: var(--base);
63
64 /* Shadows */
65 --inner-shadow: rgba(0, 0, 0, .05); --settings-app-inner-bg: var(--app-bg);
66 --box-shadow: rgba(0, 0, 0, .09); --box-shadow-15: rgba(0, 0, 0, .15);
67 --ranked-box-shadow: rgba(0, 0, 0, .25);
68
69 /* Inputs and buttons */
70 --color-search-input-border: var(--mauve); --color-search-input: var(--base);
71 --color-search-input-opac: var(--app-bg-opac); --color-danger: var(--red);
72 --input-bg: var(--app-bg); --btn-primary-bg: var(--text); --btn-primary-text: var(--base);
73 --btn-primary-color: var(--base); --btn-group-bg: var(--base);
74
75 /* Navigation */
76 --nav_n_se_line: var(--yellow); --nav_n_im_line: var(--blue); --nav_n_vi_line: var(--red);
77 --nav_n_ne_line: var(--mauve); --nav_n_ma_line: var(--green);
78
79 /* Sidebar */
80 --secondary: var(--base); --app-sidebar-item-border: rgba(255, 255, 255, .2);
81 --app-sidebar-link: rgba(255, 255, 255, .6); --app-sidebar-nav-item-bg_hover: var(--yellow);
82 --app-sidebar-nav-item-icon_hover: var(--base);
83
84 /* Search results */
85 --result-item-title-border: var(--peach); --result-item-title-border_hover: var(--primary-hover);
86 --result-item-title-visited-border: var(--pink); --result-rank-icon-stroke_promoted: var(--text);
87 --result-item-highlight: var(--sky); --search-result-content-text: var(--text);
88 --search-result-url-link: var(--green); --search-result-title: var(--text);
89 --search-result-title-hover: var(--primary-hover); --search-result-date-bg: var(--surface0);
90 --search-result-date-new-bg: var(--base); --search-result-date-new: var(--sky);
91
92 /* Domain ratings */
93 --domain-rank-icon-color-ban: var(--red); --domain-rank-icon-color-lower: var(--red);
94 --domain-rank-icon-color-normal: var(--red); --domain-rank-icon-color-higher: var(--red);
95 --domain-rank-icon-color-boosted: var(--red); --domain-rank-icon-color-trackers: var(--peach);
96 --domain-rank-icon-color-trackers-hover: var(--maroon); --domain-rank-icon-color-scam: var(--peach);
97 --domain-rank-icon-color-scam-hover: var(--maroon); --ranked-box-connection-secure: var(--green);
98 --ranked-box-connection-insecure: var(--red); --ranked-box-tracker-desc-danger: var(--red);
99 --ranked-box-tracker-desc-clear: var(--green);
100
101 /* Inline content */
102 --inline-header-title: var(--text); --inline-widget-bg: var(--surface0);
103 --inline-widget-hover-bg: var(--surface1); --inline-header-border: var(--red);
104 --inline-domain-tag-bg: var(--pink); --related-item-bg: var(--surface0);
105 --related-item-hover-bg: var(--surface1); --video-item-bg: var(--surface0);
106 --auto-sugg-bg_hover: var(--surface0);
107
108 /* Provider breakdown */
109 --provider-breakdown_server: var(--sky); --provider-breakdown_client: var(--peach);
110 --provider-breakdown_speed1: var(--yellow); --provider-breakdown_speed2: var(--red);
111 --provider-breakdown_speed3: var(--red); --widget-progress_bar: var(--text);
112 --translate-fc_icon: var(--text); --rating-star_background: var(--surface1);
113 --wiki-content-links: var(--text); --m_sri_gap_color: var(--surface1);
114
115 /* AI chat */
116 --ai_chat_buble_a_bg: var(--kagi-accent); --ai_chat_buble_q_bg: var(--app-bg);
117 --ai_chat_buble_dd_q_bg: var(--kagi-accent); --ai_chat_buble_dd_a_bg: var(--surface1);
118 --ai_chat_buble_a_text: var(--app-text); --ai_chat_buble_q_text: var(--app-text);
119 --ai_chat_input_text: var(--app-text); --ai_chat_input_button: var(--teal);
120
121 /* Misc UI elements */
122 --doggo-color-1: var(--text); --doggo-bg-color: var(--app-bg); --doggo-stroke-color: var(--maroon);
123 --landing-page-clouds-opacity: 1; --quick-search-bg: var(--text); --quick-search-icon: var(--base);
124 --app-logo: var(--text); --app-logo-bg: var(--yellow); --filters-clear-btn-icon: var(--maroon);
125 --filter-dd-bg: var(--surface2); --k-tooltip-bg: rgba(30, 30, 46, .9);
126 --k-tooltip-text: var(--text); --dd-hover-bg: var(--mauve); --dd-hover-color: var(--text);
127 --dd-list-input-bg: var(--input-bg); --not-found-bubble-bg: var(--surface1);
128 --site_info_bg: var(--app-bg); --site_info_bottom_bg: var(--kagi-accent);
129
130 /* Code syntax highlighting */
131 --code-bg: var(--base); --code-border: var(--overlay0); --code-k: var(--mauve);
132 --code-s: var(--green); --code-cm-c1: var(--maroon); --code-n: var(--mauve);
133 --code-p: var(--text); --background-color-sky: var(--sky);
134
135 /* Form elements */
136 --checkbox-bg: var(--yellow); --checkbox-check: var(--base); --as-dd-border: var(--app-bg);
137 --dd-list-input-bg: var(--base); --icon-purple: var(--sky);
138
139 /* Onboarding elements */
140 --onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none;
141 --onb_theme_light_preview_box: none; --onb_theme_calm_blue_preview_box: none;
142 --onb_theme_royal_blue_preview_box: none; --onb_theme_moon_dark_preview_box: flex;
143 --image_brightness: 100%;
144}
145
146/* Light theme overrides - using Kagi's .theme_light class */
147.theme_light {
148 /* Catppuccin Latte colors */
149 --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef;
150 --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d;
151 --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5;
152 --blue: #1e66f5; --lavender: #7287fd; --text: #4c4f69; --subtext1: #5c5f77;
153 --subtext0: #6c6f85; --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0;
154 --surface2: #acb0be; --surface1: #bcc0cc; --surface0: #ccd0da; --base: #eff1f5;
155 --mantle: #e6e9ef; --crust: #dce0e8;
156
157 /* Light mode adjustments */
158 --color-scheme: light; --app-bg: var(--base); --app-text: var(--text);
159 --header-bg: var(--crust); --inline-widget-bg: var(--surface0);
160 --inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--mauve);
161 --btn-primary-text: var(--crust); --checkbox-bg: var(--mauve); --checkbox-check: var(--crust);
162 --onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex;
163 --onb_theme_light_preview_box: flex; --onb_theme_moon_dark_preview_box: none;
164 --k-tooltip-bg: rgba(220, 224, 232, 0.9); --k-tooltip-text: var(--text);
165}
166
167/* System preference override - only applies when no theme class is set */
168@media (prefers-color-scheme: light) {
169 :root:not(.theme_moon_dark):not(.theme_light):not(.theme_calm_blue):not(.theme_royal_blue) {
170 /* Catppuccin Latte colors */
171 --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef;
172 --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d;
173 --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5;
174 --blue: #1e66f5; --lavender: #7287fd; --text: #4c4f69; --subtext1: #5c5f77;
175 --subtext0: #6c6f85; --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0;
176 --surface2: #acb0be; --surface1: #bcc0cc; --surface0: #ccd0da; --base: #eff1f5;
177 --mantle: #e6e9ef; --crust: #dce0e8;
178
179 /* Light mode adjustments */
180 --color-scheme: light; --app-bg: var(--base); --app-text: var(--text);
181 --header-bg: var(--crust); --inline-widget-bg: var(--surface0);
182 --inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--mauve);
183 --btn-primary-text: var(--crust); --checkbox-bg: var(--mauve); --checkbox-check: var(--crust);
184 --onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex;
185 --onb_theme_light_preview_box: flex; --onb_theme_moon_dark_preview_box: none;
186 --k-tooltip-bg: rgba(220, 224, 232, 0.9); --k-tooltip-text: var(--text);
187 }
188}
189
190/* Base styles */
191body { font-family: Poppins, sans-serif !important; }
192
193/* Dropdowns */
194.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover { background-color: var(--surface2) !important; }
195.dropdown .dd-list ._0_list_items li:hover { color: var(--overlay0) !important; }
196.sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover { color: var(--overlay0) !important; }
197.k_ui_dropdown_data_list .list_items > div:hover { background-color: unset !important; color: unset !important; outline: none; text-decoration: none; }
198
199/* Domain badges & tags */
200span.domain, #chat_box .chat_bubble .sources .domain {
201 background-color: var(--surface0) !important; color: var(--text) !important;
202 padding: 2px 4px !important; border-radius: 3px !important;
203}
204span.__domain-name, .widget-simple .__domain-name, .bg-p-50 { background-color: var(--surface0) !important; }
205
206/* Toggle switches */
207.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar { background: var(--primary-g-6); }
208.k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar { --border-color: var(--primary-g-6); }
209
210/* Tooltips and focus states */
211.k-tooltip { background-color: var(--primary-100); }
212:focus-visible { border-radius: 5px; outline: 2px solid var(--peach); }
213
214/* Sidebar */
215div.sidebar-box { background-color: var(--mantle) !important; }
216.thread-list > li:is(.active, :hover, :focus-within) { background-color: var(--surface1) !important; }
217#thread-sidebar-collapse:hover { color: var(--crust); }
218
219/* Header & Navigation */
220header { background: var(--crust) !important; }
221header .header-btn:hover { color: var(--crust); }
222
223.landing-category-select .landing_cat_buttons > button.--active {
224 align-items: center; border: 1px solid var(--primary-400); border-radius: 999px;
225 color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px;
226 padding: 8px 16px; background-color: var(--surface0); font-weight: 700;
227}
228
229.landing-category-select .landing_cat_buttons > button {
230 border-bottom: 2px solid transparent; color: var(--primary);
231 font-size: .875rem; height: 47px; margin: 0; min-width: unset !important;
232 padding: 0 8px; position: relative;
233}
234
235/* Navigation button highlights */
236.landing-category-select .landing_cat_buttons > button.n_se.--active,
237.landing-category-select .landing_cat_buttons > button.n_se:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; }
238.landing-category-select .landing_cat_buttons > button.n_im.--active,
239.landing-category-select .landing_cat_buttons > button.n_im:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; }
240.landing-category-select .landing_cat_buttons > button.n_vi.--active,
241.landing-category-select .landing_cat_buttons > button.n_vi:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; }
242.landing-category-select .landing_cat_buttons > button.n_ne.--active,
243.landing-category-select .landing_cat_buttons > button.n_ne:hover { border-bottom: 2px solid var(--nav_n_ne_line) !important; }
244.landing-category-select .landing_cat_buttons > button.n_ma.--active,
245.landing-category-select .landing_cat_buttons > button.n_ma:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; }
246
247.landing_cat_buttons {
248 border-bottom: 1px solid var(--primary-200); display: flex;
249 justify-content: space-between; width: 100%; padding-bottom: 10px;
250}
251
252#adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 65px; }
253
254/* Prompt & Chat styles */
255.prompt-options button:hover, .prompt-options label:hover,
256.promptOptionsSelector .custom-assistants li.option:hover,
257.promptOptionsSelector .default-assistants li.option.focus,
258.promptOptionsSelector .default-assistants li.option:hover,
259.promptOptionsSelector .custom-assistants span a:hover,
260.promptOptionsSelector .custom-assistants li.option.focus,
261.prompt-options label:hover, .prompt-options button:hover { background-color: unset !important; }
262
263.promptOptionsSelector .custom-assistants li.option,
264.promptOptionsSelector .default-assistants li.option { color: var(--text); }
265
266/* Chat box styling */
267#chat_box > div:nth-child(1), [aria-label="You said:"] {
268 background-color: var(--surface0) !important; padding: 20px !important;
269 border: 2px solid var(--overlay0) !important; border-radius: 25px !important;
270}
271
272.chat_bubble {
273 padding-block: 32px; position: relative; border: 2px solid var(--overlay0);
274 border-radius: 25px; margin-top: 25px; padding: 20px; background-color: var(--crust);
275}
276
277.chat_bubble:focus-within:before, .chat_bubble:hover:before { background-color: unset !important; }
278.chat_bubble .actions { display: inline-flex !important; gap: 8px !important; flex-direction: row !important; }
279#chat_box .chat_bubble .actions [data-action]:is(a,button):hover { background: var(--surface1); }
280
281#chat_box .chat_bubble .content sup {
282 background-color: var(--surface1); color: var(--text);
283}
284#chat_box .chat_bubble .content sup:hover { background-color: var(--surface2); }
285
286.message-info li .value {
287 background-color: var(--surface0); color: var(--text);
288 padding: 2px 5px; border-radius: 4px;
289}
290
291#prompt-box { border-top: 2px solid var(--peach); }
292#dictation-button:hover { color: var(--crust); }
293
294/* Form elements */
295input[type="date"] { color: var(--primary-600) !important; }
296._0_filters-clear-btn { color: var(--crust) !important; }
297._0_filters-clear-btn i svg { color: var(--base) !important; }
298._0_copied_tooltip { left: -45px; }
299
300/* Upload items */
301#uploadedItems .item .type, #uploadedItems .item .icon, #uploadedItems .item .name { color: var(--crust); }
302#form .uploadLabel:hover { color: var(--crust); }
303.POI-item-back .text { color: var(--crust); }
304#popover-privacy > p:nth-child(3) > span > i { color: var(--crust) !important; }
305
306/* Search results */
307.search-result, .sri-group { border-bottom: unset !important; }
308.inline-content+.search-result, .inline-content+.sri-group { border-top: unset !important; }
309.s-f-w.--active .search_area { padding: 10px !important; }
310
311.main-center-box>* {
312 margin-inline: auto; max-width: 850px;
313 padding-inline: 16px; width: 100%;
314}
315
316/* Optional: disable underline on title links */
317.__sri-title .__sri_title_link { border-bottom: none; }
318
319/* Mobile styles */
320@media all and (max-device-width: 766px) {
321 .bg-p-50 { background-color: var(--surface0); }
322
323 .landing-category-select .landing_cat_buttons > button.--active {
324 align-items: center; border: 1px solid var(--primary-400); border-radius: 999px;
325 color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px;
326 padding: 8px 16px; background-color: var(--surface0); font-weight: 700;
327 }
328
329 .landing-category-select .landing_cat_buttons > button {
330 border: none; color: var(--primary); font-size: .875rem; height: 47px;
331 margin: 0; min-width: unset !important; padding: 0 8px; position: relative;
332 }
333
334 /* Navigation styles for mobile */
335 .landing_cat_buttons {
336 border-bottom: none !important; display: flex;
337 justify-content: space-between; width: 100%;
338 }
339
340 #adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 85px; }
341}