Custom dark theme

[JoyHak]

Dark theme was inspired by Cake OS theme from Niivu. I'm using it system-wide. It requires Maple Mono NF CN which is my favorite monospace font.

To use it, launch Zeal with -stylesheet argument:

&"C:\Program Files\Zeal\zeal.exe" -stylesheet cakeOS.css

Download cakeOS.css

source code

* {
    font-family: "Maple Mono NF CN";
    /* font-size: 16px; */
}  

QWidget {
  background-color: #191919;
  border-color: #191919 !important;
  color: #cdcecf;
}

QWidget::item:selected {
  background-color: #346792;
}

QWidget::item:hover:!selected {
  background-color: #1A72BB;
}

QPushButton {
    background: #191919;
    border: 1px solid #373737;
    color: #cdcecf;
    padding: 7px 10px;
    min-height: 15px;
    border-radius: 5px;
}

QPushButton:hover {
    color: #95d6e3;
    border-color: #009cff;
    background-color: #123f5e;
}

QPushButton:pressed {
    color: #60c0d5;
    border-color: #009cff;
    outline: 0;
}  

QPushButton:disabled {
    background-color: #191919;
    color: #818385;
}

QLineEdit {
    color: #cdcecf;
    border: 1px solid #373737;
    border-radius: 4px;
    padding: 7px;
}

QLineEdit:disabled {
    color: #818385;
    /* background-color: #F5F7FA; */
    border-color: #373737;
}

QListView {
    color: #cdcecf;
    background-color: #191919;
    outline: 0px;
    show-decoration-selected: 1;
}

QListView::item{
    color: #95d6e3;
    padding: 4px 0;
    border-bottom: 1px solid #373737;
}

QListView::item:selected {
    background-color: #373737;
}

QListView::item:hover {
    background-color: #123f5e;
}

QMenuBar {
    padding: 4px;
}

QMenuBar::item {
    padding: 4px;
    /* Reserve space for selection border */
    border: 1px transparent #455364;
}

QMenuBar::item:selected {
    color: #409EFF;
    border: 1px solid #009cff;
    border-radius: 5px;
    background-color: #123f5e;
}

QMenu {
    background-color: #191919;
    selection-background-color: #123f5e;
    color: #cdcecf;
    /* font-weight: 400; */
    border: none;
    padding: 2px;
    border-radius: 5px;
}

QMenu::item {
    padding: 2px;
    /* Reserve space for selection border */
    border: 1px transparent #455364;
}

QMenu::item:selected {
    color: #95d6e3;
    /* border: 1px solid #009cff; */
    border: none;
    background-color: #123f5e;
    border-radius: 5px;
}

QMenu::item:pressed {
    color: #60c0d5;
    border-color: #009cff;
    outline: 0;
}  

QTabBar, QDockWidget QTabBar {
  qproperty-drawBase: 0;
  border-radius: 4px;
}

QTabBar::tab:top:selected:disabled, QDockWidget QTabBar::tab:top:selected:disabled {
  border-bottom: 2px solid #26486B;
  color: #818385;
  background-color: #1e1e1e;
}

QTabBar::tab:bottom:selected:disabled, QDockWidget QTabBar::tab:bottom:selected:disabled {
  border-top: 2px solid #26486B;
  color: #818385;
  background-color: #1e1e1e;
}

QTabBar::tab:left:selected:disabled, QDockWidget QTabBar::tab:left:selected:disabled {
  border-right: 2px solid #26486B;
  color: #818385;
  background-color: #1e1e1e;
}

QTabBar::tab:right:selected:disabled, QDockWidget QTabBar::tab:right:selected:disabled {
  border-left: 2px solid #26486B;
  color: #818385;
  background-color: #1e1e1e;
}

QTabBar::tab:top:!selected:disabled, QDockWidget QTabBar::tab:top:!selected:disabled {
  border-bottom: 2px solid #19232D;
  color: #818385;
  background-color: #1e1e1e;
}

QTabBar::tab:bottom:!selected:disabled, QDockWidget QTabBar::tab:bottom:!selected:disabled {
  border-top: 2px solid #19232D;
  color: #818385;
  background-color: #1e1e1e;
}

QTabBar::tab:left:!selected:disabled, QDockWidget QTabBar::tab:left:!selected:disabled {
  border-right: 2px solid #19232D;
  color: #818385;
  background-color: #1e1e1e;
}

QTabBar::tab:right:!selected:disabled, QDockWidget QTabBar::tab:right:!selected:disabled {
  border-left: 2px solid #19232D;
  color: #818385;
  background-color: #1e1e1e;
}

QTabBar::tab:top:!selected, QDockWidget QTabBar::tab:top:!selected {
  border-bottom: 2px solid #19232D;
  margin-top: 2px;
}

QTabBar::tab:bottom:!selected, QDockWidget QTabBar::tab:bottom:!selected {
  border-top: 2px solid #19232D;
  margin-bottom: 2px;
}

QTabBar::tab:left:!selected, QDockWidget QTabBar::tab:left:!selected {
  border-left: 2px solid #19232D;
  margin-right: 2px;
}

QTabBar::tab:right:!selected, QDockWidget QTabBar::tab:right:!selected {
  border-right: 2px solid #19232D;
  margin-left: 2px;
}

QTabBar::tab:top, QDockWidget QTabBar::tab:top {
  background-color: #1e1e1e;
  margin-left: 2px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
  min-width: 5px;
  border-bottom: 2px solid #455364;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

QTabBar::tab:top:selected, QDockWidget QTabBar::tab:top:selected {
  background-color: #282828;
  border-bottom: 2px solid #009cff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

QTabBar::tab:top:!selected:hover, QDockWidget QTabBar::tab:top:!selected:hover {
  border: 1px solid #1A72BB;
  border-bottom: 2px solid #009cff;
  /* Fixes spyder-ide/spyder#9766 and #243 */
  padding-left: 3px;
  padding-right: 3px;
}

QTabBar::tab:bottom, QDockWidget QTabBar::tab:bottom {
  border-top: 2px solid #455364;
  background-color: #1e1e1e;
  margin-left: 2px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  min-width: 5px;
}

QTabBar::tab:bottom:selected, QDockWidget QTabBar::tab:bottom:selected {
  background-color: #2d3640;
  border-top: 2px solid #009cff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

QTabBar::tab:bottom:!selected:hover, QDockWidget QTabBar::tab:bottom:!selected:hover {
  border: 1px solid #1A72BB;
  border-top: 2px solid #009cff;
  padding-left: 3px;
  padding-right: 3px;
}

QTabBar::tab:left, QDockWidget QTabBar::tab:left {
  background-color: #1e1e1e;
  margin-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  min-height: 5px;
}

QTabBar::tab:left:selected, QDockWidget QTabBar::tab:left:selected {
  background-color: #2d3640;
  border-right: 2px solid #009cff;
}

QTabBar::tab:left:!selected:hover, QDockWidget QTabBar::tab:left:!selected:hover {
  border: 1px solid #1A72BB;
  border-right: 2px solid #009cff;
  margin-right: 0px;
  padding-right: -1px;
}

QTabBar::tab:right, QDockWidget QTabBar::tab:right {
  background-color: #1e1e1e;
  margin-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  min-height: 5px;
}

QTabBar::tab:right:selected, QDockWidget QTabBar::tab:right:selected {
  background-color: #2d3640;
  border-left: 2px solid #009cff;
}

QTabBar::tab:right:!selected:hover, QDockWidget QTabBar::tab:right:!selected:hover {
  border: 1px solid #1A72BB;
  border-left: 2px solid #009cff;
  /* Fixes different behavior #271 */
  margin-left: 0px;
  padding-left: 0px;
}

QTabBar QToolButton:pressed, QDockWidget QTabBar QToolButton:pressed {
  background-color: #123f5e;
}

QTabBar QToolButton:pressed:hover, QDockWidget QTabBar QToolButton:pressed:hover {
  border: 1px solid #009cff;
}

QScrollBar:horizontal {
  background-color: #191919;
  height: 16px;
  margin: 2px 16px 2px 16px;
}

QScrollBar:vertical {
  background-color: #191919;
  width: 16px;
  margin: 16px 2px 16px 2px;
}

QScrollBar::handle:horizontal {
  background-color: #2d3942;
  border: none;
  border-radius: 4px;
  min-width: 8px;
}

QScrollBar::handle:horizontal:hover {
  background-color: #346792;
  border: none;
  border-radius: 4px;
  min-width: 8px;
}


QScrollBar::handle:vertical {
  background-color: #2d3942;
  border: none;
  min-height: 8px;
  border-radius: 4px;
}

QScrollBar::handle:vertical:hover {
  background-color: #346792;
  border: none;
  border-radius: 4px;
  min-height: 8px;
}

QScrollBar::add-line:horizontal {
  margin: 0px 0px 0px 0px;
  border: 1px solid #455364;
  border-radius: 4px;
  height: 12px;
  width: 12px;
  subcontrol-position: right;
  subcontrol-origin: margin;
}

QScrollBar::add-line:horizontal:hover, QScrollBar::add-line:horizontal:on {
  height: 12px;
  width: 12px;
  subcontrol-position: right;
  subcontrol-origin: margin;
}

QScrollBar::add-line:vertical {
  margin: 3px 0px 3px 0px;
  border: 1px solid #455364;
  border-radius: 4px;
  height: 12px;
  width: 12px;
  subcontrol-position: bottom;
  subcontrol-origin: margin;
}

QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on {
  height: 12px;
  width: 12px;
  subcontrol-position: bottom;
  subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
  margin: 0px 3px 0px 3px;
  border: 1px solid #455364;
  border-radius: 4px;
  height: 12px;
  width: 12px;
  subcontrol-position: left;
  subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on {
  height: 12px;
  width: 12px;
  subcontrol-position: left;
  subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
  margin: 3px 0px 3px 0px;
  border: 1px solid #455364;
  border-radius: 4px;
  height: 12px;
  width: 12px;
  subcontrol-position: top;
  subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical:hover, QScrollBar::sub-line:vertical:on {
  height: 12px;
  width: 12px;
  subcontrol-position: top;
  subcontrol-origin: margin;
}

QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal {
  background: none;
}

QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
  background: none;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
  background: none;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
  background: none;
}