Make themes more readable, especially clickable links and images

isaac

Link elements should be themed so they are distinct. Google gets this right:

Kagi can get this right with custom css:

But by default, kagi does not get this right:

Additionally, images should be slightly dimmed in dark mode. This makes them less blinding, especially when they are primarily white. The background of dark mode should be darker, to make it contrast more with the dimmer content.
My full custom css is as follows, I use it with the royal blue theme because it is somewhat easier on the eyes compared to moon dark:

:root {
  --custom-theme-link-color: #ABC2FF;
  --custom-theme-link-visited-color: #A68DD2;
  --background-color: hsl(233, 18%, 14%);
}

div.app-content-box:not(.app-nav, .top-panel-box) a, a#unique_results_toggle {
  color: var(--custom-theme-link-color);
}

div.app-content-box:not(.app-nav, .top-panel-box) a:visited {
  color: var(--custom-theme-link-visited-color);
}

div.main-content:not(.app-nav, .top-panel-box) a, a#unique_results_toggle, .__title-text._0_TITLE {
  color: var(--custom-theme-link-color);
}

.newsResultHeader .newsResultTitle a {
  color: var(--custom-theme-link-color) !important;
}

div.inlineHeader, div.num_results, a._0_item, label._0_item {
  color: var(--search-result-content-text);
}

div.videoResultThumbnail img, .widgetItemThumbnail {
  filter: brightness(85%);
}

This custom css:

dims images
makes links look like links
dims the background

Vlad

We can take some pointers form your suggestion. But the reason we have multiple themes to choose from as well as custom CSS is because design tastes are different.