Black dark theme

swimmr77

The dark mode was darker. Its not as dark. Would be nice for mobile especially if the blacks could be true black. Less power to use black so better for the environment?

Just a third option for theme. Bright, Darker, Black.

Or custom theme picker?

drannex42

We're talking about this in the discord. If you add the following to the custom CSS section, it should get it close (and fix a few things).


: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: 6px;
}

.__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;
  }
}

You can add this here in settings.

thislooksfun

I tweaked the style from drannex42 a bit to make it only apply to the dark theme and also restore the old blue/purple link colors (all that gray was making it impossible for me to scan the results).

:root {
  --search-result-gap: 20px;
  --search-result-gap-mobile: 10px;
}

.theme_moon_dark {
  /* Restore the background color */
  --custom-bg-color: #090c10;
  --app-bg: var(--custom-bg-color);
  --color-search-input: var(--custom-bg-color);

  /* Restore the link colors */
  --search-result-title: #58a6ff;
  --primary-visited: #deb6fa;

  /* Color the underline for each link */
  --result-item-title-border: rgba(255, 255, 255, 0.25);

  /* Color the background of the date callout next to the preview text */
  --search-result-date-bg: rgba(66, 70, 103, 0.25);
}

@media (prefers-color-scheme: dark) {
  .theme_moon_dark_conditional {
    /* Restore the background color */
    --custom-bg-color: #090c10;
    --app-bg: var(--custom-bg-color);
    --color-search-input: var(--custom-bg-color);

    /* Restore the link colors */
    --search-result-title: #58a6ff;
    --primary-visited: #deb6fa;

    /* Color the underline for each link */
    --result-item-title-border: rgba(255, 255, 255, 0.25);

    /* Color the background of the date callout next to the preview text */
    --search-result-date-bg: rgba(66, 70, 103, 0.25);
  }
}

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

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

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

.__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;
  }
}

adamaveray

There is already a theme picker for both light & dark mode, so ideally Kagi could add a third theme here to bring back the fully-black dark mode from before the redesign:

In the mean time thank you @drannex42 for the custom CSS, that works great 🙌

bert

I don't think the previous dark mode was fully black, was it? But it was certainly much darker than the new dark mode. I much prefer the old one to the new one; the new one just isn't dark enough.

error-0x29A

I prefer the old one as well and have used a custom CSS to get around this for now (I appreciate that this option is available). Though, I don't appreciate the dark mode change happening without warning / user consent / some workflow to guide me to keeping a darker style.

chorizo

I thought was Orion fault but then I saw the blogpost, for now I switched to light mode and use dark reader but would be nice to bring back the native real black theme

chorizo

thislooksfun works great, thank you

Breezio

I’d love an official theme option more similar to the old one. Really not a fan of the lack of contrast in the new one.

bert

I also think the new shadow on the search bar is too heavy handed. I've been using the following rule and it's been a lot better for me.

.search-form .search-input-container {
box-shadow: 1px 4px 8px 0 rgba(0,0,0,.06);
}

roastedramen

since we are having to use varied usercss themes to replace the inbuilt ones, can we at least have a library of customcss themes so that it is easy to switch from one to another and back again. it sucks having to basically have a repository of css files stored locally that I copy and paste in and out of the one single user css box, and it is really cumbersome trying to compare one usercss config to another.