關於 Kagi:每月索價 10usd 的搜尋引擎-但我還是立即付錢了-ft-Kagi

About

This is a barebone Kagi css theme based on the official Kagi Dark theme, inspired by gruvbox.

Kagi Custom CSS Gruvbox Screenshot Preview

Primary Color for dark theme

#1d2021

Custom CSS

:root {
  --font-main: monospace;
  --color-primary: #ebdbb2;
  --color-primary_hover: #fbf1c7;
  --page-text-color: #ebdbb2;
  --background-color: #1d2021;
  --color-primary_visited: #b16286;
  --search-result-title: #83a598;
  --search-result-title-hover: #458588;
  --search-result-subtitle: #458588;
  --search-result-content-text: #a89984;
  --color_link: #83a598;
  --footer-bg: #1d2021;
  --color-search-input: #3c3836;
  --inline-widget-bg: #282828;
  --search-result-date-new-bg: #d79921;
  --related-item-bg: #282828;
  --search-result-date-bg: #282828;
  --m_sri_gap_color: #1d2021;
}

.btn.--yellow {
  background: #d79921;
}

.footer.footer-landing,
header.app-header.app-content-box,
.__sri-title .__sri_title_link,
.__sri-title .__sri_title_link:hover,
.__srgi-title a,
.__srgi-title a:hover {
  border: 0;
}

.__sri-title {
  margin-bottom: 0;
}

.__sri-url .__domain-favicon {
  // background: #FFF;
  margin-right: 8px;
}

.__srgi-title a {
  color: var(--search-result-subtitle);
}

.__sri-desc {
  font-size: 0.7rem;
}

.__sri-url .__sri_url_path_box {
  font-size: 0.7rem;
}

.search-result.opt_url_above .__sri-title {
  margin-bottom: 0.2rem;
}

Applying Theme

  1. Goto Kagi.com -> Settings -> Appearance

  2. Choose Kagi Dark as the Default Dark Theme

kagi-settings-1-1779182694692.webp

  1. Copy following CSS to Custom CSS and hit Apply Custom CSS button

kagi-settings-2-1779182700577.webp

  1. Done!

p.s. You might want change the font size to larger to increase readability of monospace, or just change the css by yourself 🍻

Enjoy ;)