Issues with Dark Theme after update 2026.4

[whyzerman]

Hi,

Version: 2026.4
Platform: Raspbian
Plugin/Hardware: RPI

Description:
After updating to 2026.4 my devices lost names in the Dark Theme (attached)
Also the device list gets strange dark color on the dark background - very hard to read (attached)

These 2 issues occur only on Dark Theme.

Best regards

[marchutt]

Hi,

The Dark th3me style is a bit outdated what gives the problem with version 2026.4.
This will help to make the css more in line with newer theme rules...

At the top of the dark th3me css (/domoticz/www/styles/dark-th3me/custom.css) you must have these lines:

Code: Select all

@import url("../../css/legacy.css"); /* required by Domoticz */
@import url("common.css"); /* Domoticz 2026.x shared theme rules */
@import url("base.css"); /* legacy Dark th3me rules */

:root {
  --dz-table-odd-text: #ffffff;
  --dz-table-even-text: #ffffff;
  --dz-table-odd-bg: #545454;
  --dz-table-even-bg: rgb(92, 92, 92);
}

At the bottom of the css, add this new lines:

Code: Select all

/* =========================================================
   DARK TH3ME - DOMOTICZ 2026.4 DEVICE NAME FIX
   ---------------------------------------------------------
   Domoticz 2026.4 renders the device name as:

       <td id="name" class="item-name ng-binding">...</td>

   The original 2017 theme used a CSS workaround that made
   this cell only 9px wide and moved the text with a negative
   margin/text-indent. That workaround is incompatible with
   the current 2026.x HTML/CSS.

   Keep the old theme above intact and override only the
   obsolete name-cell geometry here.
   ========================================================= */

/* Modern Domoticz widget tokens, keeping the Dark th3me look */
:root {
  --dz-widget-bg: #333333;
  --dz-widget-text: #ffffff;
  --dz-widget-name-bg: transparent;
  --dz-widget-name-border: transparent;
  --dz-widget-name-text: #ffffff;
  --dz-widget-name-font-size: 120%;
  --dz-widget-status-text: #eeeeee;
  --dz-widget-value-font-size: 130%;
  --dz-widget-hover-bg: #3a3a3a;
  --dz-widget-hover-name-bg: transparent;
  --dz-widget-hover-name-border: transparent;
  --dz-widget-hover-name-text: #ffffff;
}

/*
 * Device names on the classic device tables.
 * The .item-name selector is the important 2026.x addition.
 */
body table#itemtable td#name,
body table#itemtable td.item-name,
body table#itemtablenotype td#name,
body table#itemtablenotype td.item-name,
body table#itemtabledoubleicon td#name,
body table#itemtabledoubleicon td.item-name,
body table#itemtabletrippleicon td#name,
body table#itemtabletrippleicon td.item-name,
body table#itemtablesmall td#name,
body table#itemtablesmall td.item-name,
body table#itemtablesmalldoubleicon td#name,
body table#itemtablesmalldoubleicon td.item-name,
body table#itemtablesmalltrippleicon td#name,
body table#itemtablesmalltrippleicon td.item-name,
body table#itemtablenostatus td#name,
body table#itemtablenostatus td.item-name {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;

  color: #ffffff !important;
  font-size: 120% !important;

  width: auto !important;
  min-width: 120px !important;
  max-width: none !important;
  height: auto !important;

  overflow: visible !important;
  white-space: normal !important;

  margin: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-left: 4px !important;
  padding-right: 4px !important;

  text-indent: 0 !important;
  text-transform: none;
  position: static !important;
}

/*
 * The dynamic 2026.x dashboard can use the same item-name
 * class outside the old table selectors.
 */
#holder .item .item-name,
#holder .item-name {
  display: table-cell;
  visibility: visible;
  opacity: 1;
  color: #ffffff;
  font-size: var(--dz-widget-name-font-size);
}

/* Preserve readable names when the row is hovered. */
body table#itemtable tr:hover td.item-name,
body table#itemtablenotype tr:hover td.item-name,
body table#itemtabledoubleicon tr:hover td.item-name,
body table#itemtabletrippleicon tr:hover td.item-name,
body table#itemtablesmall tr:hover td.item-name,
body table#itemtablesmalldoubleicon tr:hover td.item-name,
body table#itemtablesmalltrippleicon tr:hover td.item-name,
body table#itemtablenostatus tr:hover td.item-name {
  color: #ffffff !important;
}

