Last active
February 14, 2019 18:31
-
-
Save NickCraver/602e87f412fefdc4de98c72e418cb96a to your computer and use it in GitHub Desktop.
A quick and dirty re-purpose of UniFi dark elements to make them global.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // A JS example that shows they're well on their way to a dark theme: | |
| document.body.classList.add("ubnt-mod-dark"); | |
| document.querySelectorAll(".appTable").forEach(i => i.classList.add("appTable--dark")); | |
| document.querySelectorAll(".ubntPanelContent").forEach(i => i.classList.add("appForm--dark")); | |
| document.querySelectorAll(".appMainButtonGroup").forEach(i => i.classList.add("appMainButtonGroup--dark")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --ubnt-color-text-primary: #a4a7b5; | |
| --ubnt-color-text-secondary: #7e8190; | |
| --ubnt-color-text-tertiary: #525461; | |
| --ubnt-color-background-primary: #1c1e2d; | |
| --ubnt-color-background-secondary: #333543; | |
| --ubnt-color-background-tertiary: #242635; | |
| --ubnt-color-border-primary: #333543; | |
| --ubnt-color-border-secondary: #525461; | |
| --ubnt-color-border-tertiary: #242635; | |
| --accordion-border-color: #333543; | |
| --block-row-font-color: #7e8190; | |
| --block-row-divider-color: #333543; | |
| --block-title-font-color: #fff; | |
| --block-section-font-color: #7e8190; | |
| --block-small-section-font-color: #a4a7b5; | |
| --block-hover-box-shadow: 0 0 0 1px #006fff; | |
| --block-hover-background-color: rgba(0, 111, 255, .05); | |
| --block-hover-section-with-icons-background-color: #242635; | |
| --block-selected-background-color: rgba(0, 111, 255, .2); | |
| --block-selected-border-color: rgba(0, 111, 255, .2); | |
| --button-primary-font-color: #fff; | |
| --button-primary-background-color: #006fff; | |
| --button-primary-hover-background-color: #1a7dff; | |
| --button-primary-active-background-color: #0266e9; | |
| --button-secondary-font-color: #7e8190; | |
| --button-secondary-background-color: #242635; | |
| --button-secondary-border-color: #525461; | |
| --button-secondary-hover-border-color: #7e8190; | |
| --button-secondary-active-border-color: #525461; | |
| --button-icon-color: #c2c4ce; | |
| --button-hover-icon-color: #a4a7b5; | |
| --button-active-icon-color: #a4a7b5; | |
| --button-text-primary-font-color: #7e8190; | |
| --button-text-secondary-font-color: #525461; | |
| --button-group-player-controls-background-color: #151f30; | |
| --button-group-player-controls-icon-color: #525461; | |
| --button-group-player-controls-hover-icon-color: #7e8190; | |
| --button-icon-neutral-background-color: #2f313f; | |
| --button-icon-neutral-hover-background-color: #4f515d; | |
| --calendar-panel-group-border-color: #333543; | |
| --calendar-grid-weekdays-border-color: #333543; | |
| --card-title-color: #a4a7b5; | |
| --chip-background-color: #525461; | |
| --chip-count-border-color: #fff; | |
| --chip-count-font-color: #fff; | |
| --chip-font-color: #c2c4ce; | |
| --chip-icon-font-color: #fff; | |
| --chip-image-border-color: #fff; | |
| --dropdown-background-color: #242635; | |
| --dropdown-border-color: #333543; | |
| --dropdown-font-color: #a4a7b5; | |
| --dropdown-hover-font-color: #7e8190; | |
| --filter-item-font-color: #a4a7b5; | |
| --form-box-border-color: #a4a7b5; | |
| --form-box-focus-font-color: #c2c4ce; | |
| --form-box-font-color: #c2c4ce; | |
| --form-box-autofill-font-color: #7e8190; | |
| --form-secondary-box-background-color: #333543; | |
| --form-secondary-box-font-color: #a4a7b5; | |
| --form-select-border-color: #a4a7b5; | |
| --form-select-font-color: #fff; | |
| --form-select-hover-font-color: #a4a7b5; | |
| --form-secondary-select-background-color: transparent; | |
| --form-secondary-select-border-color: #525461; | |
| --form-secondary-select-font-color: #a4a7b5; | |
| --form-checkbox-border-color: #525461; | |
| --form-checkbox-hover-border-color: #7e8190; | |
| --form-checkbox-icon-background: url('data:image/svg+xml;utf8,<svg version="1.1" viewBox="0 0 8 6" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><g transform="translate(-4 -5)" fill="%23ffffff"><g transform="translate(8.0355 7.0355) rotate(-45) translate(-3 -2)"><rect width="1" height="4"/><rect transform="translate(3 3.5) rotate(90) translate(-3 -3.5)" x="2.5" y=".5" width="1" height="6"/></g></g></g></svg>'); | |
| --form-checkbox-icon-color: #a4a7b5; | |
| --form-radio-border-color: #333543; | |
| --form-radio-icon-background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="5" cy="5" r="2" fill="%23a4a7b5"/></g></svg>'); | |
| --form-radio-icon-color: #a4a7b5; | |
| --range-slider-thumb-border: 0px; | |
| --range-slider-track-color: #525461; | |
| --radio-underlined-font-color: #7e8190; | |
| --radio-underlined-hover-border-color: #f4f4f5; | |
| --radio-underlined-selected-font-color: #a4a7b5; | |
| --icon-input-icon-color: #a4a7b5; | |
| --icon-input-search-icon-background: url('data:image/svg+xml;utf8,<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(-10 -9)"><g transform="translate(10 9)"><circle cx="7" cy="7" r="6.5" stroke="%23a4a7b5" /><rect transform="translate(13.725 13.725) rotate(-45) translate(-13.725 -13.725)" x="13.225" y="10.725" width="1" height="6" rx=".5" fill="%23a4a7b5"/></g></g></g></svg>'); | |
| --form-group-transition-label-font-color: #7e8190; | |
| --icon-actionable-color: #7e8190; | |
| --icon-actionable-hover-color: #a4a7b5; | |
| --icon-actionable-active-color: #a4a7b5; | |
| --icon-container-border-color: #525461; | |
| --icon-group-color: #7e8190; | |
| --icon-text-color: #7e8190; | |
| --icon-text-icon-color: #7e8190; | |
| --icon-text-text-color: #7e8190; | |
| --icon-text-header-icon-color: #7e8190; | |
| --icon-text-header-text-color: #a4a7b5; | |
| --icon-text-actionable-icon-color: #a4a7b5; | |
| --icon-text-actionable-text-color: #a4a7b5; | |
| --label-primary-font-color: #fff; | |
| --label-secondary-font-color: #7e8190; | |
| --label-group-navigation-background-color: #1c1e2d; | |
| --modal-background-color: #242635; | |
| --modal-border-color: #525461; | |
| --modal-font-color: #7e8190; | |
| --modal-header-font-color: #7e8190; | |
| --modal-footer-font-color: #7e8190; | |
| --navigation-background-color: #242635; | |
| --navigation-icon-color: #a4a7b5; | |
| --navigation-overflow-icon-background: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(8.000000, 8.000000) rotate(-90.000000) translate(-8.000000, -8.000000)"><rect x="0" y="0" width="16" height="16"></rect><circle fill="%23525461" cx="8" cy="2" r="1"></circle><circle fill="%23525461" cx="8" cy="8" r="1"></circle><circle fill="%23525461" cx="8" cy="14" r="1"></circle></g></g></svg>'); | |
| --navigation-selected-icon-color: #fff; | |
| --navigation-spacer-color: #525461; | |
| --no-content-icon-color: #7e8190; | |
| --no-content-icon-background-color: #242635; | |
| --no-content-title-font-color: #fff; | |
| --no-content-details-font-color: #525461; | |
| --header-panel-background-color: #1c1e2d; | |
| --header-panel-border-color: #333543; | |
| --header-panel-font-color: #a4a7b5; | |
| --header-panel-global-background-color: #242635; | |
| --header-panel-global-font-color: #fff; | |
| --header-panel-tertiary-background-color: #242635; | |
| --header-panel-primary-small-background-color: #242635; | |
| --footer-panel-background-color: #1c1e2d; | |
| --footer-panel-border-color: #333543; | |
| --footer-panel-font-color: #a4a7b5; | |
| --side-panel-border-color: #333543; | |
| --side-panel-background-color: #1c1e2d; | |
| --side-panel-font-color: #a4a7b5; | |
| --side-panel-sub-navigation-background-color: #151725; | |
| --main-panel-background-color: #1c1e2d; | |
| --popover-background-color: #242635; | |
| --popover-border-color: #525461; | |
| --popover-font-color: #a4a7b5; | |
| --popover-header-border-color: #525461; | |
| --popover-header-font-color: #a4a7b5; | |
| --popover-footer-background-color: #525461; | |
| --popover-footer-border-color: #525461; | |
| --popover-footer-font-color: #7e8190; | |
| --properties-overview-background-color: #242635; | |
| --properties-overview-border-color: #333543; | |
| --properties-navigation-grid-border-color: #333543; | |
| --status-bar-background-color: #333543; | |
| --status-key-group-border-color: #333543; | |
| --status-key-font-color: #7e8190; | |
| --table-body-cell-vertical-rhythm-multiplier: 4; | |
| --table-body-cell-horizontal-rhythm-multiplier: 3; | |
| --table-header-cell-horizontal-rhythm-multiplier: 3; | |
| --table-font-color: #a4a7b5; | |
| --table-header-font-color: #fff; | |
| --table-row-hover-background-color: #151725; | |
| --table-row-selected-background-color: #242635; | |
| --table-row-highlight-border-color: #333543; | |
| --table-body-cell-border-color: #333543; | |
| --table-body-cell-font-color: #7e8190; | |
| --table-action-icon-color: #7e8190; | |
| --table-sort-icon-color: #7e8190; | |
| --tab-item-font-color: #7e8190; | |
| --tab-item-hover-border-color: #f4f4f5; | |
| --tab-item-selected-font-color: #a4a7b5; | |
| --toast-item-font-color: #7e8190; | |
| --toast-close-font-color: #7e8190; | |
| --toast-background-color: #242635; | |
| --toast-border-color: #333543; | |
| --toast-title-font-color: #fff; | |
| --toast-details-font-color: #a4a7b5; | |
| --toggle-background-off-color: #333543; | |
| --toggle-background-on-color: #006fff; | |
| --toggle-button-off-color: #7e8190; | |
| --toggle-button-on-color: #fff; | |
| --tooltip-background-color: #151725; | |
| --tooltip-border-color: #525461; | |
| --tooltip-font-color: #a4a7b5; | |
| --header-action-color: #7e8190; | |
| } | |
| .appSubHeading, | |
| .modularSubHeading, | |
| .modularNavigationTitle, | |
| .unifiNetworkStatusDiagramIconValue, | |
| .unifiNetworkStatusDiagramIconLabel, | |
| .unifiLoadContainer__chartLabel, | |
| .unifiNetworkStatusDiagramConnectorSpeed, | |
| .unifiChannelDistributionItem__label, | |
| .unifiDashboardFilters { | |
| color: var(--ubnt-color-text-primary); | |
| } | |
| .appMainButtonGroup--filter .appMainButton { | |
| color: var(--ubnt-color-text-secondary); | |
| } | |
| .unifiDonutChartLabel__main, .unifiDonutChartLabel__secondary, .unifiLoadContainer .unifiLineChart__axis text { | |
| fill: var(--ubnt-color-text-primary); | |
| } | |
| .unifiLineChart__axis g line { | |
| stroke: var(--ubnt-color-text-primary); | |
| } | |
| .unifiLineChart__axis g text { | |
| fill: var(--ubnt-color-text-primary); | |
| } | |
| .modular, .modulesDock--permanent { | |
| background-color: var(--main-panel-background-color); | |
| } | |
| .appTable--light { | |
| color: #a7acb0; | |
| background-color: rgba(0,0,0,0); | |
| } | |
| .appTable--hoverable.appTable--light .tbody .tr:hover:not(.is-row-selected), .appTable--hoverable.appTable--light .tbody tr:hover:not(.is-row-selected), .appTable--hoverable.appTable--light tbody .tr:hover:not(.is-row-selected), .appTable--hoverable.appTable--light tbody tr:hover:not(.is-row-selected) { | |
| background-color: #191C21 !important; | |
| color: #b7bbbe; | |
| } | |
| .appTable--striped tbody tr:nth-child(even):not(.is-row-selected) { | |
| background-color: #1A1C1F; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Looks good; thanks. It doesn't seem to be a complete CSS replacement, so I just appeneded it to app.css.