kagi-catppuccin-mocha.css
· 18 KiB · CSS
Raw
/* Catppuccin Theme for Kagi - With Theme Class Support */
/* Core variables - Dark theme (Mocha) is default */
:root, .theme_moon_dark {
/* Catppuccin Mocha colors */
--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;
/* Set dark mode scheme and core UI variables */
--color-scheme: dark;
--app-bg: var(--base); --app-text: var(--text); --header-bg: var(--app-bg);
--app-frame-bg: var(--app-bg); --landing-bg: var(--app-bg);
--app-bg-opac: rgba(30, 30, 46, 0); --bottom-bar-bg: var(--yellow);
--white: var(--text);
/* Derived color mappings */
--graphite: var(--base); --graphite-25: var(--overlay2); --graphite-50: var(--flamingo);
--graphite-70: var(--pink); --graphite-100: var(--mauve); --graphite-200: var(--red);
--graphite-300: var(--maroon); --graphite-400: var(--peach); --graphite-500: var(--yellow);
--graphite-600: var(--green); --graphite-700: var(--teal); --graphite-800: var(--sky);
--graphite-850: var(--sapphire); --graphite-900: var(--blue); --graphite-950: var(--lavender);
--graphite-1000: var(--text);
/* Chrome palette */
--chrome-25: var(--rosewater); --chrome-50: var(--flamingo); --chrome-70: var(--pink);
--chrome-100: var(--mauve); --chrome-200: var(--red); --chrome-300: var(--maroon);
--chrome-400: var(--peach); --chrome-500: var(--yellow); --chrome-600: var(--green);
--chrome-700: var(--teal); --chrome-800: var(--sky); --chrome-850: var(--sapphire);
--chrome-900: var(--blue); --chrome-950: var(--lavender); --chrome-1000: var(--text);
/* Purple palette */
--purple-300: var(--lavender); --purple-400: var(--blue); --purple-500: var(--sapphire);
--purple-600: var(--sky); --purple-800: var(--teal); --purple-900: var(--green);
/* Primary palette (mirrors graphite) */
--primary: var(--text); --primary-25: var(--overlay2); --primary-50: var(--flamingo);
--primary-70: var(--pink); --primary-100: var(--mauve); --primary-200: var(--red);
--primary-300: var(--maroon); --primary-400: var(--peach); --primary-500: var(--yellow);
--primary-600: var(--green); --primary-700: var(--teal); --primary-800: var(--sky);
--primary-850: var(--sapphire); --primary-900: var(--blue); --primary-950: var(--lavender);
--primary-1000: var(--text); --primary-g: var(--text); --primary-g-2: var(--red);
--primary-g-6: var(--green); --primary-g-8: var(--sky); --primary-300-solid: var(--maroon);
/* Functional colors */
--warning: var(--peach); --info: var(--sky); --danger: var(--red); --success: var(--green);
--calm: var(--surface0); --link: var(--purple-600); --primary-hover: var(--purple-600);
--primary-hover-hover: var(--purple-500); --primary-visited: var(--teal);
/* UI Elements */
--kagi-highlight: var(--yellow); --beta-tag-bg: var(--yellow); --beta-tag-text: var(--base);
--beta-tag-inside-corners: var(--maroon); --kagi-light-cream: var(--rosewater);
--kagi-accent: var(--surface1); --kagi-sky: var(--sky); --kagi-sky-b: var(--sapphire);
--kagi-sky-i: var(--sky); --kagi-orange: var(--maroon);
--resultsummary-highlight: var(--surface2); --resultsummary-highlight_text: var(--text);
--kagi-graphite: var(--text); --kagi-graphite-s: var(--overlay2);
--kagi-graphite-text: var(--base); --kagi-graphite-ia: var(--text);
--kagi-graphite-ia-color: var(--base);
/* Shadows */
--inner-shadow: rgba(0, 0, 0, .05); --settings-app-inner-bg: var(--app-bg);
--box-shadow: rgba(0, 0, 0, .09); --box-shadow-15: rgba(0, 0, 0, .15);
--ranked-box-shadow: rgba(0, 0, 0, .25);
/* Inputs and buttons */
--color-search-input-border: var(--mauve); --color-search-input: var(--base);
--color-search-input-opac: var(--app-bg-opac); --color-danger: var(--red);
--input-bg: var(--app-bg); --btn-primary-bg: var(--text); --btn-primary-text: var(--base);
--btn-primary-color: var(--base); --btn-group-bg: var(--base);
/* Navigation */
--nav_n_se_line: var(--yellow); --nav_n_im_line: var(--blue); --nav_n_vi_line: var(--red);
--nav_n_ne_line: var(--mauve); --nav_n_ma_line: var(--green);
/* Sidebar */
--secondary: var(--base); --app-sidebar-item-border: rgba(255, 255, 255, .2);
--app-sidebar-link: rgba(255, 255, 255, .6); --app-sidebar-nav-item-bg_hover: var(--yellow);
--app-sidebar-nav-item-icon_hover: var(--base);
/* Search results */
--result-item-title-border: var(--peach); --result-item-title-border_hover: var(--primary-hover);
--result-item-title-visited-border: var(--pink); --result-rank-icon-stroke_promoted: var(--text);
--result-item-highlight: var(--sky); --search-result-content-text: var(--text);
--search-result-url-link: var(--green); --search-result-title: var(--text);
--search-result-title-hover: var(--primary-hover); --search-result-date-bg: var(--surface0);
--search-result-date-new-bg: var(--base); --search-result-date-new: var(--sky);
/* Domain ratings */
--domain-rank-icon-color-ban: var(--red); --domain-rank-icon-color-lower: var(--red);
--domain-rank-icon-color-normal: var(--red); --domain-rank-icon-color-higher: var(--red);
--domain-rank-icon-color-boosted: var(--red); --domain-rank-icon-color-trackers: var(--peach);
--domain-rank-icon-color-trackers-hover: var(--maroon); --domain-rank-icon-color-scam: var(--peach);
--domain-rank-icon-color-scam-hover: var(--maroon); --ranked-box-connection-secure: var(--green);
--ranked-box-connection-insecure: var(--red); --ranked-box-tracker-desc-danger: var(--red);
--ranked-box-tracker-desc-clear: var(--green);
/* Inline content */
--inline-header-title: var(--text); --inline-widget-bg: var(--surface0);
--inline-widget-hover-bg: var(--surface1); --inline-header-border: var(--red);
--inline-domain-tag-bg: var(--pink); --related-item-bg: var(--surface0);
--related-item-hover-bg: var(--surface1); --video-item-bg: var(--surface0);
--auto-sugg-bg_hover: var(--surface0);
/* Provider breakdown */
--provider-breakdown_server: var(--sky); --provider-breakdown_client: var(--peach);
--provider-breakdown_speed1: var(--yellow); --provider-breakdown_speed2: var(--red);
--provider-breakdown_speed3: var(--red); --widget-progress_bar: var(--text);
--translate-fc_icon: var(--text); --rating-star_background: var(--surface1);
--wiki-content-links: var(--text); --m_sri_gap_color: var(--surface1);
/* AI chat */
--ai_chat_buble_a_bg: var(--kagi-accent); --ai_chat_buble_q_bg: var(--app-bg);
--ai_chat_buble_dd_q_bg: var(--kagi-accent); --ai_chat_buble_dd_a_bg: var(--surface1);
--ai_chat_buble_a_text: var(--app-text); --ai_chat_buble_q_text: var(--app-text);
--ai_chat_input_text: var(--app-text); --ai_chat_input_button: var(--teal);
/* Misc UI elements */
--doggo-color-1: var(--text); --doggo-bg-color: var(--app-bg); --doggo-stroke-color: var(--maroon);
--landing-page-clouds-opacity: 1; --quick-search-bg: var(--text); --quick-search-icon: var(--base);
--app-logo: var(--text); --app-logo-bg: var(--yellow); --filters-clear-btn-icon: var(--maroon);
--filter-dd-bg: var(--surface2); --k-tooltip-bg: rgba(30, 30, 46, .9);
--k-tooltip-text: var(--text); --dd-hover-bg: var(--mauve); --dd-hover-color: var(--text);
--dd-list-input-bg: var(--input-bg); --not-found-bubble-bg: var(--surface1);
--site_info_bg: var(--app-bg); --site_info_bottom_bg: var(--kagi-accent);
/* Code syntax highlighting */
--code-bg: var(--base); --code-border: var(--overlay0); --code-k: var(--mauve);
--code-s: var(--green); --code-cm-c1: var(--maroon); --code-n: var(--mauve);
--code-p: var(--text); --background-color-sky: var(--sky);
/* Form elements */
--checkbox-bg: var(--yellow); --checkbox-check: var(--base); --as-dd-border: var(--app-bg);
--dd-list-input-bg: var(--base); --icon-purple: var(--sky);
/* Onboarding elements */
--onboarding_theme_options_dark_visibility: flex; --onboarding_theme_options_light_visibility: none;
--onb_theme_light_preview_box: none; --onb_theme_calm_blue_preview_box: none;
--onb_theme_royal_blue_preview_box: none; --onb_theme_moon_dark_preview_box: flex;
--image_brightness: 100%;
}
/* Light theme overrides - using Kagi's .theme_light class */
.theme_light {
/* Catppuccin Latte colors */
--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;
/* Light mode adjustments */
--color-scheme: light; --app-bg: var(--base); --app-text: var(--text);
--header-bg: var(--crust); --inline-widget-bg: var(--surface0);
--inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--mauve);
--btn-primary-text: var(--crust); --checkbox-bg: var(--mauve); --checkbox-check: var(--crust);
--onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex;
--onb_theme_light_preview_box: flex; --onb_theme_moon_dark_preview_box: none;
--k-tooltip-bg: rgba(220, 224, 232, 0.9); --k-tooltip-text: var(--text);
}
/* System preference override - only applies when no theme class is set */
@media (prefers-color-scheme: light) {
:root:not(.theme_moon_dark):not(.theme_light):not(.theme_calm_blue):not(.theme_royal_blue) {
/* Catppuccin Latte colors */
--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;
/* Light mode adjustments */
--color-scheme: light; --app-bg: var(--base); --app-text: var(--text);
--header-bg: var(--crust); --inline-widget-bg: var(--surface0);
--inline-widget-hover-bg: var(--surface1); --btn-primary-bg: var(--mauve);
--btn-primary-text: var(--crust); --checkbox-bg: var(--mauve); --checkbox-check: var(--crust);
--onboarding_theme_options_dark_visibility: none; --onboarding_theme_options_light_visibility: flex;
--onb_theme_light_preview_box: flex; --onb_theme_moon_dark_preview_box: none;
--k-tooltip-bg: rgba(220, 224, 232, 0.9); --k-tooltip-text: var(--text);
}
}
/* Base styles */
body { font-family: Poppins, sans-serif !important; }
/* Dropdowns */
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover { background-color: var(--surface2) !important; }
.dropdown .dd-list ._0_list_items li:hover { color: var(--overlay0) !important; }
.sidebar-filter-nav-form .sidebar-filter-nav > .filter-item .dd-list li:hover { color: var(--overlay0) !important; }
.k_ui_dropdown_data_list .list_items > div:hover { background-color: unset !important; color: unset !important; outline: none; text-decoration: none; }
/* Domain badges & tags */
span.domain, #chat_box .chat_bubble .sources .domain {
background-color: var(--surface0) !important; color: var(--text) !important;
padding: 2px 4px !important; border-radius: 3px !important;
}
span.__domain-name, .widget-simple .__domain-name, .bg-p-50 { background-color: var(--surface0) !important; }
/* Toggle switches */
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar { background: var(--primary-g-6); }
.k_ui_toggle_switch.--mini .k_ui_toggle_switch_bar { --border-color: var(--primary-g-6); }
/* Tooltips and focus states */
.k-tooltip { background-color: var(--primary-100); }
:focus-visible { border-radius: 5px; outline: 2px solid var(--peach); }
/* Sidebar */
div.sidebar-box { background-color: var(--mantle) !important; }
.thread-list > li:is(.active, :hover, :focus-within) { background-color: var(--surface1) !important; }
#thread-sidebar-collapse:hover { color: var(--crust); }
/* Header & Navigation */
header { background: var(--crust) !important; }
header .header-btn:hover { color: var(--crust); }
.landing-category-select .landing_cat_buttons > button.--active {
align-items: center; border: 1px solid var(--primary-400); border-radius: 999px;
color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px;
padding: 8px 16px; background-color: var(--surface0); font-weight: 700;
}
.landing-category-select .landing_cat_buttons > button {
border-bottom: 2px solid transparent; color: var(--primary);
font-size: .875rem; height: 47px; margin: 0; min-width: unset !important;
padding: 0 8px; position: relative;
}
/* Navigation button highlights */
.landing-category-select .landing_cat_buttons > button.n_se.--active,
.landing-category-select .landing_cat_buttons > button.n_se:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; }
.landing-category-select .landing_cat_buttons > button.n_im.--active,
.landing-category-select .landing_cat_buttons > button.n_im:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; }
.landing-category-select .landing_cat_buttons > button.n_vi.--active,
.landing-category-select .landing_cat_buttons > button.n_vi:hover { border-bottom: 2px solid var(--nav_n_vi_line) !important; }
.landing-category-select .landing_cat_buttons > button.n_ne.--active,
.landing-category-select .landing_cat_buttons > button.n_ne:hover { border-bottom: 2px solid var(--nav_n_ne_line) !important; }
.landing-category-select .landing_cat_buttons > button.n_ma.--active,
.landing-category-select .landing_cat_buttons > button.n_ma:hover { border-bottom: 2px solid var(--nav_n_ma_line) !important; }
.landing_cat_buttons {
border-bottom: 1px solid var(--primary-200); display: flex;
justify-content: space-between; width: 100%; padding-bottom: 10px;
}
#adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 65px; }
/* Prompt & Chat styles */
.prompt-options button:hover, .prompt-options label:hover,
.promptOptionsSelector .custom-assistants li.option:hover,
.promptOptionsSelector .default-assistants li.option.focus,
.promptOptionsSelector .default-assistants li.option:hover,
.promptOptionsSelector .custom-assistants span a:hover,
.promptOptionsSelector .custom-assistants li.option.focus,
.prompt-options label:hover, .prompt-options button:hover { background-color: unset !important; }
.promptOptionsSelector .custom-assistants li.option,
.promptOptionsSelector .default-assistants li.option { color: var(--text); }
/* Chat box styling */
#chat_box > div:nth-child(1), [aria-label="You said:"] {
background-color: var(--surface0) !important; padding: 20px !important;
border: 2px solid var(--overlay0) !important; border-radius: 25px !important;
}
.chat_bubble {
padding-block: 32px; position: relative; border: 2px solid var(--overlay0);
border-radius: 25px; margin-top: 25px; padding: 20px; background-color: var(--crust);
}
.chat_bubble:focus-within:before, .chat_bubble:hover:before { background-color: unset !important; }
.chat_bubble .actions { display: inline-flex !important; gap: 8px !important; flex-direction: row !important; }
#chat_box .chat_bubble .actions [data-action]:is(a,button):hover { background: var(--surface1); }
#chat_box .chat_bubble .content sup {
background-color: var(--surface1); color: var(--text);
}
#chat_box .chat_bubble .content sup:hover { background-color: var(--surface2); }
.message-info li .value {
background-color: var(--surface0); color: var(--text);
padding: 2px 5px; border-radius: 4px;
}
#prompt-box { border-top: 2px solid var(--peach); }
#dictation-button:hover { color: var(--crust); }
/* Form elements */
input[type="date"] { color: var(--primary-600) !important; }
._0_filters-clear-btn { color: var(--crust) !important; }
._0_filters-clear-btn i svg { color: var(--base) !important; }
._0_copied_tooltip { left: -45px; }
/* Upload items */
#uploadedItems .item .type, #uploadedItems .item .icon, #uploadedItems .item .name { color: var(--crust); }
#form .uploadLabel:hover { color: var(--crust); }
.POI-item-back .text { color: var(--crust); }
#popover-privacy > p:nth-child(3) > span > i { color: var(--crust) !important; }
/* Search results */
.search-result, .sri-group { border-bottom: unset !important; }
.inline-content+.search-result, .inline-content+.sri-group { border-top: unset !important; }
.s-f-w.--active .search_area { padding: 10px !important; }
.main-center-box>* {
margin-inline: auto; max-width: 850px;
padding-inline: 16px; width: 100%;
}
/* Optional: disable underline on title links */
.__sri-title .__sri_title_link { border-bottom: none; }
/* Mobile styles */
@media all and (max-device-width: 766px) {
.bg-p-50 { background-color: var(--surface0); }
.landing-category-select .landing_cat_buttons > button.--active {
align-items: center; border: 1px solid var(--primary-400); border-radius: 999px;
color: var(--primary-500); display: flex; flex-shrink: 0; gap: 4px;
padding: 8px 16px; background-color: var(--surface0); font-weight: 700;
}
.landing-category-select .landing_cat_buttons > button {
border: none; color: var(--primary); font-size: .875rem; height: 47px;
margin: 0; min-width: unset !important; padding: 0 8px; position: relative;
}
/* Navigation styles for mobile */
.landing_cat_buttons {
border-bottom: none !important; display: flex;
justify-content: space-between; width: 100%;
}
#adv_search_btn:checked + #mainContent .search-form .landing-category-select { top: 85px; }
}
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 */ |
191 | body { 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 */ |
200 | span.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 | } |
204 | span.__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 */ |
215 | div.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 */ |
220 | header { background: var(--crust) !important; } |
221 | header .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 */ |
295 | input[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 | } |