Kenmei Dark Mode by kast

/* ==UserStyle==
@name         Kenmai Dark Mode
@version      20230212.23.29
@namespace    ?
==/UserStyle== */

@-moz-document domain("kenmei.co") {
:root {
    --bg-color: #2D394A;
    --bg-color-dark: #1D2530;
    --topbar-bg: #121722;
    --accent-color: #203566;
    --secondary-color: #1C3B39;
    --terciary-color: #FDBB37;
    --border-color: #2B323F;
    --checkbox-bg: #313947;
    --input-bg: #313947;
}

nav {
    background-color: var(--topbar-bg) !important;
}

.desktop-link {
    color: #ccc !important;
}

.router-link-active.desktop-link,
.desktop-link:hover {
    color: white !important;
    border-color: var(--terciary-color) !important;
    border-bottom-width: 3px;
}

.h-screen > div.min-h-full {
    background-color: var(--bg-color) !important
}

.top-drawer,
footer {
    background-color: var(--bg-color-dark) !important;
    border-color: #1F2834 !important;
}

.btn-upgrade {
    display: none !important;
}

.the-dashboard {
    background-color: var(--bg-color-dark) !important;
    border-color: var(--border-color) !important;
    color: white !important;
}

.the-dashboard-header,
.the-dashboard-footer {
    border-color: var(--border-color) !important;
    color: white !important;
}

.the-dashboard-header .text-sm,
.the-dashboard-footer .text-sm {
    color: white !important;
}

.the-dashboard ul .row-body * {
    color: white;
}

.success {
    background-color: var(--secondary-color) !important;
}

.success .truncate {
    color: #3AC98E !important;
}

.chapter {
    background-color: var(--accent-color) !important;
}

.chapter .truncate {
    color: #7FAFEB !important;
}

[type=checkbox],
[type=radio] {
    background-color: var(--checkbox-bg) !important;
    border-color: var(--checkbox-bg) !important;
}

.list-row__regular[data-v-ccbaa280]:hover,
.list-row__selected {
    background-color: #263140 !important;
    cursor: pointer;
}

.list-button,
.options,
.profile-dropdown-wrapper {
    background-color: var(--input-bg) !important;
    color: white !important;
    border: 0 !important;
}

.options li,
.profile-link {
    color: white !important;
}

.options-active {
    background-color: #2A313C !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

.btn-primary {
    background-color: var(--accent-color) !important;
    color: #7FAFEB !important;
    border: 0 !important;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    color: #3AC98E !important;
    border: 0 !important;
}

.unread-indicator {
    background-color: var(--terciary-color) !important;
}

.border-gray-100 {
    border-color: var(--border-color) !important;
}
img[alt="logo"] {
    content: url("https://www.kenmei.co/assets/dark-logo.f43107a0.svg");
}

.settings div {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.select-button {
    border-color: transparent !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(209 213 219 / var(--tw-text-opacity)) !important;
}

.chapter__none {
    color: var(--terciary-color) !important;
    background-color: rgba(253, 187, 55, 0.4) !important;
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #202834 !important;
}

.list-row__regular:hover {
    background-color: #263140 !important;
}

button {
    background-color: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}

.button__primary:hover {
    color: white !important;
}

.modal-body,
.bg-white,
.modal-actions,
.multiselect .vs__dropdown-toggle,
.vs__dropdown-menu,
.options li:hover {
    background-color: var(--bg-color-dark) !important;
    color: white !important;
}

label,
.vs__selected,
.vs__dropdown-option {
    color: white !important;
}

.multiselect .vs__dropdown-option:hover,
.multiselect .vs__dropdown-option--highlight {
    background-color: var(--bg-color) !important;
    color: white !important;
}

input {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

.vfm--overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
}