Kagi 搜索引擎美化分享

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

效果图#

操作步骤#

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: #ffffff;
    --primary:#475671;
    --primary-hover:#98c1d9;
    --search-result-content-text:#475671;
     }
  
  .theme_dark, .theme_moon_dark {
    --title-color: #ffffff;
    --text-color: #ffffff;
    --after-color: #475671;
    --other-color: #475671;
    --search-result-content-text: #ffffff;
    --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);
}

div.__sri-url-box {
  margin-bottom: 5px;
}
  
/* 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);}