(Hopefully) Easily Fully-Customizable CSS


#1

Alright, so after a few hours I managed to come up with this CSS for the forums, and a default theme to play with.

Also, disclaimer: I’m not a color guy or frontend web-dev guy. This CSS may not be the most efficient. Let me know if you can improve it!

Edit #1: Added hover for menu items in top-right. Added --button-hover-background-color but it doesn’t do anything yet.
Edit #2: Fixed visited links not being the “visited link” color on the main page.
Edit #3: Fixed link colors on the left-side panel on the main page,
Edit #4: Added --button-hover-color and finally fixed button/list hovers.
Edit #5: Added a ton more components and modified/added variable names and sections to be more clear.
Edit #6: Finally fixed background highlighting. I didn’t even know you could do this with CSS.
Edit #7: The post edit/reply/like buttons weren’t being styled before. Now they are!
Edit #8: Minor annoyance fixes regarding buttons.
Edit #9: Fixed button color in editor and button hover in editor.
Edit #10: Fixed button icon color on hover in editor. Nitpicky, but it was there and I wanted it fixed.
Edit #11: Quote button wasn’t styled before. Now it is!
Edit #12: Fixed missing CSS from some content text.
Edit #13: Hopefully fixed the last of everything- checked user pages, etc.
Edit #14: Fixed missing CSS on edit history modal.
Edit #15: Fixed missing CSS on table borders.
Edit #16: Fixed missing CSS on some dropdowns and autocomplete menus.
Edit #17: Made a whoopsie on the autocomplete.
Edit #18: Fixed missing CSS on profile page.
Edit #19: More missing CSS on the profile page.
Edit #20: Think I finally got all the damned components on the profile page.

:root {
    /* Body */
    --background-color: #009688;
    --outlet-background-color: #FFFFFF;
    --highlighted-background-color: #B2DFDB;
    --header-color: #00796B;
    --separator-color: #BDBDBD;
    
    --inlay-color: #212121;
    --inlay-background-color: #FFFFFF;
    --inlay-border-color: #B2DFDB;
    
    --table-highlighted-color: #212121;
    
    /* Text/Links */
    --link-color: #03A9F4;
    --visited-link-color: #757575;
    --hover-link-color: #757575;
    
    --old-user-link-color: #757575;
    --new-user-link-color: #BDBDBD;
    --header-link-color: #FFFFFF;
    
    --text-color: #212121;
    --text-color-accent: #757575;
    --icon-color: #212121;
    
    /* Buttons */
    --button-color: #212121;
    --button-background-color: #B2DFDB;
    --button-icon-color: #212121;
    --button-border-color: #BDBDBD;
    
    --button-disabled-color: #FFFFFF;
    --button-disabled-background-color: #212121;
    --button-disabled-icon-color: #FFFFFF;
    
    --highlighted-button-color: #FFFFFF;
    --highlighted-button-background-color: #03A9F4;
    --highlighted-button-icon-color: #FFFFFF;
    
    --button-hover-color: #FFFFFF;
    --button-hover-background-color: #009688;
    --button-hover-icon-color: #FFFFFF;
    
    /* Components */
    --control-background-color: #FFFFFF;
    --control-border-color: #B2DFDB;
    --control-hover-background-color: #B2DFDB;
    --control-highlighted-color: #FFFFFF;
    --control-highlighted-background-color: #009688;
    --control-hover-highlighted-color: #FFFFFF;
    --control-hover-highlighted-background-color: #B2DFDB;
    
    --timeline-color: #B2DFDB;
    
    --grippie-color: #B2DFDB;
    --grippie-icon-color: #212121;
    
    --alert-color: #FFFFFF;
    --alert-background-color: #00796B;
    
    /* Heatmap */
    --heatmap-low-color: #B2DFDB;
    --heatmap-med-color: #009688;
    --heatmap-high-color: #00796B;
    
    /* Inputs */
    --input-color: #212121;
    --input-background-color: #FFFFFF;
    --input-hover-color: #B2DFDB;
    --input-selected-color: #009688;
    --input-border-color: #BDBDBD;
    --input-border-highlight-color: #B2DFDB;
    --input-scrollbar-color: #03A9F4;
    --editor-button-color: #212121;
}

/* Main */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}
select, textarea, #reply-control .reply-to {
    color: var(--text-color);
}
.user-info .user-detail .username a,
.large-notification a span,
.groups-table .groups-info .groups-info-name {
    color: var(--old-user-link-color);
}
.names .user-title,
.topic-meta-data .post-info a,
nav.post-controls button.create,
#topic-footer-buttons p,
.topic-list th,
.topic-list td,
.badge-posts[href],
nav.post-controls a,
nav.post-controls button,
nav.post-controls .like-button .like-count,
.category-list th,
.category-list td,
.latest-topic-list .table-heading,
.select-kit.combo-box.category-chooser .select-kit-row .category-desc,
div.menu-links-header a,
.topic-body .reply-to-tab,
.list-controls .combo-box .combo-box-header,
.topic-map .map .number, .topic-map .map i,
::placeholder {
    color: var(--text-color-accent);
}
.user-preferences .instructions,
.links-section .domain,
.top-sub-section .topic-info,
.stats-section .label,
.user-info .user-detail .name,
.user-info .user-detail .title,
.directory .total-rows,
.directory table td .number,
.directory table td .time-read,
.directory table th .number,
.directory table th .time-read,
.directory .me .username a,
.directory .me .name,
.directory .me .title,
.directory .me .number,
.directory .me .time-read,
.groups-table tr td {
    color: var(--text-color-accent);
}
div.education {
    color: var(--text-color);
}
.select-kit.dropdown-select-box.period-chooser .period-chooser-header h2.selected-name .date-section {
    color: var(--link-color);
}
.select-kit.dropdown-select-box.period-chooser .period-chooser-header h2.selected-name .top-date-string {
    color: var(--text-color-accent);
}
.timeline-container .topic-timeline *, .timeline-container .topic-timeline .timeline-ago {
    color: var(--text-color-accent);
}
.timeline-container .topic-timeline .timeline-handle {
    background-color: var(--timeline-color);
}
.timeline-container .topic-timeline .timeline-scrollarea {
    border-color: var(--timeline-color);
}
#main-outlet {
    background-color: var(--outlet-background-color);
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.25);
}
.d-header {
    background-color: var(--header-color);
}
.directory .me {
    background-color: var(--table-highlighted-color);
}
.directory table td, .directory table th {
    border-bottom: 1px solid var(--separator-color);
}

/* Content */
aside.quote .title, blockquote {
    border-left: 5px solid var(--inlay-border-color);
    background-color: var(--inlay-background-color);
}
.hljs {
    background-color: var(--inlay-background-color);
    border: 1px solid var(--inlay-border-color);
}
p>code, li>code, pre>code {
    background-color: var(--inlay-background-color);
    color: var(--inlay-color);
}
.topic-map section {
    border-top: 1px solid var(--inlay-border-color);
}
.topic-map .buttons .btn {
    border-left: 1px solid var(--inlay-border-color);
}
.topic-map {
    border: 1px solid var(--inlay-border-color);
    border-top: none;
}
.topic-map {
    background-color: var(--inlay-background-color);
}
.topic-map h4 {
    color: var(--text-color-accent);
}
.topic-map .buttons .btn {
    background-color: var(--inlay-background-color);
}
.topic-map-expanded {
    border-top: 0px !important;
}
tr {
    border-bottom: 1px solid var(--separator-color);
}
.table-heading {
    border-bottom: 3px solid var(--separator-color);
}
tbody {
    border-top: 3px solid var(--separator-color);
}
.latest-topic-list-item {
    border-bottom: 1px solid var(--separator-color);
}
hr {
    border-top: 1px solid var(--separator-color);
}

.modal-inner-container {
    background-color: var(--outlet-background-color);
}
.modal .modal-body p {
    color: var(--text-color);
}
.modal.history-modal #display-modes .btn {
    background-color: var(--button-background-color);
    color: var(--button-color);
}
.modal.history-modal #display-modes .btn-primary {
    background-color: var(--highlighted-button-background-color);
    color: var(--highlighted-button-color);
}
.user-main .about .details, .user-main .about .secondary {
    background-color: var(--inlay-background-color);
}
.user-main .about.collapsed-info .details {
    background-color: var(--inlay-background-color);
    border-bottom: 1px solid var(--separator-color);
}
.user-main .about .secondary {
    border-top: 1px solid var(--separator-color);
    border-bottom: 1px solid var(--separator-color);
}
.user-preferences .bio-composer .d-editor-preview, .group-form-bio .d-editor-preview, .edit-category-tab-topic-template .d-editor-preview {
    background-color: var(--inlay-background-color);
}
.uploaded-image-preview {
    background-color: var(--inlay-background-color);
}
.select-kit.multi-select .choices .selected-name .body {
    background-color: var(--outlet-background-color);
}

@keyframes background-fade-highlight {
  0% {
    background: var(--highlighted-background-color);
  }
  100% {
    background: none;
  }
}

/* Links & Buttons */
a.title:not(.badge-notification), #topic-title a {
    color: var(--link-color) !important;
}
.extra-info-wrapper .topic-link {
    color: var(--header-link-color) !important;
}
.extra-info-wrapper .badge-wrapper.bullet span.badge-category {
    color: var(--header-link-color) !important;
}
.latest-topic-list-item.visited a.title:not(.badge-notification) {
    color: var(--visited-link-color) !important;
}
.category-list tbody .category h3 a[href] {
    color: var(--link-color);
}
a, #topic-title a, .extra-info-wrapper .topic-link, #reply-control .save-or-cancel .cancel, .composer-bottom-right a {
    color: var(--link-color);
}
#reply-control .save-or-cancel .cancel:hover, .composer-bottom-right a:hover {
    color :var(--link-hover-color);
}
.names span a, .user-menu .notifications li span {
    color: var(--old-user-link-color);
}
.username.new-user a {
    color: var(--new-user-link-color);
}
a:visited {
    color: var(--visited-link-color);
}
a:hover {
    color: var(--hover-link-color);
}
.badge-wrapper.bullet span.badge-category {
    color: var(--link-color);
}
.icon, .d-icon {
    color: var(--icon-color) !important;
}
.d-header-icons .unread-notifications {
    background-color: var(--icon-color);
}
.btn, .nav-pills>li.active>a, .nav-pills>li>a.active, .user-menu .notifications .show-all .btn {
    background-color: var(--button-background-color);
    color: var(--button-color);
}
.btn[href] {
    color: var(--button-color);
}
.nav-pills>li>a, .user-navigation .nav-stacked a, .user-navigation .nav-stacked a.active {
    color: var(--link-color);
}
.nav-pills>li>a:hover, .discourse-no-touch .btn:hover, .user-menu .notifications .show-all .btn:hover, .d-header-icons .icon:hover, .d-header-icons .icon:focus, .topic-map .buttons .btn:hover, nav.post-controls button:focus, nav.post-controls button.d-hover, nav.post-controls .like-button:hover {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-color);
}
.nav-pills>li>a:hover .d-icon, .discourse-no-touch .btn:hover .d-icon, .user-menu .notifications .show-all .btn:hover .d-icon, .d-header-icons .icon:hover .d-icon, .d-header-icons .icon:focus .d-icon, .topic-map .buttons .btn:hover .d-icon, nav.post-controls button:focus .d-icon, nav.post-controls button.d-hover .d-icon, nav.post-controls .like-button:hover .d-icon {
    color: var(--button-icon-hover-color) !important;
}
.select-kit.dropdown-select-box.composer-actions .select-kit-header:hover, .select-kit.dropdown-select-box.composer-actions .select-kit-header:focus {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-color);
}
.select-kit.dropdown-select-box.composer-actions .select-kit-header:hover .d-icon, .select-kit.dropdown-select-box.composer-actions .select-kit-header:focus .d-icon {
    color: var(--button-icon-hover-color) !important;
}
.btn .d-icon {
    color: var(--button-icon-color) !important;
}
.btn:hover .d-icon {
    color: var(--button-hover-icon-color) !important;
}
.directory table th.sortable:hover {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-color);
}
.directory table th.sortable:hover .d-icon {
    color: var(--button-icon-hover-color) !important;
}
.btn[disabled], .btn.disabled {
    color: var(--button-disabled-color);
    background-color: var(--button-disabled-background-color);
}
.btn[disabled] .d-icon, .btn.disabled .d-icon {
    color: var(--button-disabled-icon-color) !important;
}
.btn[disabled]:hover, .btn.disabled:hover {
    color: var(--button-hover-color);
    background-color: var(--button-hover-background-color);
}
.btn[disabled]:hover .d-icon, .btn.disabled:hover .d-icon {
    color: var(--button-hover-icon-color) !important;
}
nav.post-controls button:focus .d-icon, nav.post-controls button.d-hover .d-icon, nav.post-controls .like-button:hover .d-icon {
    color: var(--button-hover-icon-color) !important;
}
.d-header-icons .icon:hover .d-icon {
    color: var(--button-hover-icon-color) !important;
}
.d-header-icons .header-dropdown-toggle.active .d-icon {
    color: var(--icon-color) !important;
}
.btn-primary {
    background-color: var(--highlighted-button-background-color);
    color: var(--highlighted-button-color);
}
.btn-primary .d-icon {
    color: var(--highlighted-button-icon-color) !important;
}
.badge-notification.new-posts, .badge-notification.unread-posts, .badge-notification.clicks {
    background-color: var(--icon-color);
}
span.post-count {
    background-color: var(--icon-color);
    color: var(--inlay-background-color);
}
.badge-notification.clicks {
    color: var(--outlet-background-color);
}
.topic-body, .topic-avatar, .topic-status-info {
    border-top: 1px solid var(--separator-color);
}
.select-kit.dropdown-select-box.composer-actions .d-icon {
    border: 1px solid var(--button-border-color);
    color: var(--editor-button-color) !important;
}
.d-editor-button-bar button .d-icon {
    color: var(--editor-button-color) !important;
}
.drop-down-mode .d-header-icons .active .icon {
    border-top: 1px solid var(--control-border-color);
    border-left: 1px solid var(--control-border-color);
    border-right: 1px solid var(--control-border-color);
    background-color: var(--header-color);
}
.drop-down-mode .d-header-icons .active .icon:after {
    border-top: 1px solid var(--control-border-color);
}
.user-menu .notifications li:hover, .user-menu .notifications li:focus {
    background-color: var(--control-hover-background-color);
}
.user-menu .notifications li:not(.read):hover, .user-menu .notifications li:not(.read):focus {
    background-color: var(--control-hover-highlighted-background-color);
}
.user-menu .notifications li:not(.read):hover a, .user-menu .notifications li:not(.read):focus a {
    color: var(--control-hover-highlighted-color);
}
.menu-panel li a:hover, .menu-panel li.heading a:hover {
    background-color: var(--control-hover-background-color);
}
.quote-button {
    background-color: var(--button-background-color);
    color: var(--button-color);
}
.quote-button:hover {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-color);
}
.quote-button .d-icon {
    color: var(--button-icon-color) !important;
}
.quote-button:hover .d-icon {
    color: var(--button-hover-icon-color) !important;
}
.select-kit.dropdown-select-box.period-chooser .period-chooser-row .date-section {
    color: var(--link-color);
}
.select-kit.dropdown-select-box.period-chooser .period-chooser-row .top-date-string {
    color: var(--text-color-accent);
}

