Modern Kagi theme with an orange accent. Provides both light/dark variant.

kagi-oranginum.md

Kagi Oranginum Theme

This is a new theme that provides support for Apr10 UI update.

Old version available here

Showcase

Dark	Light

Usage

1. Get the precompiled CSS file or Compile the SCSS file
2. Navigate to Settings -> Appearance -> Custom CSS
3. Paste the compiled CSS file
4. Set the theme colour to match each theme's background. The default is #ffffff for light and #151515 for dark.
5. Switch Enable Custom CSS to on

Compiling

This theme uses SCSS to avoid human error (disparity) between normal and conditional dark themes¹.

The CSS currently includes a non-ASCII character for replacing the 'AI' icon, therefore non-compressed style should be used for compilation²:

sass --sourcemap=none kagi.scss

Customisable keys

Root

Keys that apply to both light and dark themes

--k-accent: Main theme colour
--k-accent-background: --k-accent with alpha 0.2
--k-accent-border: --k-accent with alpha 0.7
--k-accent-hover: --k-accent on hover (usually lighter)
--k-accent-alt: Alternative accent colour. Not currently used.

Per-theme

Keys that needs to be configured separately for light and dark themes

--k-background: Background colour
--k-foreground: Foreground colour

--k-surface-primary: Surface colour 1, used on widgets, badges (hsl ±8%)
--k-surface-secondary: Surface colour 2 (hsl ±16%)
--k-surface-tertiary: Surface colour 3 (hsl ±24%)

--k-border: General border colour (hsl ±20%)
--k-mask: Grey mask, used on visited links and buttons

--k-glass: 'Glass' colour, used on dropdown menus
--k-glass-hover: --k-glass on hover (hsl ±15%)

--site_info_bg: Background of the website info description
--site_info_bottom_bg: Background of the website info metadata

Applying tweaks

Paste the contents of a tweak CSS file after the main CSS.

Footnotes

1. Kagi's 2024-04-10 update has changed the way 'System Default' theme option operates. It now loads both .theme_light and .theme_dark_conditional, and the conditional theme is expected to be behind a media query @media (prefers-color-scheme: dark) in order for the dark/light 'transition' to work. ↩

2. The BOM mark used to imply UTF-8 usage on compressed mode doesn't work on Custom CSS, since it's inserted as an inline CSS at the middle of the HTML. Current workaround is to compile the SCSS with non-compressed style, and then pass it through a CSS minifier. ↩

kagi-precompiled.css

