Kagi recently changed their dark mode, fix inside

Since I know quite a few tilderinos use Kagi (far higher percentage than the standard population) I figured this might interest some of you.

Kagi pushed out a new Dark theme that is not dark. It's possibly even worse than Googles non-dark official Dark mode.

Here is a CSS fix you can throw in your custom css section in settings that I whipped up for some people in the Discord, should be useful.

    :root {  
  --custom-bg-color: #090c10;

  --search-result-gap: 20px;
  --search-result-gap-mobile: 10px;
  --app-bg: var(--custom-bg-color);
  --search-result-title: #fff;
  --primary-visited: #aaa;
  /*! --quick-search-bg: #000; */
  --color-search-input: var(--custom-bg-color);
  --result-item-title-border: rgba(255,255,255,0.25);
  --search-result-date-bg: rgba(255,255,255,0.15);
}

.__sri-time {
  font-size: 12px;
  border-radius: 2px;
  margin-right: 3px
}

.__sri-desc {
  padding-top: 3px;
}

.__sri-title {
  margin-bottom: 5px;
}

.__sri-url .__sri_url_path_box {
  margin-top: 0px;
}

@media screen and (max-width: 1300px) {
  .search-result, .sri-group {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-bottom: var(--search-result-gap-mobile) !important;
  }
}  

This fixes the colors, padding, and some other general weirdness they introduced. They also don't follow their own variable specs so I introduced two new ones in there so you can modify to your liking (namely padding between links on mobile and desktop).

Comments URL: https://tildes.net/~tech/1fjq/kagi_recently_changed_their_dark_mode_fix_inside

Votes: 25

Comments: 6