/* Heatmaps */
.heatmap-high, .heatmap-high a {
    color: var(--heatmap-high-color) !important;
}
.heatmap-med, .heatmap-med a {
    color: var(--heatmap-med-color) !important;
}
.heatmap-low, .heatmap-low a {
    color: var(--heatmap-low-color) !important;
}

/* Inputs */
.select-kit.combo-box .select-kit-header.is-focused {
    border: 1px solid var(--input-border-highlight-color);
    box-shadow: 0 0 6px 0 var(--input-border-highlight-color);
}
.list-controls .combo-box .combo-box-header, .select-kit .select-kit-body, .select-kit .select-kit-collection, .select-kit.combo-box .select-kit-header {
    background-color: var(--input-background-color);
}
.select-kit.combo-box .select-kit-header {
    border: 1px solid var(--input-border-color);
}
.select-kit .select-kit-row.is-highlighted, .select-kit .select-kit-row.is-selected.is-highlighted {
    background-color: var(--input-hover-color);
}
.select-kit .select-kit-row.is-selected {
    background-color: var(--input-selected-color);
}
.select-kit .select-kit-collection::-webkit-scrollbar-thumb {
    background-color: var(--input-scrollbar-color);
}

input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .d-editor-textarea-wrapper {
    color: var(--input-color);
    background-color: var(--input-background-color);
    border: 1px solid var(--input-border-color);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus {
    border: 1px solid var(--input-border-highlight-color);
    box-shadow: 0 0 6px 0 var(--input-border-highlight-color);
}
.d-editor-button-bar {
    border-bottom: 1px solid var(--input-border-color);
}
.d-editor-spacer {
    background-color: var(--input-border-color);
}
.open .grippie {
    background-color: var(--grippie-color);
}
.open .grippie:before {
    border-top: 3px double var(--grippie-icon-color);
}
.topic-list .topic-list-item-separator td span {
    background-color: var(--outlet-background-color);
    color: var(--text-color-accent);
}
.topic-list .topic-list-item-separator td {
    border-bottom: 1px solid var(--text-color-accent);
}

/* Controls */
#reply-control, .menu-panel {
    background-color: var(--control-background-color);
}
.menu-panel {
    border: 1px solid var(--control-border-color);
}
.user-menu .notifications li {
    background-color: var(--control-highlighted-background-color);
}
.user-menu .notifications li:not(.read) a {
    color: var(--control-highlighted-color);
}
.user-menu .notifications .read {
    background-color: var(--control-background-color);
}
.alert.alert-info {
    color: var(--alert-color);
    background-color: var(--alert-background-color);
}
.select-kit.dropdown-select-box .select-kit-body {
    border: 1px solid var(--control-border-color);
}
.autocomplete {
    border: 1px solid var(--control-border-color);
    background-color: var(--control-background-color);
}
.autocomplete ul li {
    border-bottom: 1px solid var(--control-border-color);
}
.autocomplete ul li a.selected {
    background-color: var(--control-highlighted-background-color);
}
.autocomplete ul li a.selected .badge-wrapper.bullet span.badge-category {
    color: var(--control-highlighted-color);
}
.discourse-no-touch .autocomplete ul li a:hover {
    background-color: var(--control-hover-background-color);
}