@charset "UTF-8";
/* Kagi Oranginum Theme
 * Modern Kagi theme with an orange accent.
 * ---
 * sefidel
*/
:root {
  --k-accent: #f16d43;
  --k-accent-background: rgba(241, 109, 67, 0.2);
  --k-accent-border: rgba(241, 109, 67, 0.6);
  --k-accent-hover: #dd633d;
  --k-accent-alt: #62a09d; }

.theme_dark, .theme_moon_dark {
  --k-background: #151515;
  --k-foreground: #f4f2f4;
  --k-surface-primary: #2a2a2a;
  --k-surface-secondary: #3d3d3d;
  --k-surface-tertiary: #525252;
  --k-border: #474747;
  --k-mask: #a09fa6;
  --k-glass: hsla(0, 0%, 14%, 0.9);
  --k-glass-hover: hsla(0, 0%, 29%, 0.9);
  --site_info_bg: rgba(35, 35, 35, 0.9);
  --site_info_bottom_bg: rgba(50, 50, 50, 0.9);
  --input-bg: var(--k-surface-primary);
  --color-search-input: var(--k-surface-primary);
  --inline-header-border: var(--k-border);
  --inline-domain-tag-bg: var(--k-surface-secondary);
  --inline-widget-bg: var(--k-surface-primary);
  --inline-widget-hover-bg: var(--k-surface-secondary);
  --related-item-bg: var(--k-surface-primary);
  --image_brightness: 85%; }

.theme_light {
  --k-background: #ffffff;
  --k-foreground: #18181a;
  --k-surface-primary: #ebebeb;
  --k-surface-secondary: #d6d6d6;
  --k-surface-tertiary: #c2c2c2;
  --k-border: #cccccc;
  --k-mask: #6d6c74;
  --k-glass: hsla(0, 0%, 100%, 0.9);
  --k-glass-hover: hsla(0, 0%, 85%, 0.9);
  --site_info_bg: rgba(255, 255, 255, 0.9);
  --site_info_bottom_bg: rgba(240, 240, 240, 0.9); }

@media (prefers-color-scheme: dark) {
  .theme_dark_conditional, .theme_moon_dark_conditional {
    --k-background: #151515;
    --k-foreground: #f4f2f4;
    --k-surface-primary: #2a2a2a;
    --k-surface-secondary: #3d3d3d;
    --k-surface-tertiary: #525252;
    --k-border: #474747;
    --k-mask: #a09fa6;
    --k-glass: hsla(0, 0%, 14%, 0.9);
    --k-glass-hover: hsla(0, 0%, 29%, 0.9);
    --site_info_bg: rgba(35, 35, 35, 0.9);
    --site_info_bottom_bg: rgba(50, 50, 50, 0.9);
    --input-bg: var(--k-surface-primary);
    --color-search-input: var(--k-surface-primary);
    --inline-header-border: var(--k-border);
    --inline-domain-tag-bg: var(--k-surface-secondary);
    --inline-widget-bg: var(--k-surface-primary);
    --inline-widget-hover-bg: var(--k-surface-secondary);
    --related-item-bg: var(--k-surface-primary);
    --image_brightness: 85%; } }
:root {
  --kagi-highlight: var(--k-accent);
  --app-logo: var(--primary);
  --app-logo-bg: var(--k-accent);
  --app-bg: var(--k-background);
  --page-text: var(--k-foreground);
  --primary: var(--k-foreground);
  --primary-visited: var(--k-mask);
  --primary-hover: var(--k-accent);
  --secondary: var(--k-surface-primary);
  --header-bg: var(--k-surface-primary);
  --header-border: var(--k-border);
  --color-search-input-border: var(--k-border);
  --search-result-title-hover: var(--k-accent);
  --search-result-title: var(--primary);
  --search-result-content-text: var(--primary-600);
  --search-result-date-bg: var(--k-surface-primary);
  --search-result-date-new: var(--k-accent);
  --search-result-date-new-bg: var(--k-accent-background);
  --auto-sugg-bg_hover: var(--k-surface-secondary);
  --color-link: var(--primary);
  --link: var(--color-link);
  --nav_n_se_line: var(--k-accent);
  --m_sri_gap_color: var(--header-bg);
  --result-item-highlight: var(--k-accent);
  --result-item-title-border: var(--k-border);
  --result-item-title-border_hover: var(--result-item-title-border);
  --dd-list-input-bg: var(--k-glass);
  --dd-hover-bg: var(--k-glass-hover);
  --filter-dd-bg: var(--k-surface-primary);
  --btn-primary-color: var(--k-foreground);
  --btn-primary-bg: var(--k-surface-secondary);
  --ai_chat_buble_q_bg: var(--k-surface-primary);
  --ai_chat_buble_a_bg: var(--k-surface-primary); }

.search_mode_box_s a.--active,
.search_mode_box_s a:hover,
.search_mode_toggle i.oSea {
  background-color: var(--k-accent); }

@media (hover: hover) {
  .search_mode_toggle i.oSea:hover {
    background-color: var(--k-accent) !important; } }
:focus-visible:not(.search-input),
#quickPeekResults .__sri-url:focus-visible {
  outline: 3px solid var(--k-accent); }

.doggo_sit_a {
  display: none; }

.quick-settings {
  --btn-primary-bg: var(--primary);
  --btn-primary-color: var(--secondary); }

.__sri-title .__sri_title_link,
.__sri-title .__sri_title_link:hover {
  border-bottom: none; }

.sri-group .sr-group .__sri-desc {
  display: none; }

.sri-group .sr-group:has(.__srgi) {
  border-left: 1px solid var(--k-border); }

.sri-group .__dl {
  padding-bottom: 5px;
  gap: 1rem; }

.sri-group .__dl .__srgi {
  margin-bottom: 0; }

.result-comments .comment:hover {
  color: var(--primary); }

.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li.__hover,
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:focus-visible,
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover,
.k_ui_dropdown_data_list .list_items > a.__hover,
.k_ui_dropdown_data_list .list_items > a:focus-visible,
.k_ui_dropdown_data_list .list_items > a:hover,
.k_ui_dropdown_data_list .list_items > div.__hover,
.k_ui_dropdown_data_list .list_items > div:focus-visible,
.k_ui_dropdown_data_list .list_items > div:hover {
  background-color: var(--dd-hover-bg); }

.k_ui_toggle_switch input:checked ~ .k_ui_toggle_switch_bar,
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
  background: linear-gradient(90deg, var(--k-accent-background) 0%, var(--k-accent) 100%);
  box-shadow: 0 0 0 1px var(--k-accent-border); }

