Kagi 搜索引擎美化分享

Kagi 是一款以用户隐私和高质量搜索结果为核心的付费搜索引擎，具有无广告、高度可定制、隐私保护、AI 功能等特点。今天通过链接 (文中有) 领取到了三个月的免费体验，整体体验不错。为优化使用 Kagi 时的体验，我按照博客色彩风格进行了 CSS 自定义，有兴趣的朋友可以参考一下。

进一步了解 Kagi

• 《订阅制搜索引擎: Kagi》

• 《Kagi 使用技巧》

• 《Kagi 使用体验和近期更新：翻译、助手和与Perplexity的对比》
  

效果图

Kagi 链接（免费体验 3 月）

（不确定何时失效）

http://kagi.com/p/THANKSFED5FAE2

自定义 CSS 步骤

Kagi – 右上角 Setting – Appearance – Custom CSS，将下面的内容复制到文本框内保存即可。

（非专业人士，纯瞎捣腾，不喜勿碰，谢谢🙏）

:root {
    --result-item-title-border: var(--highlight-color);
    --border-color: #f3f4f7;
    --highlight-color: #98c1d9;
  }
​
.theme_light {
    --title-color: #293241;
    --text-color: #475671;
    --after-color: #A9AAAE;   
    --other-color: #ffff;
    --primary:#475671;
    --primary-hover:#98c1d9;
     }
  
  .theme_dark, .theme_moon_dark {
    --title-color: #ffffff;
    --text-color: #ffffff;
    --after-color: #475671;
    --other-color: #475671;
    --image_brightness: 85%; }
  
  
  
  a.__sri_title_link._ext_t._0_sri_title_link._0_URL {
    font-weight: 700;
    font-style: normal;
    color: var(--title-color);
    border-bottom: none;
  }
  
  a.__sri_title_link._ext_t._0_sri_title_link._0_URL:hover {
    color: var(--highlight-color);  /* 鼠标悬停时的颜色 */
    border-bottom: none;
  }
  
  a.__sri_title_link._ext_t._0_sri_title_link._0_URL:visited {
    color: var(--after-color);  /* 点击后的颜色 */
  }
  
  a.__sri_title_link._ext_t._0_sri_title_link._0_URL:visited:hover {
    color: var(--highlight-color);  /* 点击后的颜色 */
  }
​
  a._0_URL {
    color: var(--title-color);
    border-bottom: 0px solid var(--highlight-color);
  }
  
  div.__sri_url_path_box {
    color: var(--text-color);
  }
  
  div div div {
    color: var(--text-color);
  }
  
  div div svg {
    color: var(--title-color);
  }
  
  a._0_URL:hover  {
    color: var(--highlight-color);
    border-bottom: 0px solid var(--highlight-color);
  }
  
  a._0_URL:visited {
    color: var(--after-color);
  }
  
  a._0_URL:visited:hover {
    color: var(--highlight-color);
  }
  
  a.nav_item._0_query_link_item {
    color: var(--title-color);
    font-weight: 700;
  }
  
  a.inlineHeader:hover {
    color: var(--highlight-color);
  }
  
  a.btn.--secondary.--block{
    color: var(--text-color);
    border-color: var(--text-color);
    font-weight: 700;
  }
  
  a.btn.--secondary.--block:hover {
    color: var(--highlight-color);
    border-color: var(--highlight-color);
    font-weight: 700;
  }
  
  span.smw-less:hover {
    color: var(--highlight-color);
  }
  label.smw:hover {
    color: var(--highlight-color);
  }
  span.smw-more:hover {
    color: var(--highlight-color);
  }
  
  div._0_results_summary_box.__0_show {
    border: 2px solid var(--border-color);  /* 边框颜色 */
    border-radius: 14px;        /* 圆角效果 */
    padding: 20px;              /* 增加内边距 */
  }
  
  
  .doggo_sit_a {
    display: none;
  }
  
  div div b {
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    color: var(--title-color);
  }
  
  a.share_url_footer_content.copyToClipLink:hover {
    color: var(--highlight-color);
  }
  
  
  /* Style buttons */
  .btn.--primary {
    background-color: var(--title-color);
    border: 1px solid var(--title-color);
    color: var(--other-color);
    transition: ease 150ms;
  }
  
  .btn.--primary:hover {
    background-color: var(--title-color);
    color: var(--other-color);
    border: 1px solid var(--title-color);
  }
  
  /* Hover styles */
  .btn.--primary:hover {
    background-color: var(--title-color);
    border: 1px solid var(--highlight-color);
    transform: scale(1.05);
  }
  
  /* Outer glow on hover */
  .btn.--primary:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: 0 0 1rem 0.5rem var(--highlight-color);
    opacity: 0.6;
  }
  
  
  .k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
    background: var(--highlight-color);
    background: linear-gradient(90deg, var(--highlight-color), var(--highlight-color));
    box-shadow: 0 0 0 1px var(--highlight-color);
  }
  
.serp-nav .nav_item.n_se:after,
.serp-nav .nav_item.n_im:after,
.serp-nav .nav_item.n_vi:after,
.serp-nav .nav_item.n_ne:after,
.serp-nav .nav_item.n_ma:after {
  background-color: var(--highlight-color);
}
  
  
  .landing-category-select .landing_cat_buttons>button.n_se.--active, .landing-category-select .landing_cat_buttons>button.n_se:hover {
    border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .landing-category-select .landing_cat_buttons>button.n_ne.--active, .landing-category-select .landing_cat_buttons>button.n_ne:hover {
      border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .landing-category-select .landing_cat_buttons>button.n_ma.--active, .landing-category-select .landing_cat_buttons>button.n_ma:hover {
      border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .landing-category-select .landing_cat_buttons>button.n_vi.--active, .landing-category-select .landing_cat_buttons>button.n_vi:hover {
      border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .landing-category-select .landing_cat_buttons>button.n_im.--active, .landing-category-select .landing_cat_buttons>button.n_im:hover {
      border-bottom: solid var(--highlight-color);
    color: var(--text-color);
  }
  
  .k_ui_dropdown.__basic .k_ui_dropdown_data_list .list_items>a, .k_ui_dropdown.__basic .k_ui_dropdown_data_list .list_items>label {
    color:var(--text-color);
  }
  
.quick-search-btn svg {
  color: var(--other-color);
}
​
.quick-search-btn{
  background:var(--highlight-color);
  backgroud-color:var(--highlight-color);
}
  
/* mobile buttons */
​
.mob .landing-category-select .landing_cat_buttons > button.--active {
  border: 1px solid var(--highlight-color);
  background-color: var(--highlight-color); 
  color: var(--text-color);}