/* Do not let the old 2017 negative-positioning hack win. */
td#name.item-name {
  margin-left: 0 !important;
  text-indent: 0 !important;
  width: auto !important;
  min-width: 120px !important;
  height: auto !important;
}

/* =========================================================
   2026.4 FINAL NAME APPEARANCE
   White device name on transparent background
   ========================================================= */

body table#itemtable td#name,
body table#itemtable td.item-name,
body table#itemtablenotype td#name,
body table#itemtablenotype td.item-name,
body table#itemtabledoubleicon td#name,
body table#itemtabledoubleicon td.item-name,
body table#itemtabletrippleicon td#name,
body table#itemtabletrippleicon td.item-name,
body table#itemtablesmall td#name,
body table#itemtablesmall td.item-name,
body table#itemtablesmalldoubleicon td#name,
body table#itemtablesmalldoubleicon td.item-name,
body table#itemtablesmalltrippleicon td#name,
body table#itemtablesmalltrippleicon td.item-name,
body table#itemtablenostatus td#name,
body table#itemtablenostatus td.item-name {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Same appearance while hovering the device row */
body table#itemtable tr:hover td#name,
body table#itemtable tr:hover td.item-name,
body table#itemtablenotype tr:hover td#name,
body table#itemtablenotype tr:hover td.item-name,
body table#itemtabledoubleicon tr:hover td#name,
body table#itemtabledoubleicon tr:hover td.item-name,
body table#itemtabletrippleicon tr:hover td#name,
body table#itemtabletrippleicon tr:hover td.item-name,
body table#itemtablesmall tr:hover td#name,
body table#itemtablesmall tr:hover td.item-name,
body table#itemtablesmalldoubleicon tr:hover td#name,
body table#itemtablesmalldoubleicon tr:hover td.item-name,
body table#itemtablesmalltrippleicon tr:hover td#name,
body table#itemtablesmalltrippleicon tr:hover td.item-name,
body table#itemtablenostatus tr:hover td#name,
body table#itemtablenostatus tr:hover td.item-name {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

/* =========================================================
   DEVICE NAME - ALWAYS TRANSPARENT
   Overrides the original Dark th3me td#name background (#444)
   ========================================================= */

body table#itemtable td#name.item-name,
body table#itemtablenotype td#name.item-name,
body table#itemtabledoubleicon td#name.item-name,
body table#itemtabletrippleicon td#name.item-name,
body table#itemtablesmall td#name.item-name,
body table#itemtablesmalldoubleicon td#name.item-name,
body table#itemtablesmalltrippleicon td#name.item-name,
body table#itemtablenostatus td#name.item-name {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  color: #ffffff !important;
}

/* Keep exactly the same appearance when the mouse is over the name. */
body table#itemtable tr:hover td#name.item-name,
body table#itemtablenotype tr:hover td#name.item-name,
body table#itemtabledoubleicon tr:hover td#name.item-name,
body table#itemtabletrippleicon tr:hover td#name.item-name,
body table#itemtablesmall tr:hover td#name.item-name,
body table#itemtablesmalldoubleicon tr:hover td#name.item-name,
body table#itemtablesmalltrippleicon tr:hover td#name.item-name,
body table#itemtablenostatus tr:hover td#name.item-name,
body table#itemtable td#name.item-name:hover,
body table#itemtablenotype td#name.item-name:hover,
body table#itemtabledoubleicon td#name.item-name:hover,
body table#itemtabletrippleicon td#name.item-name:hover,
body table#itemtablesmall td#name.item-name:hover,
body table#itemtablesmalldoubleicon td#name.item-name:hover,
body table#itemtablesmalltrippleicon td#name.item-name:hover,
body table#itemtablenostatus td#name.item-name:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

hope this helps...

p.s.
After doing the changes, change to the default theme and then switch back to the Dark Th3me.
Then (recommended) do a hard refresh in your browser. (i.e. Ctrl-Shift-R in Firefox)

[whyzerman]

@marchutt

Thank you very much for comprehensive replies and instructions.

Will try and report back.

Kind regards