.k_ui_toggle_switch input:checked ~ .k_ui_toggle_switch_bar::after,
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar::after {
  border: 1px solid var(--k-accent); }

.btn.--secondary {
  color: var(--k-mask);
  border: 1px solid var(--k-mask); }

.widget_holder .wasb {
  box-shadow: 0 15px 45px 0 color-mix(in srgb, var(--k-foreground) 10%, transparent); }

.ico_ia svg,
._0_ico_ia svg,
.__sri_more_menu_ia i svg {
  display: none; }

.ico_ia::after,
._0_ico_ia::after,
.__sri_more_menu_ia i::after {
  content: "Σ"; }

kagi.scss

/* Kagi Oranginum Theme
 * Modern Kagi theme with an orange accent.
 * ---
 * sefidel
*/

/// Colour palette
:root {
  --k-accent: #f16d43;
  --k-accent-background: rgba(241, 109, 67, 0.2);
  --k-accent-border: rgba(241, 109, 67, 0.6);
  --k-accent-hover: #dd633d;
  --k-accent-alt: #62a09d; // TODO: remove?
}

// TODO: https://github.com/sass/sass/issues/1050
// NOTE: We use mixin here under the assumption that there will be exactly
// two calls: one inside the media query and one outside.
// If we end up calling more than two times, a 'dummy placeholder' should be
// used appropriately to avoid unnecessarily repeated code.
@mixin dark {
  --k-background: #151515;
  --k-foreground: #f4f2f4;

  // --k-foreground-secondary: #dcdbdd;
  // --k-foreground-tertiary: #a09fa6;
  // --k-foreground-quaternary: #6c6d74;
  // --k-foreground-quinary: #4d4c52;

  --k-surface-primary: #2a2a2a;
  --k-surface-secondary: #3d3d3d;
  --k-surface-tertiary: #525252;

  --k-border: #474747;
  --k-mask: #a09fa6;

  --k-glass: hsla(0, 0%, 14%, 0.9);
  --k-glass-hover: hsla(0, 0%, 29%, 0.9);

  --site_info_bg: rgba(35, 35, 35, 0.9);
  --site_info_bottom_bg: rgba(50, 50, 50, 0.9);

  // dark-specific tweaks
  --input-bg: var(--k-surface-primary);
  --color-search-input: var(--k-surface-primary);

  --inline-header-border: var(--k-border);
  --inline-domain-tag-bg: var(--k-surface-secondary);
  --inline-widget-bg: var(--k-surface-primary);
  --inline-widget-hover-bg: var(--k-surface-secondary);

  --related-item-bg: var(--k-surface-primary);

  --image_brightness: 85%;
}

.theme_dark, .theme_moon_dark {
  @include dark;
}

.theme_light {
  --k-background: #ffffff;
  --k-foreground: #18181a;

  --k-surface-primary: #ebebeb;
  --k-surface-secondary: #d6d6d6;
  --k-surface-tertiary: #c2c2c2;

  --k-border: #cccccc;
  --k-mask: #6d6c74;

  --k-glass: hsla(0, 0%, 100%, 0.9);
  --k-glass-hover: hsla(0, 0%, 85%, 0.9);

  --site_info_bg: rgba(255, 255, 255, 0.9);
  --site_info_bottom_bg: rgba(240, 240, 240, 0.9);
}

// conditional dark needs to take precedence over the light theme
@media (prefers-color-scheme: dark) {
  .theme_dark_conditional, .theme_moon_dark_conditional {
    @include dark;
  }
}

/// Apply styles
:root {
  --kagi-highlight: var(--k-accent);
  --app-logo: var(--primary);
  --app-logo-bg: var(--k-accent);

  --app-bg: var(--k-background);
  --page-text: var(--k-foreground);
  --primary: var(--k-foreground);

  --primary-visited: var(--k-mask);
  --primary-hover: var(--k-accent);

  --secondary: var(--k-surface-primary);

  --header-bg: var(--k-surface-primary);
  --header-border: var(--k-border);

  --color-search-input-border: var(--k-border);

  --search-result-title-hover: var(--k-accent);
  --search-result-title: var(--primary);
  --search-result-content-text: var(--primary-600); // #707077
  --search-result-date-bg: var(--k-surface-primary);
  --search-result-date-new: var(--k-accent);
  --search-result-date-new-bg: var(--k-accent-background);

  --auto-sugg-bg_hover: var(--k-surface-secondary);

 // match with `--search-result-title`
  --color-link: var(--primary);
  --link: var(--color-link);

  --nav_n_se_line: var(--k-accent);

  // can't use color palette since the target colour is unset on light theme
  // gap between each result on mobile
  --m_sri_gap_color: var(--header-bg);

  // only place where this is used is Research assistant's file upload prompt.
  --result-item-highlight: var(--k-accent);

  --result-item-title-border: var(--k-border);
  --result-item-title-border_hover: var(--result-item-title-border);

  // dropdown list
  --dd-list-input-bg: var(--k-glass);
  --dd-hover-bg: var(--k-glass-hover);
  --filter-dd-bg: var(--k-surface-primary);

  --btn-primary-color: var(--k-foreground);
  --btn-primary-bg: var(--k-surface-secondary);

  --ai_chat_buble_q_bg: var(--k-surface-primary);
  --ai_chat_buble_a_bg: var(--k-surface-primary);
}