#2

With this comes a new Discord-alike theme. Just replace the :root section with the following:

:root {
    /* Body */
    --background-color: #23272A;
    --outlet-background-color: #2C2F33;
    --highlighted-background-color: #99AAB5;
    --header-color: #23272A;
    --separator-color: #99AAB5;
    
    --inlay-color: #FFFFFF;
    --inlay-background-color: #23272A;
    --inlay-border-color: #99AAB5;
    
    --table-highlighted-color: #23272A;
    
    /* Text/Links */
    --link-color: #7289DA;
    --visited-link-color: #99AAB5;
    --hover-link-color: #99AAB5;
    
    --old-user-link-color: #FFFFFF;
    --new-user-link-color: #CFCFCF;
    --header-link-color: #FFFFFF;
    
    --text-color: #FFFFFF;
    --text-color-accent: #AFAFAF;
    --icon-color: #FFFFFF;
    
    /* Buttons */
    --button-color: #23272A;
    --button-background-color: #99AAB5;
    --button-icon-color: #23272A;
    --button-border-color: #FFFFFF;
    
    --button-disabled-color: #FFFFFF;
    --button-disabled-background-color: #23272A;
    --button-disabled-icon-color: #FFFFFF;
    
    --highlighted-button-color: #FFFFFF;
    --highlighted-button-background-color: #7289DA;
    --highlighted-button-icon-color: #FFFFFF;
    
    --button-hover-color: #23272A;
    --button-hover-background-color: #FFFFFF;
    --button-hover-icon-color: #23272A;
    
    /* Components */
    --control-background-color: #23272A;
    --control-border-color: #99AAB5;
    --control-hover-background-color: #2C2F33;
    --control-highlighted-color: #23272A;
    --control-highlighted-background-color: #99AAB5;
    --control-hover-highlighted-color: #99AAB5;
    --control-hover-highlighted-background-color: #2C2F33;
    
    --timeline-color: #99AAB5;
    
    --grippie-color: #99AAB5;
    --grippie-icon-color: #2C2F33;
    
    --alert-color: #FFFFFF;
    --alert-background-color: #7289DA;
    
    /* Heatmap */
    --heatmap-low-color: #FFFFFF;
    --heatmap-med-color: #99AAB5;
    --heatmap-high-color: #7289DA;
    
    /* Inputs */
    --input-color: #FFFFFF;
    --input-background-color: #23272A;
    --input-hover-color: #2C2F33;
    --input-selected-color: #7289DA;
    --input-border-color: #99AAB5;
    --input-border-highlight-color: #99AAB5;
    --input-scrollbar-color: #99AAB5;
    --editor-button-color: #FFFFFF;
}

#3

Very nice! Certainly much easier to tweak. xD


#4

And here’s a fun sea-and-salmon theme for the light-theme lovers.

