Join 34,000+ subscribers and receive articles from our blog about software quality, testing, QA and security.
 

Dark Mode/Theme for TestRail UI

This now only applies to TestRail 5.7 and older. Starting with 6.0 we now have included modern, dark and classic themes. Options can be found on the My Settings page. Cloud users have been updated automatically, TestRail Server admins can find help on how to upgrade here:

http://docs.gurock.com/testrail-admin/installation-upgrading

As this has been requested a few times before. I just wanted to take a moment and share the following UI Script to make the TestRail UI dark. Along with a few visual improvement.

Feel free to make further edits to your liking. This is formatted without minifying for this purpose.

Disclaimer: Use at your own risk. This comes with no additional support. Feel free to let me know of major visual issues so I may update this original post, otherwise this comes with no further support. Keep in mind any other CSS based UI scripts you may already have.

Example Screenshots:

Click to show UI Script
name: Theme - Dark
description: Apply dark theme across all page
author: Vu Tran
version: 1.0
includes: 
excludes: 

css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
color: #fff;
}
h1 {
border: 0px;
background-color: #555;
}
.h1-dark {
background-color: #555;
border: 1px solid #555;
}
.tab-header>a {
background: #999;
}
.field-title-inner {
background: #333;
}
.step-header {
color: #fff;
}
.steps td {
border-top: 3px solid #ddd;
}
.step-content {
background: #555!important;
}
.step-index-circle {
background: #999;
}
.step-no-inner {
background: #555;
}
.step-buttons {
background: #333;
}
.message-load, .message-code {
background: #555;
}
.qpane-splitter {
background: #222;
border-left: 0px;
}
.qpane-header {
background: #3b73af!important;
}
.top {
background: #transparent;
}
.top-search-control {
background: none repeat scroll 0 0 #555;
    background-image: url(https://static.testrail.io/5.6.0.3862/images/header/search.png);
    background-repeat: no-repeat;
    background-position: 4px center;
    outline: 0;
    border-width: 0;
    font-size: 12px;
    border-radius: 3px;
    height: 12px;
    padding: 2px 2px 3px 20px;
    width: 130px;
    color: #fff;
}
.top-panel {
background: #000;
}
.top-menu-highlight {
color: #3b73af;
}
.info-box {
border: 1px solid #555;
background: #222!important;
}
.empty {
background: #555!important;
border: 20px solid #333;

}
.empty-with-explanation {
margin-bottom: 0em!important;
background: #555 url(../images/layout/emptyBack.png) top right repeat-y;
}
.empty-explanation {
background: #555;
}
.message-help {
background: #555 url(../images/icons/help.png) 8px 7px no-repeat;
}
.message-hint {
background: #999!important;
}
.grid td {
background: #555
}
.grid th {
color: #ddd;
}
.grid tr.header {
background: #222;
}
.grid tr.highlighted {
background: #555!important;
}
.grid tr:hover {
background: #999;
}
.grid th.secondary {
color: #fff;
}
.grid td.box {
background: #333!important;
}
.grid-frame {
background: #555;
}
.grid tr.group-header {
background: #333;
}
.text-active {
color: #ddd;
}
.text-deleted {
color: #ddd;
}
.text-soft {
color: #bbb;
}
.io {
background: #555; 
}
.io-framed {
border-color: #555;
}
.io-container {
background: #555;
}
.io-container-group {
background: #555;
}
.io-label {
color: #fff;
}
#header {
background: #333;
}
.header-menu-item {
margin-right: -5px;
}
.header-menu-item>a {
padding: 0 15px;
}
.header-menu-item>a:hover, .header-menu-item-selected>a, .header-menu-item-selected>a:link, .header-menu-item-selected>a:active, .header-menu-item-selected>a:visited, .header-menu-item-selected>a:hover {
position: relative;
background: #fff;
top: -5px;
padding-top: 5px;
}
div.top-section {
color: #fff;
}
.content-header {
background: #222!important;
}
.content-header-title {
color: #fff;
}
.content-header-id {
background: #f6c342;
color: black;
}
.content-sticky {
background: #333;
}
#separator {
height: 0px;
border: 0px;
}
#body {
background: #333;
}
.chart-legend-title {
color: #fff;
}
.chart-legend-name {
color: #fff;
}
.chart-legend-name>a {
color: #ddd!important;
}
.chart-legend-description {
color: #ddd;
}
.chart-bar {
border: 0px;
}
.chart-bar-percent {
color: #ddd;
}
.chart-legend-icon {
border: 0px;
}
.text-secondary {
color: #fff;
}
#sidebarInfo p a span {
color: #fff!important;
}
.sidebar-splitter {
background: #222;
border-left: 0px;
}
.sidebar {
background: #555;
}
.sidebar-h1 {
border: 0px;
color: #fff;
background: #555;
}
.sidebar-button, .sidebar-button:link {
background-color: #3b73af;
}
.sidebar-button {
background: url();
text-shadow: 0 0 0;
font-size: 15px;
text-decoration: none;
padding: 9px 0px 0px 15px;
margin-top: 10px;
margin-left: 10px;
height: 24px;
width: 175px;
border-radius: 2px;
}
.sidebar-button:hover {
background: url();
background-color: #333;
}
.sidebar .field-title-inner {
background: #555;
}
.sidebar-button, .sidebar-button:link, .sidebar-button:active, .sidebar-button:visited, .sidebar-button:hover {
color: white;
}
.summary-description {
color: #ddd;
}
a, a:link, a:active, a:visited, a:hover {
color: #fff;
}
.text-softer {
color: #fff;
}
.grid td.darkSelected, .grid tr.dark:hover {
background: #333;
}
.grid td.sub {
color: #fff;
}
.toolbar {
border: 0px;
background-color: #3b73af;
}
.toolbar-inner {
color: #ddd;
}
.toolbar-button {
color: #ddd!important
}
.toolbar-button:hover {
background-color: #999;
}
.link-noline, .link-noline:link, .link-noline:active, .link-noline:visited, .link-noline:hover {
color: #fff;
}
.check-list {
border-width: 2px;
border-color: #999;
}
.checkbox-list-inner {
background: #555;
}
div.checkbox {
background: #transparent;
}
.report-box-highlighted {
background-color: #555;
}
.tab-header {
border-bottom: 0px;
}
.tab-frame {
background: #555;
border: 1px solid #999;
}
.report-box-stacked {
background-color: #555!important;
}
.message-success {
color: black;
}
.change-container {
border: 1px solid #999;
}
.change-column-properties {
border-right: 1px solid #999;
}
.change-column-properties-compact {
background: #555;
}
.change-meta-label {
color: #aaa;
}
.dropzone {
background: #3b73af;
}
.dialog {
background: #999;
}
.dialog-body {
background: #555;
}
.row {
background: transparent;
}
.form-description {
color: #ddd;
}
.form-message {
background: #999;
}
.grid{
background: transparent!important;
}
.grid tr.evenSelected {
background: #888;
}
.grid tr.oddSelected {
background: #777;
}
.select-dialog-container {
background: #999;
}
.select-dialog-tree {
background: #777;
}
.dropdown {
background: #555;
}
.dropdown-menu-link, .dropdown-menu-link:link, .dropdown-menu-link:active, .dropdown-menu-link:visited {
color: #fff;
}
.summary-expand {
background: #777;
}
.filter-bubble-inner {
background: #bbb;
}
div.scroll {
background: #777!important;
}
5 Likes

Hi,

since the release of TestRail 6.0, a Dark theme is now officially supported and one of the three provided themes that can be selected (Modern and Classic being the other two): TestRail 6.0 release

If you want to switch UI themes, you can do so in your personal User Settings area. Please be aware that an existing UI script for a dark mode (like this one here) might have unintended side-effects if the script is not deactivated.

Best,
David