Hi again Gareth,
I’m trying to make the vertical lines but can’t figure it. Could you please help?
I tried this:
content: |
## Καλώς ήρθες, {{user}}
style: |
ha-card {
margin: 0px 14px -5px 14px;
box-shadow: none;
background: none;
}
ha-icon {
float: right;
}
h2 {
font-size: 26px;
font-weight: 100;
padding-left: 10px;
border-left: 3px solid var(--colour-yellow);
}
type: markdown
But got this:
AgMA, sorry for slow response, work got in the way of home assistant tinkering for the last few weeks.
Not sure what happened but something in v111 (may have even been v110, i’ve lost track of time) and since i’d stolen the code form someone else i couldn’t actually see what had broken or try to fix, so have started again with the headings.
As you can see above, i’ve managed to replicate the look with much simpler code, or at least code i understand.
i’ve used this site, to help me with it, gives the output as CSS.
Here’s the card code, this if for the indented horizontal line:
content: |
### Navigation
style: |
ha-card {
padding: 0px 0px 0px 0px;
margin: 0px auto 0px 20px;
display: block;
border-top: 0px;
border-left: 10px;
border-right: 0px;
border-bottom: 0px;
border-color: var(--primary-color);
border-style: solid;
background: none;
box-shadow: none;
border-radius: 0%
}
type: markdown
Haven’t settled on which look i like but there’s a lot that can be achieved just using the borders:
content: Navigation
style: |
ha-card {
padding: 0px 0px 0px 0px;
margin: 0px auto 0px auto;
display: block;
border-top: 0px;
border-left: 10px;
border-right: 0px;
border-bottom: 1px;
border-color: var(--primary-color);
border-style: solid;
background: none;
box-shadow: none;
border-radius: 0%;
font-size: 200%;
font-weight: 150
}
type: markdown
Gives this:
which i quite like the look of
This code goes to Lovelace?
yes it does
Nah, same result again. What am I missing?
)
do you mind sharing the code?
If you like it, but find the ‘template editor’ hard to read I will be happy if you can alter some of the code at the end of the theme file and share with me again… right now I can’t find combination that I find satisfying…
I made a theme named Homekit Infused which was meant to be a simple homekit replacement. The project got a lot bigger than I anticipated 
.
You can check out the links here: https://github.com/jimz011/homekit-infused
Oh and it is available in 11 different colors!
Hi Adam,
sorry if I ask you again
Your theme is the best in my opinion.
Can you post a fresh link again please ?
Thanks a lot
Denis
Here’s my theme! It’s available on HACs:
I also created two extensions that should go well with this theme, but also every other transparent cards theme:
They both should be available on HACs very soon
That looks amazing mate, Well done.
I made my own version of a dark theme slightly transparant
Dark-Sjefske:
# Global
lovelace-background: 'center / cover no-repeat url("https://cdn.hipwallpaper.com/i/82/46/quiEhb.jpg") fixed'
# Colors
text-color: '#f0f0f0' # Grey text
text-medium-light-color: '#bbbcbf' # Medium-light grey text
text-medium-color: '#9d9ea3' # Medium grey text
text-dark-color: '#7b7c85' # Dark grey text
accent-color: '#ffa500' # Orange
accent-medium-color: '#d49115' # Decent orange
background-color: '#000000' # BLACK background
background-color-transp: 'rgba(150, 150, 150, 0.1)' # white transparant background
# Header
app-header-background-color: 'var(--background-color)' # Background color
# Primair
primary-color: 'var(--accent-color)' # Sliders + media player
divider-color: 'var(--text-medium-color)'
# Text
text-primary-color: 'var(--text-color)'
# Left Menu
paper-listbox-background-color: 'var(--background-color)' # Background
sidebar-icon-color: 'var(--text-medium-color)' # icons
sidebar-selected-icon-color: 'var(--text-medium-light-color)' # Selected row icon and background (15%)
sidebar-selected-text-color: 'var(--text-color)' # Selected row label
# UI
paper-card-header-color: 'var(--text-color)' # Title in settings
primary-background-color: 'var(--background-color)' # Background (also title background in left menu)
mdc-theme-primary: 'var(--accent-medium-color)' # Action Buttons (save, restart etc.)
card-background-color: 'var(--background-color)' # Entity Registry Background
# Card
paper-card-background-color: 'var(--background-color-transp)' # Background
primary-text-color: 'var(--text-color)'
paper-listbox-color: 'var(--text-color)' # TEXT IN POPUP BOX
light-primary-color: 'var(--text-dark-color)'
secondary-text-color: 'var(--text-medium-color)'
disabled-text-color: 'var(--text-dark-color)'
paper-dialog-button-color: 'var(--text-medium-color)'
secondary-background-color: 'var(--background-color)' # Background more info title
ha-card-border-radius: '6px'
# 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
# Icons
paper-item-icon-color: 'var(--text-dark-color)' # Off
paper-item-icon-active-color: 'var(--accent-color)' # On
# Switches
switch-checked-button-color: 'var(--text-medium-color)' # Knob On
switch-unchecked-button-color: 'var(--text-medium-color)' # Knob Off
switch-checked-track-color: 'var(--accent-color)' # Background On
switch-unchecked-track-color: 'var(--text-dark-color)' # Background Off
# Slider
# Shadows
ha-card-box-shadow: 'inset 0px 0px 2px 2px rgba(255, 255, 255, 0.1)'
Nice one… did install this one…
Here is my theme, available to install via HACS
https://community.home-assistant.io/t/transparent-blue-custom-theme
Thank you very much to @PhysicalMagic for the amazing work done. I tried to use these config values but they don’t seem to work properly on recent lovelace versions, many colors don’t apply in the correct places. So I decided to use that as inspiration to make something similar looking and very simple.
MyDark:
base-hue: '220' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
base-sat: '16%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
huesat: 'var(--base-hue), var(--base-sat),'
# Primary Color
primary-color: 'hsl(var(--huesat) 60%)'
accent-color: 'hsl(var(--huesat) 60%)'
# Nav Bar
app-header-background-color: 'hsl(var(--huesat) 20%)'
app-header-text-color: 'hsl(var(--huesat) 100%)'
# Backgrounds
sidebar-background-color: 'hsl(var(--huesat) 20%)'
primary-background-color: 'hsl(var(--huesat) 16%)'
# Sidebar
sidebar-icon-color: 'hsl(var(--huesat) 60%)'
sidebar-text-color: 'hsl(var(--huesat) 60%)'
sidebar-selected-icon-color: 'hsl(var(--huesat) 90%)'
sidebar-selected-text-color: 'hsl(var(--huesat) 90%)'
# Text
primary-text-color: 'hsl(var(--huesat) 90%)'
secondary-text-color: 'hsl(var(--huesat) 90%)'
disabled-text-color: 'hsl(var(--huesat) 70%)'
# Divider
divider-color: 'hsla(0, 0%, 0%, 0)'
dark-divider-opacity: '0'
light-divider-opacity: '0'
# Card
card-background-color: 'hsl(var(--huesat) 12%)'
ha-card-background: 'var(--card-background-color)'
ha-card-box-shadow: 'inset 0px 0px 0px 4px hsl(var(--huesat) 18%)'
# Dialog
dialog-backdrop-filter: 'blur(2px)'
EDIT:
I’ve made a few updates and improvements to this config, feel free to reach out if you are interested.
Could I ask for information on where to get Aurora Frost theme and how to use it? because in this post I did not find information about it