Skip to content

Instantly share code, notes, and snippets.

@jamesjlyons
Last active April 7, 2024 12:38
Show Gist options
  • Save jamesjlyons/26682982319ca84b7bee991eb158ce49 to your computer and use it in GitHub Desktop.
Save jamesjlyons/26682982319ca84b7bee991eb158ce49 to your computer and use it in GitHub Desktop.
A cozy theme for Kagi Search. Be sure to set the default Kagi themes to "Calm Blue" and "Moon Dark" for the themes to apply properly.
:root {
--sand1: hsl(50, 20%, 99%);
--sand2: hsl(60, 7.7%, 97.5%);
--sand3: hsl(59, 6.5%, 95.1%);
--sand4: hsl(58, 6.1%, 92.9%);
--sand5: hsl(57, 6%, 90.7%);
--sand6: hsl(56, 5.9%, 88.4%);
--sand7: hsl(55, 5.9%, 85.2%);
--sand8: hsl(51, 6%, 77.1%);
--sand9: hsl(50, 2%, 55.7%);
--sand10: hsl(55, 1.7%, 51.9%);
--sand11: hsl(50, 2%, 43.1%);
--sand12: hsl(50, 6%, 10%);
--amber1: hsl(39, 70%, 99%);
--amber2: hsl(40, 100%, 96.5%);
--amber3: hsl(44, 100%, 91.7%);
--amber4: hsl(43, 100%, 86.8%);
--amber5: hsl(42, 100%, 81.8%);
--amber6: hsl(38, 99.7%, 76.3%);
--amber7: hsl(36, 86.1%, 67.1%);
--amber8: hsl(35, 85.2%, 55.1%);
--amber9: hsl(39, 100%, 57%);
--amber10: hsl(35, 100%, 55.5%);
--amber11: hsl(30, 100%, 34%);
--amber12: hsl(20, 80%, 17%);
--background-color: var(--sand2);
--color-primary: var(--sand12);
--search-result-title: var(--color-primary);
--search-result-title-hover: var(--color-primary);
--result-item-title-border_hover: var(--color-primary);
--domain-rank-icon-color-normal: var(--sand7);
--search-result-date-bg: var(--sand3);
--search-result-content-text: var(--sand11);
--inline-domain-tag-bg: var(--sand3);
--result-item-title-border: var(--background-color);
--color-primary-dim_5: var(--sand11);
--inline-widget-bg: var(--sand3);
--search-result-date-new: var(--amber11);
--search-result-date-new-bg: var(--amber3);
--related-item-bg: var(--sand3);
--search-result-gap: 40px;
--m_sri_gap_color: var(--background-color);
}
@media (prefers-color-scheme: dark) {
:root {
--sand1: hsl(61, 2%, 8.3%);
--sand2: hsl(60, 3.7%, 10.6%);
--sand3: hsl(58, 3.7%, 13.1%);
--sand4: hsl(57, 3.6%, 15.3%);
--sand5: hsl(56, 3.7%, 17.4%);
--sand6: hsl(55, 3.7%, 19.9%);
--sand7: hsl(53, 3.7%, 23.6%);
--sand8: hsl(50, 3.8%, 30.6%);
--sand9: hsl(50, 4%, 42.7%);
--sand10: hsl(52, 3.1%, 48.3%);
--sand11: hsl(50, 4%, 61.8%);
--sand12: hsl(56, 4%, 92.8%);
--amber1: hsl(36, 100%, 6.1%);
--amber2: hsl(35, 100%, 7.6%);
--amber3: hsl(32, 100%, 10.2%);
--amber4: hsl(32, 100%, 12.4%);
--amber5: hsl(33, 100%, 14.6%);
--amber6: hsl(35, 100%, 17.1%);
--amber7: hsl(35, 91%, 21.6%);
--amber8: hsl(36, 100%, 25.5%);
--amber9: hsl(39, 100%, 57%);
--amber10: hsl(43, 100%, 64%);
--amber11: hsl(39, 90%, 49.8%);
--amber12: hsl(39, 97%, 93.2%);
}
}
._0_queryInfo {
margin-bottom: 24px;
}
.domain-favicon {
display: none;
}
.crisp-edges {
image-rendering: optimizespeed;
image-rendering: crisp_edges;
}
._0_img-results .item img.fade {
opacity: 0;
transition: none;
}
.quick-search-btn {
transition: transform 0.4s ease-in-out;
}
/* Hide the doggo mascot, clouds, beta tag, and footer */
.doggo-sit,
.cloud_1,
.cloud_2,
.app-beta-tag,
.footer {
display: none;
}
body {
font-family: Inter, system-ui, sans-serif;
}
#help_modal .section-title,
.btn.--lg,
.button-primary,
.font-lufga,
.quick-settings-header__title,
.search-form #searchFormSubmitBtn,
.search-form .search-input-title,
.inlineHeader {
font-family: Inter, system-ui, sans-serif;
}
body {
color: var(--sand12);
background-color: var(--background-color);
}
.btn.--yellow {
background-color: var(--sand12);
border: 1px solid var(--sand12);
color: var(--sand1);
transition: ease 150ms;
}
.btn.--yellow:hover {
background-color: var(--sand11);
border: 1px solid var(--sand11);
}
#quickSettingsOpenBtn a {
color: var(--sand11);
background-color: var(--sand2);
border: 0px solid var(--sand7);
border-radius: 4px;
}
.search-form .search-input {
background-color: var(--sand3);
border-radius: 16px;
}
.search-form .search-input-container {
border: 1px solid var(--sand7);
background-color: var(--sand3);
box-shadow: 0 0 0 0px var(--sand4);
border-radius: 16px;
/* fix input text centering */
height: 50px;
transition: box-shadow 150ms;
}
.search-form .search-input-container:focus-within {
border: 1px solid var(--sand8);
box-shadow: 0 0 0 3px var(--sand4);
}
.search-form .search-form-icons {
background-color: var(--sand3);
}
.app-header .search-form .spt {
background: linear-gradient(90deg, transparent 0, var(--sand3) 100%);
}
.search-form .auto_suggestions {
border: 1px solid var(--sand8);
padding-top: 24px;
}
/* auto suggest on result page */
.auto_suggestions {
background-color: var(--sand3);
border-top: 0 !important;
}
.auto_suggestions .auto_item.highlighted {
background-color: var(--sand4);
}
.auto_suggestions .auto_suggestions_in {
border-top: 0px solid var(--sand7);
}
.auto_suggestions .auto_suggestions_lenses {
border-top: 1px solid var(--sand4);
}
/* auto suggest on landing page */
.search-form .autosugg-landing {
top: 108px;
}
.search-form {
align-items: center;
}
.landing-category-select {
width: auto;
position: absolute;
transform: translate(-50%, 50px);
left: 57%;
}
.landing_cat_buttons {
background-color: transparent;
}
._0_sri-highlight:before {
background: var(--amber9);
}
div.app-content-box:not(.app-nav, .top-panel-box) a:visited,
div.main-content:not(.app-nav, .top-panel-box) a:visited {
color: var(--sand11);
}
.related-items a {
color: var(--sand12);
}
.related-items a:hover {
background-color: var(--sand4);
color: var(--sand12);
}
._0_d_info_ranking.k_ui_btn_group input:checked + .box.k_ui_btn:before,
.box.--active:before,
.box._0_sri-w-highlight:before,
.box:hover:before {
border: 3px solid var(--amber7);
}
.k_ui_dropdown_data_list {
background-color: var(--sand3);
border: 1px solid var(--sand7);
}
.k_ui_dropdown_data_list a:hover {
background-color: var(--sand4);
}
/* menu button results page */
#accountContainer .menu-icon a {
color: var(--sand10);
border: 0px solid var(--sand7);
}
/* dropdown */
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li.__hover,
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:focus-visible,
.k_ui_dropdown_data_list .list_items > ._0_k_ui_dropdown_li:hover,
.k_ui_dropdown_data_list .list_items > a.__hover,
.k_ui_dropdown_data_list .list_items > a:focus-visible,
.k_ui_dropdown_data_list .list_items > a:hover,
.k_ui_dropdown_data_list .list_items > div.__hover,
.k_ui_dropdown_data_list .list_items > div:focus-visible,
.k_ui_dropdown_data_list .list_items > div:hover {
background-color: var(--sand5);
color: var(--dd-hover-color);
}
/* select button */
.k_ui_btn_group {
background-color: var(--sand3);
border: 1px solid var(--sand7);
border-radius: 8px;
display: flex;
font-size: 0.875rem;
}
.k_ui_btn_group .k_ui_btn:hover {
background-color: var(--sand4);
color: var(--sand12);
}
._0_d_info_ranking.k_ui_btn_group input:checked + .k_ui_btn,
.k_ui_btn_group .k_ui_btn.--active,
.k_ui_btn_group .k_ui_btn._0_sri-w-highlight.box {
background-color: var(--sand5);
color: var(--sand12);
}
.ranked-box-wrapper {
max-width: 420px;
background-color: var(--sand3);
border-radius: 5px;
width: 100vw;
box-shadow: 0 0 20px var(--ranked-box-shadow);
}
.d-info-box-title-header.--trackers {
background: linear-gradient(90deg, var(--amber10) 0.72%, var(--amber9) 100%);
}
.d-info-domain-title {
color: hsl(50, 6%, 10%);
text-shadow: none;
}
.d-info-body {
flex-wrap: wrap;
background-color: var(--sand2);
border-radius: 5px;
}
/* video */
.videoResultItem {
background-color: var(--sand2);
}
/* quick settings */
.quick-settings {
position: fixed;
transform: translateX(100%);
transition: transform 0.15s ease-in-out;
top: 0;
right: 0;
max-width: 450px;
height: 100%;
z-index: 102;
background-color: var(--sand2);
display: flex;
flex-direction: column;
border-left: 1px solid var(--sand6);
overflow: auto;
}
.quick-settings-region__dropdown {
width: 100%;
display: block;
background-color: var(--sand3);
border-radius: 5px;
}
.quick-settings-region__dropdown:hover {
background-color: var(--sand4);
}
.dropdown.dd-b .dd-list,
.dropdown.dd-b .dd-toggle-label,
.dropdown.dd-b .dd-toggle-label:before {
border: 1px solid var(--sand6);
}
.quick-settings-region__dropdown .dd-list {
background-color: var(--sand3) !important;
color: var(--color-primary) !important;
}
.quick-settings-region__dropdown .dd-list li.--hover,
.quick-settings-region__dropdown .dd-list li:hover {
background-color: var(--sand4) !important;
color: var(--color-primary) !important;
}
.dropdown .dd-list input[type="search"] {
background-color: var(--sand2);
border: 1px solid var(--sand4);
}
.dropdown .dd-list li.--hover,
.dropdown .dd-list li:hover {
color: var(--color-primary);
background-color: var(--sand3);
}
.dropdown .dd-toggle-label {
width: 100%;
height: inherit;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
color: var(--color-primary);
background-color: var(--sand4);
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
}
#mm-image .custom-date-range .input label input {
background-color: var(--sand3);
border: 1px solid var(--sand8);
border-radius: 8px;
}
.k_ui_toggle_switch.--enabled .k_ui_toggle_switch_bar {
background-color: var(--color-primary);
}
.land_adv_search_btn {
text-decoration: none;
bottom: -4px;
right: 0;
transform: translateY(100%);
background-color: unset;
font-size: 0.875rem;
color: var(--sand8);
}
.search-form {
margin-left: auto;
margin-right: auto;
}
footer {
background-color: var(--sand4);
border-top: 1px solid var(--sand7);
}
/* assistant beta */
.search_mode_toggle i.oSea {
background-color: var(--sand12);
border: 1px solid var(--sand12);
color: var(--sand1);
transition: ease 150ms;
}
#search_mode_toggle:checked
+ .search-form
.search_mode_box
.search_mode_toggle
i.o2rb {
background-color: var(--sand12);
border: 1px solid var(--sand12);
color: var(--sand1);
transition: ease 150ms;
}
.search_mode_toggle i:hover {
background-color: var(--sand12) !important;
border: 1px solid var(--sand12) !important;
color: var(--sand1) !important;
}
.search-form .search_area {
border: none;
}
/*transitions*/
.auto_suggestions {
transition: transform 300ms cubic-bezier(1, 0, 0, 1);
transform: scaleY(0);
}
.ranked-box-overlay {
position: absolute;
z-index: 1001;
visibility: hidden;
opacity: 0;
bottom: 0;
transform: scale(0.8);
transform-origin: left center;
transition: opacity 300ms cubic-bezier(1, 0, 0, 1),
transform 300ms cubic-bezier(1, 0, 0, 1),
left 300ms cubic-bezier(1, 0, 0, 1), top 300ms cubic-bezier(1, 0, 0, 1);
}
@VapidLinus
Copy link

Here's a modified version of this theme that respects the Kagi dark-mode setting (light/dark/system) instead of only the system setting:
https://gist.github.com/VapidLinus/e835b88f12f1cd07f73b03d4643d6cef/revisions#diff-b47e4ca73e8e066644fa670d7691c909d73f69ba923a37b94802d75e018d5080

The key is to use .theme_calm_blue {...} and .theme_moon_dark {...} to differentiate between the themes instead of @media (prefers-color-scheme: dark) {...}.

@jamesjlyons
Copy link
Author

Here's a modified version of this theme that respects the Kagi dark-mode setting (light/dark/system) instead of only the system setting: https://gist.github.com/VapidLinus/e835b88f12f1cd07f73b03d4643d6cef/revisions#diff-b47e4ca73e8e066644fa670d7691c909d73f69ba923a37b94802d75e018d5080

The key is to use .theme_calm_blue {...} and .theme_moon_dark {...} to differentiate between the themes instead of @media (prefers-color-scheme: dark) {...}.

Thanks for this! 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment