Skip to content

Instantly share code, notes, and snippets.

@Calinou
Last active November 5, 2021 12:46
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Calinou/c8430bdf0159b0df6ad9a31cea045999 to your computer and use it in GitHub Desktop.
Save Calinou/c8430bdf0159b0df6ad9a31cea045999 to your computer and use it in GitHub Desktop.
Dark theme for Kanboard (WIP)
/* ==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 {
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);
}
.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;
}
@gerroon
Copy link

gerroon commented Apr 16, 2020

How do I use it?

@Calinou
Copy link
Author

Calinou commented Apr 17, 2020

@gerroon

  • Install the Stylus add-on.
  • Go to your Kanboard instance.
  • Click the Stylus button in your add-ons bar, choose "Write CSS for this site".
  • Paste the gist's contents.
  • Press Ctrl + S to save.

However, keep in mind this userstyle is a work in progress and may not style everything.

@gerroon
Copy link

gerroon commented Apr 17, 2020

Thanks for the reply and the help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment