Hi
I’ve upgraded to 0.117 and trying to modify my theme to just add the time to the right of the top bar. I’ve got the following code but it doesn’t seem to be working. Any ideas?
midnight:
card-mod-theme: midnight
card-mod-root-yaml: |
paper-tabs::after {
margin-right: 50px !important;
font-size: 20px;
content: "TEST";
text-transform: capitalize;
white-space: pre;
}
Can you post your theme file?
Hi,
I have problem after update to 0.117 the header completly disappered what I setup before.
here is the theme code what I use. Where is the problem?
compact-header:
card-mod-theme: compact-header
card-mod-root-yaml: |
ha-app-layout$: |
/* This corrects top padding for the view. */
#contentContainer {
padding-top: 48px !important;
}
paper-tabs$: |
/* This hides tab scroll arrows, remove next 3 lines if you want them. */
paper-icon-button {
display: none;
}
/* This makes it so arrows are only displayed when needed. */
.not-visible {
display: none;
}
.: |
/* This adds the time */
paper-tabs::after {
font-size: 20px;
content: "{{ states('sensor.date') }} {{ states('sensor.date_hu') }}, {{ state_attr('calendar.magyar_nevnapok', 'message') }} névnap, {{ states('sensor.time') }}";
color: var(--primary-color) !important;
}
/* This forces background-color and text-color. */
.edit-mode, app-header, app-toolbar {
background-color: var(--primary-background-color) !important;
color: var(--primary-text-color) !important;
background: url('/local/homekit-bg-4.jpeg') !important;
}
/* This shifts the unused portion of the header up. */
app-toolbar:not([class="edit-mode"]) {
margin-top: -64px;
z-index: 1;
}
/* This shifts the menu button back down. */
app-toolbar:not([class="edit-mode"]) ha-button-menu {
margin-top: 110px
}
/* This shifts the voice button back down. */
app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
/* Uncomment line below to hide voice button. */
/* display: none; */
margin-top: 110px
}
/* This shifts the options button back down. */
app-toolbar:not([class="edit-mode"]) ha-menu-button {
/* Uncomment line below to hide options button. */
/* display: none; */
margin-top: 110px
}
/* This hides the menu button when sidebar is open. */
menu-button[style="visibility: hidden;"] {
display: none;
}
/* This adds room for the menu button when sidebar is open. */
:host-context(home-assistant-main[expanded]) paper-tabs {
margin-left: 60px !important;
}
/* This leaves space for the buttons on the right of the tabs bar.
Change 112px to 56px if you don't use voice icon. */
paper-tabs {
margin-right: 20px !important;
}
/* This corrects the sizing of the view. */
#view {
min-height: calc(100vh - 48px) !important;
}
ha-button-menu {
right: -25px !important;
color: rgb(74, 27, 43);
/*Uncomment this out to hide the overflow menu
display: none;
*/
}
/* Set margin on left to be smaller,
and set the bar color to be the primary color
instead of white */
paper-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
margin-left: 48px !important;
}
/* Color selected tabs */
paper-tab[aria-selected="true"] > ha-icon {
color: var(--primary-color) !important;
}
paper-tab[aria-selected="true"] {
color: var(--primary-color) !important;
}
# Global
background-image: 'center / cover no-repeat fixed url("/local/homekit-bg-4.jpeg")'
primary-color: "#FF9F09" # from Apple systemOrange dark mode
light-primary-color: "#B6B6C1" # light gray (icons on left menu)
primary-background-color: "#2c2c2e" # systemGray5 dark mode
secondary-background-color: rgba(25, 25, 25, 0.7)
divider-color: "#98989d" # from Apple systemGray dark mode
accent-color: rgba(255, 159, 9, 1)
app-header-background-color: rgba(0, 0, 0, 0.5)
app-header-text-color: rgba(255, 255, 255, 1)
# Text
primary-font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
primary-text-color: "#FFF"
secondary-text-color: "#d3d3d3"
text-primary-color: "#FFF"
disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
text-dark-color: "#FFF"
# Sidebar Menu
sidebar-background-color: var(--primary-background-color)
sidebar-icon-color: var(--light-primary-color)
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#FFF"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# States and Badges
state-icon-color: "#FFF"
state-icon-active-color: rgba(255, 214, 10, 1)
paper-item-icon-active-color: rgba(255, 214, 10, 1)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: "#FFF"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
paper-slider-secondary-color: var(--paper-slider-knob-color)
paper-slider-container-color: rgba(255, 255, 255, 0.5)
paper-slider-font-color: "#000"
ha-slider-background: none !important
# Labels
label-badge-background-color: "#23232E"
label-badge-text-color: "#F1F1F1"
label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode
# Cards
card-background-color: var(--secondary-background-color) # Unused entities table background
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: 20px
ha-card-background: rgba(10, 10, 10, 0.4)
paper-card-background-color: var(--ha-card-background)
code-editor-background-color: var(--disabled-text-color)
# Toggles
paper-toggle-button-checked-button-color: "#484848"
paper-toggle-button-checked-bar-color: "#484848"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
# Table row
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
# Switches
switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
switch-checked-button-color: "#FFF"
# Other
paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info
paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself)
more-info-header-background: rgba(25, 25, 25, 0.5)
lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
app-header-background-color: rgba(155, 155, 155, 0.8)
markdown-code-background-color: "#464646"
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
# mini-media-player-artwork-opacity: 0.7 # causing some bug
yourname:
### Main Interface Colors ###
lovelace-background: 'center / cover no-repeat url("/local/backgrounds/yourname.jpg") fixed'
app-header-background-color: "#141A32"
card-background-color: var(--primary-background-color)
primary-color: "#007AFF"
light-primary-color: "#4DA3FF"
primary-background-color: var(--app-header-background-color)
secondary-background-color: "#000000"
divider-color: "#3B4C8B"
markdown-code-background-color: "#1E2747"
### Text ###
primary-text-color: "#FFE4B5"
secondary-text-color: var(--light-primary-color)
text-primary-color: var(--primary-text-color)
disabled-text-color: "#4F5F78"
### Sidebar Menu ###
sidebar-icon-color: "#4F6B95"
sidebar-text-color: "#CBD5E4"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: var(--light-primary-color)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: var(--primary-color)
state-icon-active-color: "#FBCD41"
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: var(--primary-color)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: var(--markdown-code-background-color)
label-badge-text-color: var(--primary-text-color)
label-badge-red: var(--divider-color)
label-badge-yellow: "#DCA304"
### Cards ###
ha-card-border-radius: '15px'
paper-card-header-color: var(--primary-text-color)
ha-card-background: "rgba(0, 0, 0, 0.6)"
paper-card-background-color: var(--ha-card-background)
paper-listbox-background-color: var(--primary-background-color)
### Toggles ###
paper-toggle-button-checked-button-color: "#FCFCFC"
paper-toggle-button-checked-bar-color: var(--light-primary-color)
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: "#303F79"
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--primary-background-color)
data-table-background-color: var(--primary-background-color)
### Switches ###
switch-unchecked-button-color: var(--divider-color)
switch-unchecked-track-color: var(--divider-color)
### Nastaveni barev mini prehravac
mini-media-player-button-color: rgba(0, 255, 255, 0.25)
mini-media-player-media-cover-info-color: orange
mini-media-player-overlay-base-color: orange
mini-media-player-overlay-accent-color: red
mini-media-player-background-opacity: 1
mini-media-player-artwork-opacity: 1
mini-media-player-progress-height: 15px
mini-media-player-name-font-weight: 500
mini-media-player-icon-color: --mini-media-player-base-color, var(--paper-item-icon-color, #FF4500)
mini-media-player-overlay-color: rgba(0,0,0,0.3)
mini-media-player-overlay-color-stop: 25%
mini-media-player-scale: 1
card-mod-theme: yourname
# Header
header-height: 0px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there. */
#selectionBar {
bottom: unset !important;
}
.: |
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: #D2691E !important;
}
paper-tab[aria-selected=true] > ha-icon {
color: #FF8C00 !important;
}
paper-tab[aria-selected=true] {
color: #D2691E !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there. */
app-header {
top: calc(101vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
fixed
yourname:
### Main Interface Colors ###
lovelace-background: 'center / cover no-repeat url("/local/backgrounds/yourname.jpg") fixed'
app-header-background-color: "#141A32"
card-background-color: var(--primary-background-color)
primary-color: "#007AFF"
light-primary-color: "#4DA3FF"
primary-background-color: var(--app-header-background-color)
secondary-background-color: "#000000"
divider-color: "#3B4C8B"
markdown-code-background-color: "#1E2747"
### Text ###
primary-text-color: "#FFE4B5"
secondary-text-color: var(--light-primary-color)
text-primary-color: var(--primary-text-color)
disabled-text-color: "#4F5F78"
### Sidebar Menu ###
sidebar-icon-color: "#4F6B95"
sidebar-text-color: "#CBD5E4"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: var(--light-primary-color)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
### States and Badges ###
state-icon-color: var(--primary-color)
state-icon-active-color: "#FBCD41"
state-icon-unavailable-color: var(--disabled-text-color)
### Sliders ###
paper-slider-knob-color: var(--primary-color)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
### Labels ###
label-badge-background-color: var(--markdown-code-background-color)
label-badge-text-color: var(--primary-text-color)
label-badge-red: var(--divider-color)
label-badge-yellow: "#DCA304"
### Cards ###
ha-card-border-radius: '15px'
paper-card-header-color: var(--primary-text-color)
ha-card-background: "rgba(0, 0, 0, 0.6)"
paper-card-background-color: var(--ha-card-background)
paper-listbox-background-color: var(--primary-background-color)
### Toggles ###
paper-toggle-button-checked-button-color: "#FCFCFC"
paper-toggle-button-checked-bar-color: var(--light-primary-color)
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: "#303F79"
### Table row ###
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--primary-background-color)
data-table-background-color: var(--primary-background-color)
### Switches ###
switch-unchecked-button-color: var(--divider-color)
switch-unchecked-track-color: var(--divider-color)
### Nastaveni barev mini prehravac
mini-media-player-button-color: rgba(0, 255, 255, 0.25)
mini-media-player-media-cover-info-color: orange
mini-media-player-overlay-base-color: orange
mini-media-player-overlay-accent-color: red
mini-media-player-background-opacity: 1
mini-media-player-artwork-opacity: 1
mini-media-player-progress-height: 15px
mini-media-player-name-font-weight: 500
mini-media-player-icon-color: --mini-media-player-base-color, var(--paper-item-icon-color, #FF4500)
mini-media-player-overlay-color: rgba(0,0,0,0.3)
mini-media-player-overlay-color-stop: 25%
mini-media-player-scale: 1
card-mod-theme: yourname
# Header
header-height: 0px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there. */
#selectionBar {
bottom: unset !important;
}
ha-app-layout$: |
#contentContainer {
padding-top: 0px;
}
.: |
ha-tabs {
height: var(--header-height);
}
app-header {
--header-height: 48px;
}
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: #D2691E !important;
}
paper-tab[aria-selected=true] > ha-icon {
color: #FF8C00 !important;
}
paper-tab[aria-selected=true] {
color: #D2691E !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there. */
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
I’m lazy and haven’t gotten around to updating the docs.
Thank you the header has moved well down. Another problem is scrolling down when switching tabs. Drag up on the touch screen or the mouse on the monitor to move the tabs up, but switch to another tab again to jump down.
After refreshing the page. Bottom
After refreshing the page. Upper part
After switching to another screen
Upper part
More screens. Example of a development tool
Answering my own post just in case anyone else wants to add the time in the new built in compact header
card-mod-root-yaml: |
ha-tabs$: |
.: |
/* Styles for not mobile */
@media (orientation: landscape) {
ha-tabs::after {
font-size: 20px;
content: "{{ states('sensor.time_formatted') }}";
text-transform: capitalize;
white-space: pre;
}
}
Appreciated the work here, but I am running into a few issues. With 0.116.4 I use this theme file to get this result:
But, with 0.117.1 (and using your latest code snippet above), it now looks like this:
Issues:
Google Light Theme:
# Card mod stuff
card-mod-theme: Google Light Theme
header-height: 0px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there. */
#selectionBar {
bottom: unset !important;
}
ha-app-layout$: |
#contentContainer {
padding-top: 0px;
}
.: |
ha-tabs {
height: var(--header-height);
}
app-header {
--header-height: 48px;
}
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: #D2691E !important;
}
paper-tab[aria-selected=true] > ha-icon {
color: #FF8C00 !important;
}
paper-tab[aria-selected=true] {
color: #D2691E !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there. */
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
#and everything of the original theme
Hi,
NowI have this. Modified what I can. Only one thing what I don’t know how to solve.
#
# iOS Dark Mode Theme
#
# This is MIT license because why not
# Hey there! Thanks for helping out in my Teletype!
# Things to do:
# Let's add a bottom padding to the edit mode header. ✅
# Let's hide the main title. ✅
# Let's make the plus color the same as the background. ✅
# Let's hide the help button. ✅
# Let's change the color of selected tabs. ✅
# Let's set the app-toolbar height to 0 in edit mode. ✅
# Let's move the buttons down in edit mode. ✅
ios-dark-mode:
card-mod-theme: ios-dark-mode
header-height: 48px
card-mod-root-yaml: |
ha-tabs$: |
.: |
/* Styles for not mobile */
@media (orientation: landscape) {
ha-tabs::after {
font-size: 20px;
content: "{{ states('sensor.date') }} {{ states('sensor.date_hu') }}, {{ state_attr('calendar.magyar_nevnapok', 'message') }} névnap, {{ states('sensor.time') }}";
text-transform: none;
white-space: pre;
}
}
/* Let's get going! */
/* We still need this, because we need to compact edit mode. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: url('/local/homekit-bg-4.jpeg') !important;
color: var(--primary-text-color) !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
ha-button-menu {
right: -25px !important;
color: rgb(74, 27, 43);
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
# Global
background-image: 'center / cover no-repeat fixed url("/local/homekit-bg-4.jpeg")'
primary-color: "#FF9F09" # from Apple systemOrange dark mode
light-primary-color: "#B6B6C1" # light gray (icons on left menu)
primary-background-color: "#2c2c2e" # systemGray5 dark mode
secondary-background-color: rgba(25, 25, 25, 0.7)
divider-color: "#98989d" # from Apple systemGray dark mode
accent-color: rgba(255, 159, 9, 1)
# Text
primary-font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
primary-text-color: "#FFF"
secondary-text-color: "#d3d3d3"
text-primary-color: "#FFF"
disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
text-dark-color: "#FFF"
# Sidebar Menu
sidebar-background-color: var(--primary-background-color)
sidebar-icon-color: var(--light-primary-color)
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#FFF"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# States and Badges
state-icon-color: "#FFF"
state-icon-active-color: rgba(255, 214, 10, 1)
paper-item-icon-active-color: rgba(255, 214, 10, 1)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: "#FFF"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
paper-slider-secondary-color: var(--paper-slider-knob-color)
paper-slider-container-color: rgba(255, 255, 255, 0.5)
paper-slider-font-color: "#000"
ha-slider-background: none !important
# Labels
label-badge-background-color: "#23232E"
label-badge-text-color: "#F1F1F1"
label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode
# Cards
card-background-color: var(--secondary-background-color) # Unused entities table background
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: 20px
ha-card-background: rgba(10, 10, 10, 0.4)
paper-card-background-color: var(--ha-card-background)
code-editor-background-color: var(--disabled-text-color)
# Toggles
paper-toggle-button-checked-button-color: "#484848"
paper-toggle-button-checked-bar-color: "#484848"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
# Table row
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
# Switches
switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
switch-checked-button-color: "#FFF"
# Other
paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info
paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself)
more-info-header-background: rgba(25, 25, 25, 0.5)
lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
app-header-background-color: rgba(155, 155, 155, 0.8)
markdown-code-background-color: "#464646"
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
# mini-media-player-artwork-opacity: 0.7 # causing some bug
Do you still need a edit mode button?
Edit mode 3 dot is there close to the right but changed the color and not see.
ha-button-menu {
right: -25px !important;
color: rgb(74, 27, 43);
I need that yes. But dont need that unused space on red circle. Before 117 update it is working good with this I think:
/* This leaves space for the buttons on the right of the tabs bar.
Change 112px to 56px if you don't use voice icon. */
paper-tabs {
margin-right: 20px !important;
But now it is not working.
So do I need to have to put this in the wiki?
paper-tabs
ha-tabs
Ok, I change it and nothing happend:
/* This leaves space for the buttons on the right of the tabs bar.
Change 112px to 56px if you don't use voice icon. */
ha-tabs {
margin-right: 20px !important;
}
Try
position: absolute;
left: 0;
right: 20px;
This is change now but too much. The time last character disappered.
Can you send a screenshot? You can increase the right variable if needed.
With this setup:
/* This leaves space for the buttons on the right of the tabs bar.
Change 112px to 56px if you don't use voice icon. */
ha-tabs {
position: absolute;
left: 0;
right: 5px;
}
The 3 dot now on the left side.
Prior to 0.117 this:
card-mod-card: |
ha-card.top-level-card div.card-header {
padding-top: 0px;
padding-bottom: 28px;
}
Used to shift the card names up to be in line with my other cards. Now it has no effect. Can anyone see why?
Was changed from div to h1
Thanks Kendell. I couldn’t see the forest for the trees. I was looking at the class not the div/h1
