Light and Dark mode styles for Twill (twill.io) CMS admin

twill-light-and-dark-mode.css

:root {
    --primary-color-hue: 230;
    --background-darkest: hsl(var(--primary-color-hue), 70%, 30%);
    --background-darker: hsl(var(--primary-color-hue), 20%, 95%);
    --background-normal: hsl(var(--primary-color-hue), 70%, 98%);
    --background-contrast: hsl(var(--primary-color-hue), 90%, 100%);
    --background-highlight: hsl(var(--primary-color-hue), 100%, 98%);
    --border-normal: hsl(var(--primary-color-hue), 30%, 90%);
    --border-highlight: hsl(var(--primary-color-hue), 100%, 95%);
    --body-text-normal: hsl(var(--primary-color-hue), 45%, 55%);
    --body-text-highlight: hsl(var(--primary-color-hue), 100%, 85%);
    --body-text-inverted: hsl(var(--primary-color-hue), 100%, 85%);
}


html {
    background-color: var(--background-darker);
}

body, .body--buckets, .body--buckets .appLoader, .body--custom-page, .body--custom-page .appLoader, .body--dashboard, .body--dashboard .appLoader, .body--form, .body--form .appLoader {
    color: var(--body-text-normal) !important;
    background-color: var(--background-darker);
}

.a17--login {
    background: var(--background-darker) !important;
}
.login__heading--title {
    color: var(--body-text-normal) !important;
    font-weight: 800;
    font-size: 3rem
}
.login__input {
    background-color: var(--background-normal) !important;
    color: var(--body-text-normal) !important;
    border-color: var(--border-normal) !important;
}
.login__label {
    color: var(--body-text-normal);
}
.login__help {
    color: var(--body-text-highlight);
}
.login__button {
    background: var(--background-darkest) !important;
    border-radius: 4px !important;
}
.login__button:hover {
    background: var(--background-normal) !important;
    color: var(--body-text-highlight);
}
.envlabel.envlabel--heading {
    background-color: var(--background-normal) !important;
    color: var(--body-text-normal) !important;
}
.notif--success {
    background-color: hsl(124, 80%, 45%) !important;
    color: hsl(134, 100%, 0%) !important;
}

.button--editor, .button--action {
    border-radius: 4px !important;
}

.button--ghost, .uploader__dropzone .button, .uploader__dropzone {
    border-radius: 4px !important;
}

.header  {
    background-color: var(--background-darkest) !important;
    padding-bottom: 0;
}
.header__item, .header__user a {
    color: var(--body-text-inverted) !important;
}
.header__items+.header__items:before {
    color: var(--body-text-normal) !important;
}
.medialibrary__header, .medialibrary__sidebar {
    background-color: var(--background-contrast) !important;
    border-color: var(--border-normal) !important;
}
.headerSearch__toggle .icon {
    color: var(--body-text-highlight);
}
.activityFeed__empty h4 {
    color: var(--body-text-normal) !important;
}
.overlay__header {
    background-color: var(--background-darkest) !important;
    color: var(--body-text-highlight) !important;
}
.overlay__close {
    color: var(--body-text-highlight) !important;
}

/*nav below header in pages like /users/1/edit*/
.nav {
    background-color: var(--background-normal) !important;
    border-top: 1px solid var(--border-normal) !important;
}
.nav__item.s--on, .nav__item:hover {
    color: var(--body-text-normal) !important;
}
.dashboardSearch, .search--dashboard, .shortcutCreator {
    background-color: var(--background-darkest) !important;
    border-color: var(--border-normal) !important;
}
.search--dashboard .search__input {
    top: 20px;
    border-radius: 6px;
}
.search--dashboard .search__input .form__input {
    background-color: var(--background-normal) !important;
    color: var(--body-text-highlight) !important;
    border-radius: 6px;
}
.search__results, .search__no-result {
    background-color: var(--background-normal) !important;
}

.dropdown__inner {
    background-color: var(--background-contrast) !important;
}
.dropdown .dropdown__content a, .dropdown .dropdown__content button {
    color: var(--body-text-normal) !important;
}
.dropdown .dropdown__content a:hover, .dropdown .dropdown__content button:hover {
    background-color: var(--background-darkest) !important;
}

.box, .box__header {
    background-color: var(--background-darker);
    color: var(--body-text-normal) !important;
    border-color: var(--border-normal) !important;
}

.fieldset--hoverable h3:hover {
    background-color: var(--background-contrast) !important;
    border-bottom: 1px solid var(--border-normal) !important;
}

.titleEditor__title {
    font-size: 1.7rem;
    letter-spacing: .015em;
    margin-bottom: .5rem;
    /*color: var(--background-darkest);*/
}

.f--note {
    color: var(--body-text-normal);
}
.navbar, .form {
    background-color: var(--background-darker);
    border-color: var(--border-normal) !important;
}
.stickyNav {
    background-color: var(--background-contrast) !important;
    height: 100px !important;
}
.stickyNav.sticky__fixedTop {
    background-color: var(--background-highlight) !important;
    height: 70px !important;
}

.fieldset {
    background-color: var(--background-darker) !important;
    border-color: var(--border-normal) !important;
}
.fieldset__header, .switcher {
    background-color: var(--background-normal) !important;
    border: 1px solid var(--border-normal);
}
.switcher__title, .switcher__label {
    color: var(--body-text-normal) !important;
}
.switcher__switcher {
    background-color: var(--background-darkest) !important;
}
.switcher__switcher:after {
    box-shadow: 0 0 2px var(--background-darkest) !important;
}

.block__header, .block__content {
    background-color: var(--background-normal) !important;
    border-color: var(--border-normal) !important;
}
.block__content {
    background-color: var(--background-contrast) !important;
}
.block__counter, button.button--icon {
    background-color: var(--background-darker) !important;
    border-color: var(--border-highlight) !important;
    color: var(--body-text-normal) !important;
}
.block__handle {
    background: repeating-linear-gradient(
        180deg,var(--border-highlight),var(--border-highlight)  2px,transparent 0,transparent 4px) !important;
}
.block__handle::before {
    background: repeating-linear-gradient(
        90deg,var(--background-normal),var(--background-normal) 2px,transparent 0,transparent 4px) !important;
}
.form__field.datePicker__field {
    border-radius: 4px !important;
}
.wysiwyg__editor-inner.ql-container.ql-snow,
.ql-toolbar.ql-snow {
    background-color: var(--background-contrast) !important;
    border-color: var(--border-highlight) !important;
}
.ql-formats>button {
    color: var(--body-text-normal) !important;
}
.ql-snow .ql-picker {
    color: var(--body-text-normal) !important;
}
.ql-stroke {
    stroke: var(--body-text-normal) !important;
}
.ql-fill {
    fill: var(--body-text-normal) !important;
}
.input__label {
    color: var(--body-text-normal) !important;
}
.form__input, .input__field {
    border-radius: 4px !important;
}

.a17 .vselect__field .dropdown-toggle {
    color: var(--body-text-normal) !important;
    border-color: var(--border-normal) !important;
    border-radius: 4px;
}
.dropdown.v-select.searchable .selected-tag {
    color: var(--body-text-normal) !important;
    background-color: var(--background-highlight) !important;
}
.a17 .vselect--multiple .selected-tag .close {
    background-color: transparent;
    border: 1px solid var(--border-normal);
    color: var(--body-text-normal) !important;
}
.a17 .vselect--multiple .selected-tag .close:hover {
    background-color: var(--background-darkest) !important;
}
.a17 .vselect--multiple .selected-tag .close span {
    display: inline-block;
    position: relative;
    top: -1px
}
.a17 .vselect--multiple .selected-tag .close:hover span {
    color: var(--body-text-highlight) !important;
}
.singleselector--grid, .singleselector__item  {
    border-color: var(--border-normal) !important;
}
.media, .media__edit, .media__imgCentered, .media__name strong {
    background-color: var(--background-normal) !important;
    color: var(--body-text-highlight) !important;
    border-color: var(--border-normal) !important;
}
.media__actions, .buttonbar a, .buttonbar button {
    background-color: var(--background-normal) !important;
    color: var(--body-text-highlight) !important;
    border-color: var(--border-normal) !important;
}
.buttonbar a:hover, .buttonbar button:hover {
    background-color: var(--background-highlight) !important;
    color: var(--body-text-highlight) !important;
}

