trilium/packages/share-theme/src/styles/navbar/header.css

#site-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#site-header > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 27px; /* 32 */
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--text-primary);;
  transition: 0.4s;
    border-radius: 34px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 19px; /* 26px */
  width: 19px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
    border-radius: 50%;
    z-index: 2;
}

input:checked + .slider {
  background-color: var(--background-highlight);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--background-highlight);
}

input:checked + .slider:before {
  transform: translateX(33px); /* whole width - slider width - 8px padding*/
}


.theme-selection {
    display: flex;
    align-items: center;
   justify-content: space-between;
}

.theme-selection label {
    position: relative;
}

.dark-icon, .light-icon {
    display: flex;
    opacity: 0;
    transition: opacity 400ms ease, color 400ms ease;
    pointer-events: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 24px;
}

/*     input ~ .dark-icon {
    display: none;
} */

input:not(:checked) ~ .light-icon {
    opacity: 1;
}

input:checked ~ .dark-icon {
    opacity: 1;
}

/*     input:checked ~ .light-icon {
    display: none;
} */


.dark-icon {
    left: 5px;
    color: var(--text-primary);
}

.light-icon {
    right: 5px;
    color: var(--background-highlight);
}


.search-item {
    display: flex;
    align-items: center;
    position: relative;
}

.search-input {
    color: var(--text-primary);
    background: var(--background-highlight);
    outline: 0;
    border: 0;
    flex: 1;
    padding: 5px 5px 5px 32px;
    width: 200px;
    border-radius: 6px;
}

.search-icon {
    display: flex;
    color: var(--text-primary);
    position: absolute;
    width: 20px;
    left: 5px;
}