Customizing Kanboard’s Visual Theme

Kanboard’s visual appearance can be customized using CSS to create a personalized theme. Let’s explore how to implement a dark theme with enhanced visual feedback.

Theme Implementation

Here’s the complete CSS implementation for a dark theme:

/* Base styles */
body {
  height: 100%;
}

/* Dark background elements */
body,
table th,
table tr,
header,
.sidebar,
.accordion-title {
  background: #111 !important;
}

/* Hover effects */
table.subtasks-table tr:hover {
  background: #222 !important;
}

/* Board elements */
.task-summary-container,
.task-board {
  background: #112 !important;
}

/* Drag and drop customization */
.draggable-item {
  cursor: move;
}

.draggable-item:hover {
  border-left-width: 50px !important;
}

/* Sidebar styling */
.sidebar > ul a {
  display: inline-block;
  width: 100%;
}

Implementation Guide

To apply this theme to your Kanboard installation:

1. Create Custom CSS File

# Create the file
touch config/custom.css

# Add the CSS code above to this file

2. Enable Custom CSS - Go to Kanboard settings

• Enable “Custom CSS” option
• Clear browser cache
• Refresh the page

Customization Options

You can modify the theme by adjusting these key values:

/* Background colors */
body,
table th,
table tr,
header,
.sidebar,
.accordion-title {
  background: #YOUR_COLOR !important;
}

/* Hover effects */
table.subtasks-table tr:hover {
  background: #YOUR_HOVER_COLOR !important;
}

/* Task board background */
.task-summary-container,
.task-board {
  background: #YOUR_BOARD_COLOR !important;
}

/* Drag and drop indicator */
.draggable-item:hover {
  border-left-width: YOUR_WIDTH !important;
}