.singleselector__bg {
    background-color: var(--background-contrast) !important;
}


.dropdown-menu, .dropdown-menu li a {
    background-color: var(--background-contrast) !important;
    color: var(--body-text-normal) !important;
    border-color: var(--border-normal) !important;
}
.dropdown-menu li a:hover {
    background-color: var(--background-darker) !important;
    color: var(--body-text-highlight) !important;
}
.accordion {
    background-color: var(--background-contrast) !important;
    color: var(--body-text-normal) !important;
    border-color: var(--border-normal) !important;
}
.accordion__trigger, .accordion__value, .publisher__item {
    color: var(--body-text-normal) !important;
    border-color: var(--border-normal) !important;
}
.accordion__trigger:focus, .accordion__trigger:hover {
    background-color: var(--background-darkest) !important;
    color: var(--body-text-highlight) !important;
}
.accordion__trigger:focus, .accordion__trigger:hover {
    background-color: var(--background-darkest) !important;
    color: var(--body-text-highlight) !important;
}
.accordion__list {
    border-color: var(--border-normal) !important;
}
.revaccordion__item a:focus, .revaccordion__item a:hover {
    color: var(--body-text-highlight) !important;
    background-color: var(--background-darkest) !important;
}
.revaccordion__author, .revaccordion__datetime {
    color: var(--body-text-normal) !important;
}
.revaccordion__item a:focus .revaccordion__author,
.revaccordion__item a:focus .revaccordion__datetime,
.revaccordion__item a:hover .revaccordion__author,
.revaccordion__item a:hover .revaccordion__datetime {
    color: var(--body-text-highlight) !important;
}

.tag {
    background-color: var(--background-highlight) !important;
    color: var(--body-text-normal) !important;
}
.publisher__wrapper {
    color: var(--body-text-normal) !important;
    background-color: var(--background-normal) !important;
    border-color: var(--border-normal) !important;
}
.modal__window {
    color: var(--body-text-normal) !important;
    background-color: var(--background-normal) !important;
    border-color: var(--border-normal) !important;
}
.modal__header, .modal__close {
    background-color: var(--background-darkest) !important;
    color: var(--body-text-highlight) !important;
}
.fieldset__content>hr {
    background-color: var(--border-normal) !important;
}
.fieldset.s--open {
    background-color: var(--background-normal);
}
.listing__nav {
    background-color: var(--background-darker);
    border-bottom: 1px solid var(--border-normal);
}

.datatable__table, .tablerow {
    border: none;
}

.tablecell {
    color: var(--body-text-normal);
}
.tablecell--sticky {
    background: linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--background-subdued) 25%) !important;
}

.f--link-underlined--o {
    color: var(--body-text-normal);
}

.form__input::placeholder {
    color: var(--body-text-normal) !important;
}
.form__input:-ms-input-placeholder {
    color: var(--body-text-normal) !important;
}
.form__input::-ms-input-placeholder {
    color: var(--body-text-normal) !important;
}
.a17spinner {
    background-color: var(--background-contrast)
}
.app--form .a17spinner {
    background-color: var(--background-contrast)
}
.s--in-editor .overlay .a17spinner {
    background-color: var(--background-darkest);
}



@media (prefers-color-scheme: dark) {
    :root  {
        --primary-color-hue: 210;
        --background-darkest: hsl(var(--primary-color-hue), 100%, 5%);
        --background-darker: hsl(var(--primary-color-hue), 100%, 9%);
        --background-normal: hsl(var(--primary-color-hue), 100%, 11%);
        --background-contrast: hsl(var(--primary-color-hue), 85%, 15%);
        --background-highlight: hsl(var(--primary-color-hue), 100%, 25%);
        --border-normal: hsl(var(--primary-color-hue), 100%, 20%);
        --border-highlight: hsl(var(--primary-color-hue), 85%, 35%);
        --body-text-normal: hsl(var(--primary-color-hue), 35%, 55%);
        --body-text-highlight: hsl(var(--primary-color-hue), 50%, 75%);
    }
    .login__button {
        background: var(--background-highlight) !important;
    }

    .datatable__table, .tablerow {
        border-color: var(--border-normal) !important;
    }

    .tablecell {
        background-color: var(--background-normal) !important;
        color: var(--body-text-normal);
    }

    /*----Edit page*/
    .titleEditor__title {
        color: var(--body-text-highlight);
    }

    .blocks__item, .block__header, .block__content {
        background-color: var(--background-contrast) !important;
        border-color: var(--border-normal) !important;
    }
    .a17 .ql-editor {
        background-color: var(--background-contrast) !important;
        color: var(--body-text-normal) !important;
        border-color: var(--border-normal) !important;
    }
    .button--editor, .button--action {
        background-color: var(--background-highlight) !important;
        border-color: var(--border-highlight) !important;
    }

    .button--ghost, .uploader__dropzone .button, .uploader__dropzone {
        border-color: var(--border-highlight) !important;
        color: var(--body-text-highlight) !important;
    }

    .editor__sidebar, .editorSidebar__actions {
        background-color: var(--background-darker) !important;
        color: var(--body-text-normal) !important;
    }
    .editorSidebar__button, .editorSidebar__button .icon {
        background-color: var(--background-darkest) !important;
        color: var(--body-text-highlight) !important;
        border-color: var(--border-normal) !important;
    }
    .form__input, .input__field, .form__field.datePicker__field {
        background-color: var(--background-darker) !important;
        color: var(--body-text-normal) !important;
        border-color: var(--border-normal) !important;
    }
    input.flatpickr-input.flatpickr-mobile {
        color: var(--body-text-normal) !important;
    }
    .flatpickr-calendar, .flatpickr-day, .flatpickr-time input, .flatpickr-weekday, .flatpickr-month, .flatpickr-am-pm {
        background-color: var(--background-highlight) !important;
        color: var(--body-text-normal) !important;
    }
    .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
        border-color: var(--border-highlight) !important;
    }
    .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
        color: var(--body-text-highlight) !important;
    }
    .singleselector__label {
        color: var(--body-text-highlight) !important;
    }
    .form__input:focus, .input__field:focus {
        color: var(--body-text-highlight) !important;
        border-color: var(--border-highlight) !important;
    }
    .fieldset--hoverable h3:hover {
        background-color: var(--background-darkest) !important;
    }
    .secondarynav__item a, .box__filter a {
        background-color: var(--background-normal);
        border: 1px solid transparent;
        color: var(--body-text-highlight);
    }
    .secondarynav__item.s--on a, .box__filter a.s--on {
        color: var(--body-text-normal);
        border: 1px solid var(--border-highlight);
        background-color: transparent;
    }
    .secondarynav__item:hover a, .box__filter a:hover {
        background-color: var(--background-highlight) !important;
        color: var(--body-text-highlight);
    }
    .dropdown.v-select.searchable .selected-tag {
        color: var(--body-text-highlight) !important;
        background-color: var(--background-highlight) !important;
    }
    .a17 .vselect__field .dropdown-toggle {
        background-color: var(--background-darker) !important;
    }
    /*nav below header in pages like /users/1/edit*/
    .nav__item.s--on, .nav__item:hover {
        color: var(--body-text-highlight) !important;
    }
    .switcher__switcher {
        background-color: var(--background-highlight) !important;
    }


}

A simple solution to having this globally is to override only the head view from Twill.
this file: vendor/area17/twill/views/partials/head.blade.php
to: resources/views/vendor/twill/partials/head.blade.php