Dark theme for Kanboard (WIP)

kanboard-dark.css

/* ==UserStyle==
@name           Kanboard Dark
@namespace      github.com/openstyles/stylus
@version        0.0.1
@license        MIT
@description    Dark theme for Kanboard
@author         Calinou
==/UserStyle== */

:root {
  --light-color-1: #eaeaea;
  --light-color-2: #fefefe;
  --dark-color-1: #303030;
  --dark-color-2: #454545;
}

html {
  background-color: var(--dark-color-1);
}

body {
  color: var(--light-color-1);
}

h1,
h2,
h3,
.panel,
a .fa,
.sidebar > ul li.active a,
.table-list-row .table-list-title a,
.dropdown-menu-link-text,
.dropdown-menu-link-icon {
  color: var(--light-color-1);
}

header {
  background-color: #505050;
  border-bottom: 1px solid #505050;
}

a {
  color: #49f;
}

input,
textarea {
  color: var(--light-color-1) !important;
  background-color: var(--dark-color-2);
}

ul.dropdown-submenu-open {
  background-color: var(--dark-color-2);
}

.table-list-row:nth-child(odd) {
  background-color: var(--dark-color-2);
}

.panel {
  background-color: var(--dark-color-2);
  border: none;
}

table,
table td,
.table-list-header,
.table-list-row,
.table-list-row.table-border-left {
  border-color: transparent;
}

.table-list-header {
  background-color: var(--dark-color-2);
}

span.task-icon-age-total,
span.task-icon-age-column {
  background-color: var(--dark-color-2);
  border: none;
}

.sidebar > ul a {
  color: var(--light-color-1);
  font-weight: 400;
}

.sidebar > ul li a:focus,
.sidebar > ul li a:hover,
.sidebar > ul li.active a:focus,
.sidebar > ul li.active a:hover {
  color: var(--light-color-2);
}

a:hover {
  color: var(--light-color-2);
}

.views li {
  background-color: var(--dark-color-2);
  border: none;
}

.views li a {
  color: var(--light-color-1);
}

.views li.active a {
  color: var(--light-color-2);
  font-weight: 400;
}

.views li:last-child {
  border: none;
}

.dropdown-submenu-open a {
  color: var(--light-color-1);
}

.form-help {
  color: orangered;
}

#modal-box {
  background-color: var(--dark-color-1)
}

.table-list-row:hover {
  background-color: #777777
}

.table-list-header .table-list-header-count,
.table-list-header a {
  color: var(--light-color-1);
}

.table-list-row .table-list-details li {
  color: var(--light-color-1);
}

.alert {
  background-color: unset;
}

table th {
  background-color: var(--dark-color-2);
}

table th a {
  color: var(--light-color-1);
}

/* Header in card menu */
#task-summary h2 {
  color: var(--light-color-1);
}

.accordion-title h3 {
  color: var(--light-color-1);
  background-color: var(--dark-color-2);
}

/* Little tooltips that pop up when you hover over 'i' circles */
#tooltip-container {
  box-shadow: 0 6px 6px grey;
  background-color: var(--dark-color-2);
}

/* Edit button on cards */
a i.fa.fa-edit.fa-fw.js-modal-large {
  color: var(--dark-color-1) !important;
}

/* Draggable placeholder when moving cards */
div.draggable-placeholder {
  background-color: var(--light-color-1) !important;
}

/* Column list when editing a project */
table.table-striped tr:nth-child(odd) {
  background-color: var(--dark-color-2);
}

.views a:hover {
  color: var(--light-color-2);
}

/* Disabled buttons with special cursor */
.btn:disabled {
  cursor: not-allowed;
}

/* Activity strips */
.activity-event:nth-child(even) {
    background: var(--dark-color-2);
}

/* Lighten up the activity cards */
.activity-content p,
.activity-content li {
  color: var(--light-color-1);
}

.activity-event:hover {
    background-color: var(--light-color-1);
}

.activity-event:hover .activity-content p,
.activity-event:hover .activity-content li {
    color: var(--dark-color-1);
}

/* Project Overview Banner */
.project-overview-column strong {
    color: var(--light-color-1);
}
.project-overview-column small {
    color: var(--light-color-2);
}

/* Selects */
select {
  background-color: var(--dark-color-2);
  color: var(--light-color-2);
}

.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--light-color-1) !important;
  background-color: var(--dark-color-2);
}

/* Info on the card */
.task-board-icons .task-board-icons-row {
  color: var(--dark-color-1);
}

/* Time estimate is ion a dark background, this contrasts it */
.task-icon-age {
  color: var(--light-color-1);
}

/* Generated Graphs */
.c3 line,
.c3 path,
.c3 text {
  stroke: white;
}

/* Headers on the dashboard */
.page-header h2 a {
    color: var(--light-color-1);
}

/* Project details on dashboard */
.table-list-row .table-list-details {
    color: var(--light-color-1);
}
.table-list-row .table-list-details strong {
    color: var(--light-color-2);
}

/* Project dropdown in the top right */
.select-dropdown-input-container {
    background-color: var(--dark-color-2);
}

#select-dropdown-menu {
    background-color: var(--dark-color-2);
}

.select-dropdown-menu-item {
    color: var(--light-color-2)
}