:root {
    /* Body */
    --background-color: #85CDCB;
    --outlet-background-color: #85CDCB;
    --highlighted-background-color: #99AAB5;
    --header-color: #E8A87C;
    --separator-color: #41B3A3;
    
    --inlay-color: #FFFFFF;
    --inlay-background-color: #41B3A3;
    --inlay-border-color: #FFFFFF;
    
    /* Text/Links */
    --link-color: #FFFFFF;
    --visited-link-color: #E6E6E6;
    --hover-link-color: #E6E6E6;
    
    --old-user-link-color: #FFFFFF;
    --new-user-link-color: #E6E6E6;
    --header-link-color: #FFFFFF;
    
    --text-color: #FFFFFF;
    --text-color-accent: #EAEAEA;
    --icon-color: #FFFFFF;
    
    /* Buttons */
    --button-color: #FFFFFF;
    --button-background-color: #41B3A3;
    --button-icon-color: #FFFFFF;
    --button-border-color: #41B3A3;
    
    --highlighted-button-color: #FFFFFF;
    --highlighted-button-background-color: #E27D60;
    --highlighted-button-icon-color: #FFFFFF;
    
    --button-hover-color: #41B3A3;
    --button-hover-background-color: #FFFFFF;
    --button-hover-icon-color: #41B3A3;
    
    /* Components */
    --control-background-color: #85CDCB;
    --control-border-color: #41B3A3;
    --control-hover-background-color: #E8A87C;
    
    --timeline-color: #C38D9E;
    
    --grippie-color: #E8A87C;
    --grippie-icon-color: #FFFFFF;
    
    /* Heatmap */
    --heatmap-low-color: #E8A87C;
    --heatmap-med-color: #E27D60;
    --heatmap-high-color: #C38D9E;
    
    /* Inputs */
    --input-color: #FFFFFF;
    --input-background-color: #85CDCB;
    --input-hover-color: #E8A87C;
    --input-border-color: #41B3A3;
    --input-border-highlight-color: #C38D9E;
    --input-scrollbar-color: #E27D60;
    --editor-button-color: #FFFFFF;
}

#5

Heeeeeere’s Facebook! (Light theme, but still works when placed over the default dark theme)

:root {
    /* Body */
    --background-color: #FFFFFF;
    --outlet-background-color: #FFFFFF;
    --highlighted-background-color: #8B9DC3;
    --header-color: #F7F7F7;
    --separator-color: #DFE3EE;
    
    --inlay-color: #000000;
    --inlay-background-color: #F7F7F7;
    --inlay-border-color: #DFE3EE;
    
    --table-highlighted-color: #F7F7F7;
    
    /* Text/Links */
    --link-color: #3B5998;
    --visited-link-color: #8B9DC3;
    --hover-link-color: #8B9DC3;
    
    --old-user-link-color: #3B5998;
    --new-user-link-color: #8B9DC3;
    --header-link-color: #3B5998;
    
    --text-color: #000000;
    --text-color-accent: #5A5A5A;
    --icon-color: #8B9DC3;
    
    /* Buttons */
    --button-color: #3B5998;
    --button-background-color: #DFE3EE;
    --button-icon-color: #3B5998;
    --button-border-color: #3B5998;
    
    --button-disabled-color: #FFFFFF;
    --button-disabled-background-color: #3B5998;
    --button-disabled-icon-color: #FFFFFF;
    
    --highlighted-button-color: #FFFFFF;
    --highlighted-button-background-color: #3B5998;
    --highlighted-button-icon-color: #FFFFFF;
    
    --button-hover-color: #FFFFFF;
    --button-hover-background-color: #8B9DC3;
    --button-hover-icon-color: #FFFFFF;
    
    /* Components */
    --control-background-color: #F7F7F7;
    --control-border-color: #DFE3EE;
    --control-hover-background-color: #DFE3EE;
    --control-highlighted-color: #FFFFFF;
    --control-highlighted-background-color: #3B5998;
    --control-hover-highlighted-color: #000000;
    --control-hover-highlighted-background-color: #DFE3EE;
    
    --timeline-color: #8B9DC3;
    
    --grippie-color: #8B9DC3;
    --grippie-icon-color: #F7F7F7;
    
    --alert-color: #FFFFFF;
    --alert-background-color: #3B5998;
    
    /* Heatmap */
    --heatmap-low-color: #DFE3EE;
    --heatmap-med-color: #8B9DC3;
    --heatmap-high-color: #3B5998;
    
    /* Inputs */
    --input-color: #000000;
    --input-background-color: #F7F7F7;
    --input-hover-color: #DFE3EE;
    --input-selected-color: #8B9DC3;
    --input-border-color: #8B9DC3;
    --input-border-highlight-color: #3B5998;
    --input-scrollbar-color: #8B9DC3;
    --editor-button-color: #000000;
}

#6

Nice thank you!