Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dark theme not working properly as from 1.25.3

See original GitHub issue

Web browser

Google Chrome

Web browser version

102.0.5005.62

System Health details

<html> <body>
Version core-2022.5.5
Installation Type Home Assistant OS
Development false
Supervisor true
Docker true
User root
Virtual Environment false
Python Version 3.9.9
Operating System Family Linux
Operating System Version 5.15.41
CPU Architecture x86_64
Timezone Europe/Brussels
</body> </html>

Checklist

Describe the issue

As from version 1.25.3 of HACS, the dark theme is no longer supported in HA. While using a dark theme, HACS has a white background. Reinstalling HACS and clearing the cache does not solve the issue.

Reproduction steps

  1. Use a dark theme in HA
  2. Install version 1.25.3 or 1.25.4 of HACS
  3. Restart HA
  4. Open HACS

Screenshots

HACS 1 25 4

Javascript logs from your browser console

}
<style>
html {
    --paper-input-container-shared-input-style_-_position: relative;
    --paper-input-container-shared-input-style_-_outline: none;
    --paper-input-container-shared-input-style_-_box-shadow: none;
    --paper-input-container-shared-input-style_-_padding: 0;
    --paper-input-container-shared-input-style_-_margin: 0;
    --paper-input-container-shared-input-style_-_width: 100%;
    --paper-input-container-shared-input-style_-_max-width: 100%;
    --paper-input-container-shared-input-style_-_background: transparent;
    --paper-input-container-shared-input-style_-_border: none;
    --paper-input-container-shared-input-style_-_color: var(--paper-input-container-input-color, var(--primary-text-color));
    --paper-input-container-shared-input-style_-_-webkit-appearance: none;
    --paper-input-container-shared-input-style_-_text-align: apply-shim-inherit;
    --paper-input-container-shared-input-style_-_vertical-align: var(--paper-input-container-input-align, bottom);
    --paper-input-container-shared-input-style_-_font-family: var(--paper-font-subhead_-_font-family);
    --paper-input-container-shared-input-style_-_-webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
    --paper-input-container-shared-input-style_-_font-size: var(--paper-font-subhead_-_font-size);
    --paper-input-container-shared-input-style_-_font-weight: var(--paper-font-subhead_-_font-weight);
    --paper-input-container-shared-input-style_-_line-height: var(--paper-font-subhead_-_line-height);
}
<style>
html {
    font-size: 14px;
    height: 100vh;
    --primary-text-color: #212121;
    --secondary-text-color: #727272;
    --text-primary-color: #ffffff;
    --text-light-primary-color: #212121;
    --disabled-text-color: #bdbdbd;
    --primary-color: #03a9f4;
    --dark-primary-color: #0288d1;
    --light-primary-color: #b3e5fC;
    --accent-color: #ff9800;
    --divider-color: rgba(0, 0, 0, .12);
    --scrollbar-thumb-color: rgb(194, 194, 194);
    --error-color: #db4437;
    --warning-color: #ffa600;
    --success-color: #43a047;
    --info-color: #039be5;
    --card-background-color: #ffffff;
    --primary-background-color: #fafafa;
    --secondary-background-color: #e5e5e5;
    --header-height: 56px;
    --label-badge-red: #DF4C1E;
    --label-badge-blue: #039be5;
    --label-badge-green: #0DA035;
    --label-badge-yellow: #f4b400;
    --label-badge-grey: #9e9e9e;
    --state-icon-color: #44739e;
    --state-icon-active-color: #FDD835;
    --state-on-color: #66a61e;
    --state-off-color: #ff0029;
    --state-home-color: #66a61e;
    --state-not_home-color: #ff0029;
    --state-unknown-color: #606060;
    --state-idle-color: #7990a3;
    --state-climate-auto-color: #008000;
    --state-climate-eco-color: #00ff7f;
    --state-climate-cool-color: #2b9af9;
    --state-climate-heat-color: #ff8100;
    --state-climate-manual-color: #44739e;
    --state-climate-off-color: #8a8a8a;
    --state-climate-fan_only-color: #8a8a8a;
    --state-climate-dry-color: #efbd07;
    --state-climate-idle-color: #8a8a8a;
    --energy-grid-consumption-color: #488fc2;
    --energy-grid-return-color: #8353d1;
    --energy-solar-color: #ff9800;
    --energy-non-fossil-color: #0f9d58;
    --energy-battery-out-color: #4db6ac;
    --energy-battery-in-color: #f06292;
    --energy-gas-color: #8E021B;
Show All Properties (112 more)
}
<style>
html {
    --paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif;
    --paper-font-common-base_-_-webkit-font-smoothing: antialiased;
    --paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
    --paper-font-common-code_-_-webkit-font-smoothing: antialiased;
    --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility;
    --paper-font-common-nowrap_-_white-space: nowrap;
    --paper-font-common-nowrap_-_overflow: hidden;
    --paper-font-common-nowrap_-_text-overflow: ellipsis;
    --paper-font-display4_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display4_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display4_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-display4_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-display4_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-display4_-_font-size: 112px;
    --paper-font-display4_-_font-weight: 300;
    --paper-font-display4_-_letter-spacing: -.044em;
    --paper-font-display4_-_line-height: 120px;
    --paper-font-display3_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display3_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display3_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-display3_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-display3_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-display3_-_font-size: 56px;
    --paper-font-display3_-_font-weight: 400;
    --paper-font-display3_-_letter-spacing: -.026em;
    --paper-font-display3_-_line-height: 60px;
    --paper-font-display2_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display2_-_font-size: 45px;
    --paper-font-display2_-_font-weight: 400;
    --paper-font-display2_-_letter-spacing: -.018em;
    --paper-font-display2_-_line-height: 48px;
    --paper-font-display1_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display1_-_font-size: 34px;
    --paper-font-display1_-_font-weight: 400;
    --paper-font-display1_-_letter-spacing: -.01em;
    --paper-font-display1_-_line-height: 40px;
    --paper-font-headline_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-headline_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-headline_-_font-size: 24px;
    --paper-font-headline_-_font-weight: 400;
    --paper-font-headline_-_letter-spacing: -.012em;
    --paper-font-headline_-_line-height: 32px;
    --paper-font-title_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-title_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-title_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-title_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-title_-_font-size: 20px;
Show All Properties (54 more)
}
<style>
html {
    --shadow-transition_-_transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-none_-_box-shadow: none;
    --shadow-elevation-2dp_-_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    --shadow-elevation-3dp_-_box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
    --shadow-elevation-4dp_-_box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-elevation-6dp_-_box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
    --shadow-elevation-8dp_-_box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
    --shadow-elevation-12dp_-_box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14), 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4);
    --shadow-elevation-16dp_-_box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-elevation-24dp_-_box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
}
<style>
html {
    --layout_-_display: flex;
    --layout-inline_-_display: inline-flex;
    --layout-horizontal_-_display: var(--layout_-_display);
    --layout-horizontal_-_-ms-flex-direction: row;
    --layout-horizontal_-_-webkit-flex-direction: row;
    --layout-horizontal_-_flex-direction: row;
    --layout-horizontal-reverse_-_display: var(--layout_-_display);
    --layout-horizontal-reverse_-_-ms-flex-direction: row-reverse;
    --layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse;
    --layout-horizontal-reverse_-_flex-direction: row-reverse;
    --layout-vertical_-_display: var(--layout_-_display);
    --layout-vertical_-_-ms-flex-direction: column;
    --layout-vertical_-_-webkit-flex-direction: column;
    --layout-vertical_-_flex-direction: column;
    --layout-vertical-reverse_-_display: var(--layout_-_display);
    --layout-vertical-reverse_-_-ms-flex-direction: column-reverse;
    --layout-vertical-reverse_-_-webkit-flex-direction: column-reverse;
    --layout-vertical-reverse_-_flex-direction: column-reverse;
    --layout-wrap_-_-ms-flex-wrap: wrap;
    --layout-wrap_-_-webkit-flex-wrap: wrap;
    --layout-wrap_-_flex-wrap: wrap;
    --layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse;
    --layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse;
    --layout-wrap-reverse_-_flex-wrap: wrap-reverse;
    --layout-flex-auto_-_-ms-flex: 1 1 auto;
    --layout-flex-auto_-_-webkit-flex: 1 1 auto;
    --layout-flex-auto_-_flex: 1 1 auto;
    --layout-flex-none_-_-ms-flex: none;
    --layout-flex-none_-_-webkit-flex: none;
    --layout-flex-none_-_flex: none;
    --layout-flex_-_-ms-flex: 1 1 0.000000001px;
    --layout-flex_-_-webkit-flex: 1;
    --layout-flex_-_flex: 1;
    --layout-flex_-_-webkit-flex-basis: 0.000000001px;
    --layout-flex_-_flex-basis: 0.000000001px;
    --layout-flex-2_-_-ms-flex: 2;
    --layout-flex-2_-_-webkit-flex: 2;
    --layout-flex-2_-_flex: 2;
    --layout-flex-3_-_-ms-flex: 3;
    --layout-flex-3_-_-webkit-flex: 3;
    --layout-flex-3_-_flex: 3;
    --layout-flex-4_-_-ms-flex: 4;
    --layout-flex-4_-_-webkit-flex: 4;
    --layout-flex-4_-_flex: 4;
    --layout-flex-5_-_-ms-flex: 5;
    --layout-flex-5_-_-webkit-flex: 5;
    --layout-flex-5_-_flex: 5;
    --layout-flex-6_-_-ms-flex: 6;
    --layout-flex-6_-_-webkit-flex: 6;
    --layout-flex-6_-_flex: 6;
Show All Properties (114 more)
}
@media (prefers-color-scheme: dark)
html {
    background-color: var(--primary-background-color,#111);
    color: var(--primary-text-color,#e1e1e1);
}
html {
    background-color: var(--primary-background-color,#fafafa);
    color: var(--primary-text-color,#212121);
}
html[Attributes Style] {
    -webkit-locale: "en";
}
user agent stylesheet
html {
    display: block;
}

Diagnostics dump

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
MiguelCostacommented, May 29, 2022

@ludeeus can you see my comment above?

I am using primary-background-color: #242e42 but HACS is showing white color

HACS2

0reactions
ludeeuscommented, May 29, 2022

Meh… seems most custom themes are not set up for dark mode…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Pending restart text unreadable in dark mode (default theme).
Pending update instructions on main HACS page are unreadable in dark mode. I think this happened in last update. Did not notice it...
Read more >
2022 Fix: Youtube Dark Mode not working - How to enable it
In this video, we're going to show you How to Fix: Youtube Dark Mode not working / How to enable it. To fix...
Read more >
Dark theme not working Android Pie update - XDA Forums
Try first setting to dark theme and then set a dark wallpaper. Once it works set any wallpaper you like.
Read more >
Change to dark or color mode on your Android device
Change to dark or color mode on your Android device · Turn Dark theme on or off · Fix issues with apps that...
Read more >
Turn on and off dark mode on Chrome - WiseStamp
The dark Theme will apply to Chrome's toolbars, menus, settings, and homepage. However, it will not apply on websites.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

HACS/action not working for tag refs

Next page

Auto-removal on archived packages