26 votes

Kagi recently changed their dark mode, fix inside

Posted by drannex (edited )
Tags: kagi, user created, websites, css, ui, dark modes

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).

6 comments

  1. 0x29A
    Link
    Awesome! Thanks for this. Yeah this dark mode change by Kagi without user consent really bothered me, to be honest.

    Awesome! Thanks for this. Yeah this dark mode change by Kagi without user consent really bothered me, to be honest.

    7 votes
  2. [2]
    ducc
    Link
    Ah! Thank you so much. I figure enough people will ask for a darker dark theme and they'll eventually add an official one, but this works great for now.

    Ah! Thank you so much. I figure enough people will ask for a darker dark theme and they'll eventually add an official one, but this works great for now.

    6 votes
    1. drannex
      Link Parent
      I also made some slight (personal) additions that you might be into: --search-result-title: #14a1f7; --primary-visited: #0d6499; --result-item-title-border: transparent;...

      I also made some slight (personal) additions that you might be into:

        --search-result-title: #14a1f7;
  --primary-visited: #0d6499;
  --result-item-title-border: transparent;
  --result-item-title-border_hover: transparent;
  --search-result-title-hover: #0d6499;

      You can throw those at the bottom of :root { ... } div. Gives it a nice blue title and removes that border under link titles.

      6 votes
  3. vord
    Link
    Complete tangent, but I absolutely love how OLEDs are bringing back proper black background dark modes again, as it provides additional battery saving. I missed the green-on-black terminals.

    Complete tangent, but I absolutely love how OLEDs are bringing back proper black background dark modes again, as it provides additional battery saving.

    I missed the green-on-black terminals.

    6 votes
  4. fineboi
    Link
    Freaking Awesome!!!! Thank You!!!!

    Freaking Awesome!!!! Thank You!!!!

    5 votes
  5. elguero
    Link
    I found that (for me at least) the issue with the broken dark mode was when it was set on System in the settings. Setting it explicitly on Dark fixed the issues for me. Thanks for the CSS though.

    I found that (for me at least) the issue with the broken dark mode was when it was set on System in the settings. Setting it explicitly on Dark fixed the issues for me.

    Thanks for the CSS though.

    1 vote