// force custom accent
.search_mode_box_s a.--active,
.search_mode_box_s a:hover,
.search_mode_toggle i.oSea {
  background-color: var(--k-accent);
}

@media (hover: hover) {
  .search_mode_toggle i.oSea:hover {
    background-color: var(--k-accent) !important;
  }
}

:focus-visible:not(.search-input),
#quickPeekResults .__sri-url:focus-visible {
  outline: 3px solid var(--k-accent);
}

/// ui tweaks
.doggo_sit_a {
  display: none;
}

.quick-settings {
  --btn-primary-bg: var(--primary);
  --btn-primary-color: var(--secondary);
}

.__sri-title .__sri_title_link,
.__sri-title .__sri_title_link:hover {
  border-bottom: none;
}

.sri-group .sr-group .__sri-desc {
  display: none;
}

.sri-group .sr-group:has(.__srgi) {
  border-left: 1px solid var(--k-border);
}

.sri-group .__dl {
  padding-bottom: 5px;
  gap: 1rem;
}
.sri-group .__dl .__srgi {
  margin-bottom: 0;
}

// link aggregator comments
// follow `.__sri_more_menu`'s hover colour
.result-comments .comment:hover {
  color: var(--primary);
}

// dropdown lists
.k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li.__hover,
.k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li:focus-visible,
.k_ui_dropdown_data_list .list_items>._0_k_ui_dropdown_li:hover,
.k_ui_dropdown_data_list .list_items>a.__hover,
.k_ui_dropdown_data_list .list_items>a:focus-visible,
.k_ui_dropdown_data_list .list_items>a:hover,
.k_ui_dropdown_data_list .list_items>div.__hover,
.k_ui_dropdown_data_list .list_items>div:focus-visible,
.k_ui_dropdown_data_list .list_items>div:hover {
  background-color: var(--dd-hover-bg);
}

// buttons & switches
.k_ui_toggle_switch input:checked ~ .k_ui_toggle_switch_bar,
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
  background: linear-gradient(90deg, var(--k-accent-background) 0%, var(--k-accent) 100%);
  box-shadow: 0 0 0 1px var(--k-accent-border);
}

.k_ui_toggle_switch input:checked ~ .k_ui_toggle_switch_bar::after,
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar::after {
  border: 1px solid var(--k-accent);
}

// `--btn-primary` keys cannot be overridden as it is used for search mode
// buttons on mobile.
.btn.--secondary {
  color: var(--k-mask);
  border: 1px solid var(--k-mask);
}

// improve shadow on Wolfram Alpha answer box
// TODO: https://kagifeedback.org/d/3967-wolfram-alpha-answer-box-doesnt-have-enough-contrast-on-dark-theme
.widget_holder .wasb {
  box-shadow: 0 15px 45px 0 color-mix(in srgb, var(--k-foreground) 10%, transparent);
}

// replace the 'AI' icon with a simpler one
.ico_ia svg,
._0_ico_ia svg,
.__sri_more_menu_ia i svg {
  display: none;
}

.ico_ia::after,
._0_ico_ia::after,
.__sri_more_menu_ia i::after {
  content: "Σ";
}

tweaks-sri-eyecandy.css

/* Tweaks - Sub Result Eyecandy */
.sri-group .sr-group .__sri-desc {
  display: -webkit-box;
}

.sri-group .__dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.__srgi {
 padding: 0.7em;
 background: var(--k-surface-primary);
 border-radius: 10px;
 border: 1px solid var(--k-border);
}

/* TODO(legacy-cleanup): remove? */
.related-items {
  display: grid;
  margin-top: 0;
  padding-right: 0;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
}

.related-items a {
  border-radius: 5px;
  display: flex;
  margin-bottom: 0;
  width: auto;
}

.related-items a:nth-child(odd) {
  margin-right: 0;
}

.related-items a:nth-child(even) {
  margin-left: 0;
}