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

Dark Mode/Theme for TestRail UI


#1

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 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;
}