# Theme name
my_custom_theme:
# General Colors
primary-color: “#3498db” # Main color for buttons, links, and highlights.
accent-color: “#2ecc71” # Accent color for items like switches, badges, and entity controls.
dark-primary-color: “#2980b9” # Darker variant of the primary color (used in dark mode).
light-primary-color: “#5dade2” # Lighter variant of the primary color (used in light mode).
# Background Colors
background-color: “#ffffff” # General background color for the UI (used in main view).
secondary-background-color: “#f5f5f5” # Background color for secondary elements (sidebar, cards).
paper-card-background-color: “#f7f7f7” # Default background color for Lovelace cards.
paper-card-header-color: “#333333” # Card header text color.
card-background-color: “#e0e0e0” # Background color for the entire Lovelace card (can be overridden by card styles).
# Header and App Bar Colors
app-header-background-color: “#2c3e50” # Color for the header bar.
app-header-text-color: “#ffffff” # Text color for the header (main bar at the top).
app-header-border-color: “#34495e” # Border color under the header.
# Text Colors
primary-text-color: “#000000” # Text color for general content (e.g., entity names, titles).
secondary-text-color: “#7f8c8d” # Text color for secondary text (e.g., labels, small text).
disabled-text-color: “#bdc3c7” # Text color for disabled items (buttons, switches).
# Icon Colors
icon-color: “#3498db” # Default color for icons.
icon-active-color: “#2ecc71” # Color for active icons.
icon-hover-color: “#9b59b6” # Color for icons when hovered.
# Button Styles
button-primary-color: “#2980b9” # Primary button background color.
button-secondary-color: “#e74c3c” # Secondary button background color.
button-text-color: “#ffffff” # Text color for buttons.
button-icon-color: “#ffffff” # Icon color for buttons.
button-radius: “8px” # Rounded corners radius for buttons.
# Sidebar (Drawer) Colors
sidebar-background-color: “#34495e” # Background color of the sidebar.
sidebar-text-color: “#ecf0f1” # Text color of the sidebar.
sidebar-selected-background-color: “#2ecc71” # Background color of selected items in the sidebar.
# Switch and Toggle Colors
switch-background-color: “#34495e” # Background color for switches.
switch-checked-color: “#2ecc71” # Color of the switch when checked.
switch-unchecked-color: “#e74c3c” # Color of the switch when unchecked.
# State Icon Colors
state-icon-color-on: “#2ecc71” # Color for the icon when the state is “on” or active.
state-icon-color-off: “#e74c3c” # Color for the icon when the state is “off” or inactive.
# Card Shadows & Borders
card-box-shadow: “0px 2px 6px rgba(0,0,0,0.1)” # Shadow effect for cards.
card-border-radius: “12px” # Rounded corners for cards.
# Progress Indicators (e.g., for loading or progress bars)
progress-bar-color: “#3498db” # Color for progress bars.
progress-bar-background-color: “#e0e0e0” # Background color for progress bars (inactive state).
# Form Fields (e.g., input fields, text areas)
input-text-color: “#2c3e50” # Text color in input fields.
input-background-color: “#ecf0f1” # Background color for input fields.
input-border-color: “#bdc3c7” # Border color for input fields.
# Dialog (Pop-up) Colors
dialog-background-color: “#ffffff” # Background color for dialogs and modals.
dialog-border-radius: “10px” # Border radius for dialogs.
dialog-text-color: “#2c3e50” # Text color for the content inside the dialogs.
# Hover Effects (for general UI elements)
hover-background-color: “#ecf0f1” # Background color for items when hovered (e.g., buttons, list items).
hover-text-color: “#2980b9” # Text color when hovered.
# Card Hover Effect (specifically for Lovelace cards)
card-hover-background-color: “#d5dbdb” # Hover effect color for cards (when mouse hovers over a card).
# Disabled Elements
disabled-background-color: “#bdc3c7” # Background color for disabled elements.
disabled-text-color: “#7f8c8d” # Text color for disabled elements (gray-out effect).
# Entity and State-related Colors
entity-state-on-color: “#2ecc71” # Color for entities when they are in an “on” state.
entity-state-off-color: “#e74c3c” # Color for entities when they are in an “off” state.
entity-state-unknown-color: “#f39c12” # Color for entities when the state is unknown.
# Custom Card Styles (if using Card Mod or similar)
custom-card-background-color: “#ffffff” # Background color for custom cards.
custom-card-text-color: “#2c3e50” # Text color for custom cards.
# Other UI Colors
tooltip-background-color: “#2c3e50” # Background color for tooltips.
tooltip-text-color: “#ecf0f1” # Text color inside tooltips.