My try at a modern looking dashboard.
I’ve combined some elements from different dashboards I found here on the forum, like Bubblecard and footer from Mobile First dashboard.
On the settings page, I can change colors of the theme with a simple click - depending on the mood.
I love it! Thanks a lot for sharing that! 
Very nice!
Looks awesome ! What theme you are using?
It’s a modify version of noctis:
#########################################################################
# #
# Noctis was my initial theme, it's now modified and maintened by me. #
# This file is mandatory if you want everything to work. #
# #
#########################################################################
noctis_blue:
# Google Font import
google_font_import: '@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap");'
# Fonts
primary-font-family: "Poppins, 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)"
ha-card-header-font-family: "var(--primary-font-family)"
# Text
text-color: "rgba(249,208,169,255)"
primary-text-color: "var(--text-color)"
text-primary-color: "var(--text-color)"
sidebar-text-color: "var(--text-color)"
pbs-button-color: "var(--text-color)"
pbs-button-rgb-color: "var(--text-color)"
pbs-button-rgb-state-color: "var(--text-color)"
pbs-button-rgb-default-color: "var(--text-color)"
rgb-state-default-color: "var(--text-color)"
pbs-button-rgb-fallback: "var(--text-color)"
secondary-text-color: "#BAC0C6"
text-medium-light-color: "#A0A2A8"
text-medium-color: "#80828A"
disabled-text-color: "#626569"
primary-color: "var(--accent-color)"
# Text Fields an Dropdown
mdc-text-field-fill-color: "var(--background-color)"
mdc-text-field-ink-color: "var(--text-color)"
mdc-select-fill-color: "var(--background-color)"
mdc-text-field-label-ink-color: "var(--secondary-text-color)"
input-fill-color: "var(--background-color)"
input-ink-color: "var(--text-color)"
input-label-ink-color: "var(--text-color)"
input-disabled-fill-color: "var(--background-color)"
input-disabled-ink-color: "var(--disabled-text-color)"
input-disabled-label-ink-color: "var(--disabled-text-color)"
input-idle-line-color: "var(--background-color)"
input-dropdown-icon-color: "var(--secondary-text-color)"
input-hover-line-color: "var(--primary-color)"
code-editor-background-color: "#222c40"
codemirror-property: "var(--accent-color)"
# Main Colors
app-header-background-color: "rgba(40,51,74,255)" #'#242e42' bakgrunnsfarge
header-height: 48px
accent-color: "rgba(116,132,140,0.3)" #'rgba(96,125,124,100)' aktivert kortfarge
accent-medium-color: "var(--accent-color)"
# Background
background-color: "rgba(40,51,74,255)" #'#242e42'
primary-background-color: "var(--background-color)"
background-color-2: "rgba(49,57,78,1)" #'#2e4a74' kort bakgrunn
secondary-background-color: "none"
markdown-code-background-color: "var(--background-color)"
background-color-footer: "rgb(241,220,198)"
footer-color-1: "rgba(40,51,74, 0)"
footer-color-2: "rgba(40,51,74, 0.85)"
footer-accent-color: "rgba(116,132,140,0.3)" #'rgba(40,51,74, 100)'
# Card
card-background-color: "var(--ha-card-background)"
ha-card-background: "rgba(40,51,74,255)" #'#111b2d' img_cell bakgrunn
ha-card-box-shadow: "none"
ha-card-border-radius: "28px"
ha-card-border-style: "none !important"
ha-card-border-color: "none !important"
border-color: "none"
grid-card-gap: "14px"
border-style: "none !important"
ha-card-border-width: "0px"
# Icons
paper-item-icon-color: "var(--text-color)"
paper-item-icon-active-color: "var(--text-color)"
# Sidebar
sidebar-background-color: "var(--background-color)"
sidebar-icon-color: "#98a7b9"
sidebar-selected-icon-color: "var(--accent-color)"
sidebar-selected-text-color: "var(--text-color)"
paper-listbox-background-color: "var(--sidebar-background-color)"
divider-color: "var(--background-color)"
light-primary-color: "var(--ha-card-background)"
# Sliders
paper-slider-knob-color: "var(--accent-color)"
paper-slider-pin-color: "var(--background-color-2)"
paper-slider-active-color: "var(--background-color)"
paper-slider-container-color: "var(--background-color-2)"
# Toggle:
paper-toggle-button-checked-bar-color: "var(--accent-color)"
mdc-theme-primary: "var(--accent-color)"
# Switch
switch-unchecked-color: "#70889e"
switch-checked-button-color: "var(--accent-color)"
switch-unchecked-track-color: "var(--background-color-2)"
switch-checked-track-color: "var(--background-color-2)"
# Radio Button
paper-radio-button-checked-color: "var(--accent-color)"
# Popups
more-info-header-background: "var(--secondary-background-color)"
paper-dialog-background-color: "var(--background-color)"
# Tables
table-row-background-color: "var(--background-color)"
table-row-alternative-background-color: "var(--ha-card-background)"
# Badges
label-badge-background-color: "var(--background-color)"
label-badge-text-color: "var(--text-primary-color)"
label-badge-red: "rgba(73,85,108,1)"
label-badge-blue: "rgba(26,137,245,1)"
label-badge-green: "rgba(0,202,139,1)"
label-badge-yellow: "rgba(222,176,107,1)"
paper-input-container-focus-color: "var(--accent-color)"
# Custom Header
ch-background: "var(--background-color)"
ch-active-tab-color: "var(--accent-color)"
ch-notification-dot-color: "var(--accent-color)"
ch-all-tabs-color: "var(--sidebar-icon-color)"
ch-tab-indicator-color: "var(--accent-color)"
# Mini Mediaplayer
mini-media-player-base-color: "var(--text-color)"
mini-media-player-accent-color: "var(--accent-color)"
# Alarm
alarm-color-armed: "rgba(247,53,67,1)"
#modes:
# light:
# background-color: '#435334'
# ha-card-background: 'rgba(158, 179, 132, 0.2)'
# background-color-2: '#CEDEBD'
# accent-color: 'rgba(250, 241, 228, 0.3)'
# dark:
# background-color: '#3b322d'
# ha-card-background: 'rgba(255, 242, 216, 0.2)'
# background-color-2: '#635850'
# accent-color: 'rgba(250, 241, 228, 0.3)'
card-mod-theme: noctis
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 768px) {
.header {
display: none;
opacity: 0;
}
#view {
padding-top: 0 !important;
margin-top: 0 !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(0,0,0,.6);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none !important;
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: none;
}
card-mod-view-yaml: |
hui-sidebar-view:
$: |
@media only screen and (min-width: 768px) {
.container {
max-width: 520px;
margin: auto !important;
width: -webkit-fill-available;
}
}
#wrapper: |
$: |
#progressContainer {
border-radius: 14px !important;
}
.: |
"#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
border-radius: 14px !important;
}
card-mod-card: |
ha-card {
transition: none;
border-style: none !important;
}
Hello Vintage89,
how is it possible to switch the theme after i have put it to my theme folder?
Must i make it with the popup buttons?
You can either go to your user account, bottom of the left side, and there you can set theme.
Or you can go to Developer Tools - Services and run
service: frontend.set_theme
data:
name: noctis_blue
Change noctis_blue if you have you’re theme named something else
I have already the nortis_blue them in my account, but my question is, how i can switch between the light and the dark mode, that´s not possible there?
Looks awesome ! Are you willing to share your configuration ?
Ahh,
Noctis blue have only one mode.
I’ve made several that I can switch between: blue, green, brown. And then an input_select that triggers automation to switch, depending on it’s state, blue, green or brown.
#########################################################################
# #
# Noctis was my initial theme, it's now modified and maintened by me. #
# This file is mandatory if you want everything to work. #
# #
#########################################################################
noctis_green:
# Fonts
primary-font-family: 'Julius Sans One'
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)"
ha-card-header-font-family: "var(--primary-font-family)"
# Text
text-color: 'rgba(249,208,169,255)'
primary-text-color: 'var(--text-color)'
text-primary-color: 'var(--text-color)'
sidebar-text-color: 'var(--text-color)'
pbs-button-color: 'var(--text-color)'
pbs-button-rgb-color: 'var(--text-color)'
pbs-button-rgb-state-color: 'var(--text-color)'
pbs-button-rgb-default-color: 'var(--text-color)'
rgb-state-default-color: 'var(--text-color)'
pbs-button-rgb-fallback: 'var(--text-color)'
secondary-text-color: "#BAC0C6"
text-medium-light-color: '#A0A2A8'
text-medium-color: '#80828A'
disabled-text-color: '#626569'
primary-color: 'var(--accent-color)'
# Text Fields an Dropdown
mdc-text-field-fill-color: 'var(--background-color)'
mdc-text-field-ink-color: 'var(--text-color)'
mdc-select-fill-color: 'var(--background-color)'
mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
input-fill-color: 'var(--background-color)'
input-ink-color: 'var(--text-color)'
input-label-ink-color: 'var(--text-color)'
input-disabled-fill-color: 'var(--background-color)'
input-disabled-ink-color: 'var(--disabled-text-color)'
input-disabled-label-ink-color: 'var(--disabled-text-color)'
input-idle-line-color: 'var(--background-color)'
input-dropdown-icon-color: 'var(--secondary-text-color)'
input-hover-line-color: 'var(--primary-color)'
code-editor-background-color: '#222c40'
codemirror-property: 'var(--accent-color)'
# Main Colors
app-header-background-color: 'rgba(65,89,88, 100)' #'#242e42' bakgrunnsfarge
header-height: 48px
accent-color: 'rgb(193, 208, 181, 0.3)' #'rgba(96,125,124,100)' aktivert kortfarge
accent-medium-color: 'var(--accent-color)'
# Background
background-color: 'rgba(65,89,88, 100)' #'#242e42'
primary-background-color: 'var(--background-color)'
background-color-2: 'rgba(86,113,113,1)' #'#2e4a74' kort bakgrunn
secondary-background-color: 'none'
markdown-code-background-color: 'var(--background-color)'
background-color-footer: 'rgb(241,220,198)'
footer-color-1: 'rgba(65,89,88, 0)'
footer-color-2: 'rgba(65,89,88, 0.85)'
footer-accent-color: 'rgba(65,89,88, 100)'
# Card
card-background-color: 'var(--ha-card-background)'
ha-card-background: 'rgba(65,89,88, 100)' #'#111b2d' img_cell bakgrunn
ha-card-box-shadow: 'none'
ha-card-border-radius: '28px'
ha-card-border-style: 'none !important'
ha-card-border-color: 'none !important'
border-color: 'none'
grid-card-gap: '14px'
border-style: 'none !important'
ha-card-border-width: "0px"
# Icons
paper-item-icon-color: 'var(--text-color)'
paper-item-icon-active-color: 'var(--accent-color)'
# Sidebar
sidebar-background-color: 'var(--background-color)'
sidebar-icon-color: '#98a7b9'
sidebar-selected-icon-color: 'var(--accent-color)'
sidebar-selected-text-color: 'var(--text-color)'
paper-listbox-background-color: 'var(--sidebar-background-color)'
divider-color: 'var(--background-color)'
light-primary-color: 'var(--ha-card-background)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--background-color-2)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'var(--background-color-2)'
# Toggle:
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
mdc-theme-primary: 'var(--accent-color)'
# Switch
switch-unchecked-color: '#70889e'
switch-checked-button-color: 'var(--accent-color)'
switch-unchecked-track-color: 'var(--background-color-2)'
switch-checked-track-color: 'var(--background-color-2)'
# Radio Button
paper-radio-button-checked-color: 'var(--accent-color)'
# Popups
more-info-header-background: 'var(--secondary-background-color)'
paper-dialog-background-color: 'var(--background-color)'
# Tables
table-row-background-color: 'var(--background-color)'
table-row-alternative-background-color: 'var(--ha-card-background)'
# Badges
label-badge-background-color: 'var(--background-color)'
label-badge-text-color: 'var(--text-primary-color)'
label-badge-red: 'rgba(73,85,108,1)'
label-badge-blue: 'rgba(26,137,245,1)'
label-badge-green: 'rgba(0,202,139,1)'
label-badge-yellow: 'rgba(222,176,107,1)'
paper-input-container-focus-color: 'var(--accent-color)'
# Custom Header
ch-background: 'var(--background-color)'
ch-active-tab-color: 'var(--accent-color)'
ch-notification-dot-color: 'var(--accent-color)'
ch-all-tabs-color: 'var(--sidebar-icon-color)'
ch-tab-indicator-color: 'var(--accent-color)'
# Mini Mediaplayer
mini-media-player-base-color: 'var(--text-color)'
mini-media-player-accent-color: 'var(--accent-color)'
# Alarm
alarm-color-armed: 'rgba(247,53,67,1)'
#modes:
# light:
# background-color: '#435334'
# ha-card-background: 'rgba(158, 179, 132, 0.2)'
# background-color-2: '#CEDEBD'
# accent-color: 'rgba(250, 241, 228, 0.3)'
# dark:
# background-color: '#3b322d'
# ha-card-background: 'rgba(255, 242, 216, 0.2)'
# background-color-2: '#635850'
# accent-color: 'rgba(250, 241, 228, 0.3)'
card-mod-theme: noctis
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 768px) {
.header {
display: none;
opacity: 0;
}
#view {
padding-top: 0 !important;
margin-top: 0 !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(0,0,0,.6);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none !important;
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: none;
}
card-mod-view-yaml: |
hui-sidebar-view:
$: |
@media only screen and (min-width: 768px) {
.container {
max-width: 520px;
margin: auto !important;
width: -webkit-fill-available;
}
}
#wrapper: |
$: |
#progressContainer {
border-radius: 14px !important;
}
.: |
"#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
border-radius: 14px !important;
}
card-mod-card: |
ha-card {
transition: none;
border-style: none !important;
}
#########################################################################
# #
# Noctis was my initial theme, it's now modified and maintened by me. #
# This file is mandatory if you want everything to work. #
# #
#########################################################################
noctis_brown:
# Fonts
primary-font-family: 'Julius Sans One'
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)"
ha-card-header-font-family: "var(--primary-font-family)"
# Text
text-color: '#ffffff'
primary-text-color: 'var(--text-color)'
text-primary-color: 'var(--text-color)'
sidebar-text-color: 'var(--text-color)'
pbs-button-color: 'var(--text-color)'
pbs-button-rgb-color: 'var(--text-color)'
pbs-button-rgb-state-color: 'var(--text-color)'
pbs-button-rgb-default-color: 'var(--text-color)'
rgb-state-default-color: 'var(--text-color)'
pbs-button-rgb-fallback: 'var(--text-color)'
secondary-text-color: "#BAC0C6"
text-medium-light-color: '#A0A2A8'
text-medium-color: '#80828A'
disabled-text-color: '#626569'
primary-color: 'var(--accent-color)'
# Text Fields an Dropdown
mdc-text-field-fill-color: 'var(--background-color)'
mdc-text-field-ink-color: 'var(--text-color)'
mdc-select-fill-color: 'var(--background-color)'
mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
input-fill-color: 'var(--background-color)'
input-ink-color: 'var(--text-color)'
input-label-ink-color: 'var(--text-color)'
input-disabled-fill-color: 'var(--background-color)'
input-disabled-ink-color: 'var(--disabled-text-color)'
input-disabled-label-ink-color: 'var(--disabled-text-color)'
input-idle-line-color: 'var(--background-color)'
input-dropdown-icon-color: 'var(--secondary-text-color)'
input-hover-line-color: 'var(--primary-color)'
code-editor-background-color: '#222c40'
codemirror-property: 'var(--accent-color)'
# Main Colors
app-header-background-color: '#3b322d' #'#242e42' bakgrunnsfarge
header-height: 48px
accent-color: 'rgba(250, 241, 228, 0.3)'
accent-medium-color: 'var(--accent-color)'
# Background
background-color: '#3b322d' #'#242e42'
primary-background-color: 'var(--background-color)'
background-color-2: '#635850' #'#2e4a74' kort bakgrunn
secondary-background-color: 'none'
markdown-code-background-color: 'var(--background-color)'
footer-color-1: 'rgba(59, 50, 45, 0)'
footer-color-2: 'rgba(59, 50, 45, 0.85)'
footer-accent-color: 'rgba(250, 241, 228, 0.3)'
# Card
card-background-color: 'var(--ha-card-background)'
ha-card-background: 'rgba(255, 242, 216, 0.2)' #'#111b2d'
ha-card-box-shadow: 'none'
ha-card-border-radius: '28px'
ha-card-border-style: 'none !important'
ha-card-border-color: 'none !important'
border-color: 'none'
grid-card-gap: '14px'
border-style: 'none !important'
ha-card-border-width: "0px"
# Icons
paper-item-icon-color: 'var(--text-color)'
paper-item-icon-active-color: 'var(--accent-color)'
# Sidebar
sidebar-background-color: 'var(--background-color)'
sidebar-icon-color: '#98a7b9'
sidebar-selected-icon-color: 'var(--accent-color)'
sidebar-selected-text-color: 'var(--text-color)'
paper-listbox-background-color: 'var(--sidebar-background-color)'
divider-color: 'var(--background-color)'
light-primary-color: 'var(--ha-card-background)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--background-color-2)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'var(--background-color-2)'
# Toggle:
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
mdc-theme-primary: 'var(--accent-color)'
# Switch
switch-unchecked-color: '#70889e'
switch-checked-button-color: 'var(--accent-color)'
switch-unchecked-track-color: 'var(--background-color-2)'
switch-checked-track-color: 'var(--background-color-2)'
# Radio Button
paper-radio-button-checked-color: 'var(--accent-color)'
# Popups
more-info-header-background: 'var(--secondary-background-color)'
paper-dialog-background-color: 'var(--background-color)'
# Tables
table-row-background-color: 'var(--background-color)'
table-row-alternative-background-color: 'var(--ha-card-background)'
# Badges
label-badge-background-color: 'var(--background-color)'
label-badge-text-color: 'var(--text-primary-color)'
label-badge-red: 'rgba(73,85,108,1)'
label-badge-blue: 'rgba(26,137,245,1)'
label-badge-green: 'rgba(0,202,139,1)'
label-badge-yellow: 'rgba(222,176,107,1)'
paper-input-container-focus-color: 'var(--accent-color)'
# Custom Header
ch-background: 'var(--background-color)'
ch-active-tab-color: 'var(--accent-color)'
ch-notification-dot-color: 'var(--accent-color)'
ch-all-tabs-color: 'var(--sidebar-icon-color)'
ch-tab-indicator-color: 'var(--accent-color)'
# Mini Mediaplayer
mini-media-player-base-color: 'var(--text-color)'
mini-media-player-accent-color: 'var(--accent-color)'
# Alarm
alarm-color-armed: 'rgba(247,53,67,1)'
#modes:
# light:
# background-color: '#435334'
# ha-card-background: 'rgba(158, 179, 132, 0.2)'
# background-color-2: '#CEDEBD'
# accent-color: 'rgba(250, 241, 228, 0.3)'
# dark:
# background-color: '#3b322d'
# ha-card-background: 'rgba(255, 242, 216, 0.2)'
# background-color-2: '#635850'
# accent-color: 'rgba(250, 241, 228, 0.3)'
card-mod-theme: noctis
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 768px) {
.header {
display: none;
opacity: 0;
}
#view {
padding-top: 0 !important;
margin-top: 0 !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(0,0,0,.6);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none !important;
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: none;
}
card-mod-view-yaml: |
hui-sidebar-view:
$: |
@media only screen and (min-width: 768px) {
.container {
max-width: 520px;
margin: auto !important;
width: -webkit-fill-available;
}
}
#wrapper: |
$: |
#progressContainer {
border-radius: 14px !important;
}
.: |
"#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
border-radius: 14px !important;
}
card-mod-card: |
ha-card {
transition: none;
border-style: none !important;
}
I’ve changed the setup a lot since this - gone more over to pop-ups. But if you’re still interested, I can share some tonight 
I’m definitely interested Vintage89. Looking forward on what you can share. Thanks !
Uploaded the main page, where also the code for all the pop-ups are.
Also some templates I use to clean up the code, and som pictures
Fantastic. Much Appreciated !
Nice job! Looks great…
But, I have a question:
Browsing your code, I noticed this line on the top:
# Google Font import
google_font_import: '@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap");'
How does this work? I do not seem to find the defined CSS variable to be used anywhere else where it get’s triggered to actually import the Google Font?
Ahh, Sorry. That one is a leftover from when I asked Chat GPT how to import new fonts😅 Had forgotten that I could import them as resources on the dahsboard site.
I wonder if you could use that CSS variable inside the resources field on the dashboard, or if there is any other way how you could just use your theme to override the font, without the need to add this specifically on the resources-section for the dashboard management…
Would defiantly makes sense and a cool/handy addition defining this in a theme (where it belongs imo), rather than the resources of the dashboard…
Chat gpt told ne to add that in the beginning of the theme, and then call it from fon-family. But I could never get it work