Skip to content

Instantly share code, notes, and snippets.

@tkuennen
Forked from NickCraver/DarkMode.js
Created January 18, 2019 16:00
Show Gist options
  • Save tkuennen/cf7f3ad4984f6d97ad87452c66a168af to your computer and use it in GitHub Desktop.
Save tkuennen/cf7f3ad4984f6d97ad87452c66a168af to your computer and use it in GitHub Desktop.
A quick and dirty re-purpose of UniFi dark elements to make them global.
// 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"));
: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