Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Light and Dark mode styles for Twill (twill.io) CMS admin
: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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment