A retro-inspired hacker theme featuring monospace typography, vibrant pink highlights, and a minimalist aesthetic. Clean styling allows content to take focus while pops of color add visual interest. (Default Light Theme: Fine Print. Default Dark Theme: Moon Dark)

Kagi_hacker-monokai_theme.css

/* Default light theme variables */
:root {
  --color-scheme: light;
  --app-bg: #ffffff; /* Light theme background colour */
  --search-result-title: var(--color-primary);
  --result-item-title-border: var(--color-primary);
  --primary-visited: var(--cheatsh_ef30);
}

.theme_moon_dark {
  --color-scheme: dark;
  --app-bg: var(--cheatsh_ef232);
  --primary-visited: var(--cheatsh_ef123);
}

/* Automatic dark theme override */
@media (prefers-color-scheme: dark) {
  .theme_moon_dark_conditional {
    --app-bg: var(--cheatsh_ef232); /* Dark theme background colour */
    --primary-visited: var(--cheatsh_ef123);
  }
}

/* Applying the background colour */
body {
  background-color: var(--app-bg);
  font-family: monospace;
}

/* Style search result titles */

.__sri-title .__sri_title_link {
  color: var(--search-result-title);
  border-bottom: 1px solid var(--result-item-title-border);
  font-size: 1.25rem;
}
.__sri-title .__sri_title_link:visited {
  color: var(--primary-visited);
  border-bottom: 1px solid var(--primary-visited);
}
.__sri-title .__sri_title_link:hover {
  color: #c63563;
  border-bottom: 1px solid #c63563;
}

/* Style buttons */
.btn.--primary {
  background-color: #191919;
  border: 1px solid #191919;
  color: #ffff;
  transition: ease 150ms;
}

.btn.--primary:hover {
  background-color: #191919;
  color: #ffff;
  border: 1px solid #191919;
}

/* Hover styles */
.btn.--primary:hover {
  background-color: #191919;
  border: 1px solid #c63563;
  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 #c63563;
  opacity: 0.6;
}

/* Hide unused elements */
.doggo_sit_a {
  display: none;
}

/* Style category buttons */
.landing-category-select button.n_se.--active,
.landing-category-select button.n_se:hover {
  border-bottom: 2px solid var(--primary-visited);
}

/* Style dropdown on hover */
.dropdown .dd-toggle-label:hover {
  color: #c63563;
}

/* Style summary link */
._0_summarize_link a {
  color: var(--color_link);
}
._0_summarize_link a:hover {
  color: #c63563;
}

/* Style dropdown items on hover */
.k_ui_dropdown .k_ui_dropdown_first_item:hover {
  color: #c63563;
}

/* Style all links on hover */
a:hover {
  color: #c63563;
}

/* Style active search modes */

._0_d_info_ranking.k_ui_btn_group .search_mode_box_s input:checked + a.k_ui_btn,
._0_sri-w-highlight .search_mode_box_s a.searchResultAnswer,
.search_mode_box_s ._0_d_info_ranking.k_ui_btn_group input:checked + a.k_ui_btn,
.search_mode_box_s ._0_sri-w-highlight a.searchResultAnswer,
.search_mode_box_s a.--active,
.search_mode_box_s a._0_sri-w-highlight.box,
.search_mode_box_s a.box:hover {
  background-color: var(--color-primary);
  border: #c63563;
  color: var(--color-primary);
}

._0_results_summary_links ol a:hover {
  color: #c63563 !important;
}

.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
  background-color: #c63563;
}

.search_mode_toggle i.oSea:hover {
  background-color: transparent !important;
  color: var(--color-primary) !important;
}

.search_mode_toggle i.oSea {
  background-color: transparent;
  color: var(--color-primary);
}
.search_mode_toggle i.oSea:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem #c63563;
  opacity: 0.6;
}
.land_adv_search_btn:hover {
  color: #c63563 !important;
}
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
  background: #7a6af4;
  background: linear-gradient(90deg, #c63563 0, #c63563 100%);
  box-shadow: 0 0 0 1px #c63563;
}
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar:after {
  left: calc(100% - var(--bnt-width) - 2px);
  background-color: var(--white);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  border: 1px solid #c63563;
}
/* Hover effect using :after for mode 7 */
.search_mode_toggle i.o2rb.mode_7:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem var(--kagi-purple);
  opacity: 0.6;
}

/* Hover effect using :after for mode 5 */
.search_mode_toggle i.o2rb.mode_5:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem var(--kagi-orange);
  opacity: 0.6;
}

/* Hover effect using :after for mode 4 */
.search_mode_toggle i.o2rb.mode_4:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem var(--kagi-graphite-ia);
  opacity: 0.6;
}

/* Hover effect using :after for mode 6 */
.search_mode_toggle i.o2rb.mode_6:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem var(--kagi-sky-i);
  opacity: 0.6;
}

.k_ui_toggle_switch input:checked ~ .k_ui_toggle_switch_bar {
  background: #7a6af4;
  background: linear-gradient(90deg, #c63563 0, #c63563 100%);
  box-shadow: 0 0 0 1px #c63563;
}

.ico_ia.mode_7:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem var(--kagi-purple);
  opacity: 0.6;
}

.ico_ia.mode_5:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem var(--kagi-orange);
  opacity: 0.6;
}

.ico_ia.mode_4:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem var(--kagi-graphite-ia);
  opacity: 0.6;
}

.ico_ia.mode_6:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 1rem 0.5rem var(--kagi-sky-i);
  opacity: 0.6;
}

.search_mode_box_s a:hover {
  background-color: transparent;
  color: var(--color-primary);
}