Fairy Fantasy Dark Theme for Home Assistant

Share your Projects! Themes
1

Introducing the “Fairy Fantasy Dark” Theme for Home Assistant

Hello everyone,

I’m thrilled to share with you my very first Home Assistant theme – Fairy Fantasy Dark! This theme embraces a magical blend of blue and yellow, capturing a whimsical, fairy-tale aesthetic designed to bring a touch of enchantment to your smart home.

Theme Overview

Fairy Fantasy Dark is a custom dark theme that:

  • Uses a blue and yellow color palette to evoke a sense of wonder and magic.
  • Offers a sleek, modern design with subtle transparency and gradients.
  • Ensures all Home Assistant elements and Material Design Components (MDC) are cohesively styled.

How It Was Created

This theme and its accompanying community post were generated entirely by AI. Here’s a brief overview of the models and process involved:

  1. Prompt Refinement:

    • Model Used: gpt4o
    • This model helped refine my initial prompt to ensure clarity and depth in the theme design requirements.

  2. Final Code Generation:

    • Model Used: gpt03-mini-high with deep research enabled
    • It was responsible for generating the final YAML code for the theme, ensuring comprehensive coverage of Home Assistant elements and MDC variables.

  3. Community Post Creation:

    • Model Used: gpto3-mini
    • This model crafted the community post you are reading right now, providing a clear, detailed, and visually appealing presentation of the theme.

YAML Code

Fairy Fantasy Dark:
  # Base Colors
  primary-color: "#42A5F5" # Primary UI color (magical blue)
  accent-color: "#FFD700" # Accent color (fairy gold)
  dark-primary-color: "#1E88E5" # Darker variant of primary (blue shade)
  light-primary-color: "#64B5F6" # Lighter variant of primary (blue shade)
  primary-text-color: "#FFFFFF" # Main text color (white)
  secondary-text-color: "#B3B3B3" # Secondary text color (gray)
  disabled-text-color: "#7F7F7F" # Disabled text color (dim gray)
  success-color: "#52C41A" # Success state color (green)
  warning-color: "#FFC107" # Warning state color (amber)
  error-color: "#FF5555" # Error state color (soft red)
  # RGB values for theme (for transparency and effects)
  rgb-primary-color: "66, 165, 245"
  rgb-accent-color: "255, 215, 0"
  rgb-primary-text-color: "255, 255, 255"
  rgb-secondary-text-color: "179, 179, 179"
  rgb-disabled-text-color: "127, 127, 127"
  # Backgrounds
  primary-background-color: "#1B1F3B" # Deep navy blue background
  secondary-background-color: "#1B1F3B" # Same as primary background for consistency
  lovelace-background: "radial-gradient(circle at 30% 15%, rgba(66, 165, 245, 0.15) 0%, rgba(66, 165, 245, 0) 70%), linear-gradient(135deg, #1B1F3B 0%, #10142F 100%)"
  # Cards
  card-background-color: "rgba(27, 31, 59, 0.8)" # Slightly transparent card background for depth
  paper-card-background-color: "rgba(27, 31, 59, 0.8)"
  ha-card-border-radius: "12px" # Smooth rounded corners on cards
  ha-card-box-shadow: "0 0 15px 3px rgba(var(--rgb-accent-color), 0.25)" # Soft yellow glow around cards
  # Dividers & Borders
  divider-color: "rgba(255, 255, 255, 0.2)" # Subtle divider lines (mystical shimmer)
  app-header-border-color: "rgba(255, 255, 255, 0.2)" # Subtle header bottom border (if used)
  # Sidebar
  sidebar-background-color: "rgba(27, 31, 59, 0.85)" # Semi-transparent sidebar background for an ethereal feel
  sidebar-icon-color: var(--secondary-text-color)
  sidebar-text-color: var(--secondary-text-color)
  sidebar-selected-icon-color: var(--accent-color)
  sidebar-selected-text-color: var(--accent-color)
  sidebar-selected-background-color: "rgba(var(--rgb-accent-color), 0.1)" # Faint gold highlight on selected item
  # Header (Top Bar)
  app-header-background-color: "#1B1F3B" # Header bar background (matches background)
  app-header-text-color: var(--accent-color) # Header text/icons (golden glow)
  # Text
  text-primary-color: var(--primary-text-color)
  text-medium-color: var(--secondary-text-color)
  text-medium-light-color: var(--disabled-text-color)
  # State Icons
  state-icon-color: var(--secondary-text-color) # Inactive state icons (faded)
  state-icon-active-color: var(--accent-color) # Active state icons (glowing gold)
  state-icon-unavailable-color: var(--disabled-text-color) # Unavailable state icons (dim)
  paper-item-icon-color: var(--secondary-text-color) # Legacy icon color
  paper-item-icon-active-color: var(--accent-color) # Legacy active icon color
  # Labels & Badges
  label-badge-background-color: "rgba(27, 31, 59, 0.5)" # Translucent badge background
  label-badge-text-color: "#FFFFFF"
  label-badge-blue: "#60B1EB"
  label-badge-green: "#60EB67"
  label-badge-yellow: "#EBC860"
  label-badge-red: "#EB6065"
  # Controls (Switches, Toggles, Sliders)
  switch-checked-color: var(--primary-color)
  switch-unchecked-color: var(--disabled-text-color)
  switch-checked-button-color: var(--primary-color)
  switch-unchecked-button-color: var(--disabled-text-color)
  switch-checked-track-color: "rgba(var(--rgb-primary-color), 0.5)" # Glowing blue track for ON state
  switch-unchecked-track-color: "rgba(var(--rgb-disabled-text-color), 0.3)"
  paper-toggle-button-checked-button-color: var(--primary-color)
  paper-toggle-button-checked-bar-color: "rgba(var(--rgb-primary-color), 0.5)"
  paper-toggle-button-unchecked-button-color: var(--disabled-text-color)
  paper-toggle-button-unchecked-bar-color: "rgba(var(--rgb-disabled-text-color), 0.3)"
  slider-color: var(--primary-color)
  slider-secondary-color: var(--light-primary-color)
  slider-bar-color: var(--disabled-text-color)
  paper-slider-knob-color: var(--slider-color)
  paper-slider-knob-start-color: var(--slider-color)
  paper-slider-pin-color: var(--slider-color)
  paper-slider-pin-start-color: var(--slider-color)
  paper-slider-active-color: var(--slider-color)
  paper-slider-secondary-color: var(--slider-secondary-color)
  paper-slider-container-color: var(--slider-bar-color)
  # Dropdowns & List Items
  paper-listbox-background-color: var(--card-background-color)
  paper-listbox-color: var(--primary-text-color)
  paper-item-selected-background-color: "rgba(var(--rgb-primary-color), 0.2)" # Highlight for selected list items
  paper-item-selected-color: var(--primary-text-color)
  # Material Design (MDC) Theme Overrides
  mdc-theme-primary: var(--primary-color)
  mdc-theme-secondary: var(--accent-color)
  mdc-theme-surface: var(--card-background-color)
  mdc-theme-background: var(--primary-background-color)
  mdc-theme-on-primary: "#FFFFFF" # Text on primary-color surfaces
  mdc-theme-on-secondary: "#000000" # Text on accent-color surfaces
  mdc-theme-on-surface: var(--primary-text-color)
  mdc-theme-error: "#FF5555"
  mdc-dialog-scrim-color: "rgba(0, 0, 0, 0.6)"
  mdc-dialog-surface-color: var(--card-background-color)
  mdc-dialog-scroll-divider-color: var(--divider-color)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--secondary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-fill-color: var(--card-background-color)
  mdc-select-idle-line-color: var(--divider-color)
  mdc-select-hover-line-color: var(--primary-color)
  mdc-select-outlined-idle-border-color: var(--divider-color)
  mdc-select-outlined-hover-border-color: var(--primary-color)
  mdc-select-outlined-disabled-border-color: var(--disabled-text-color)
  mdc-text-field-ink-color: var(--primary-text-color)
  mdc-text-field-label-ink-color: var(--secondary-text-color)
  mdc-text-field-fill-color: var(--card-background-color)
  mdc-text-field-idle-line-color: var(--divider-color)
  mdc-text-field-hover-line-color: var(--primary-color)
  mdc-text-field-outlined-idle-border-color: var(--divider-color)
  mdc-text-field-outlined-hover-border-color: var(--primary-color)
  mdc-text-field-outlined-disabled-border-color: var(--disabled-text-color)
  mdc-checkbox-unchecked-color: var(--disabled-text-color)
  mdc-checkbox-disabled-color: var(--disabled-text-color)
  mdc-radio-unchecked-color: var(--disabled-text-color)
  mdc-radio-disabled-color: var(--disabled-text-color)
  mdc-button-disabled-ink-color: var(--disabled-text-color)
  mdc-button-outline-color: var(--primary-color)
  mdc-tab-text-label-color-default: var(--secondary-text-color)
  # Legacy Paper Input fields (for compatibility)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--secondary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-disabled-line-color: var(--disabled-text-color)
  input-fill-color: var(--card-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-outlined-idle-border-color: var(--divider-color)
  input-outlined-hover-border-color: var(--primary-color)
  input-outlined-disabled-border-color: var(--disabled-text-color)
  # Ripple Effects (press/hover feedback)
  paper-button-ink-color: var(--accent-color)
  paper-toggle-button-checked-ink-color: var(--accent-color)
  paper-toggle-button-unchecked-ink-color: var(--accent-color)
  # Card Headers
  ha-card-header-color: var(--primary-text-color)
  paper-card-header-color: var(--primary-text-color)
  # Tables
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--primary-background-color)

Prompts Used

Final Code Generation

Enhance this custom dark theme YAML for home assistant. 
Use blue and yellow color pallet. Fairy fantasy whimsical aesthetic. 
Ensure all ha elements have been considered including block and inline elements. 
Ensuring all Material Design Components (MDC) variables are covered.


Fairy Fantasy Dark:
  # Accent Colors
  accent-color1: "#3A45E5" # Primary magical blue
  accent-color2: "#FFC857" # Fairy gold
  accent-color3: "#A1FFCE" # Soft mint glow

  # Core Colors
  primary-color: var(--accent-color1)
  accent-color: var(--accent-color2)
  primary-background-color: "#0B1635"
  secondary-background-color: "#162447"
  card-background-color: "#1D2951"
  primary-text-color: "#E0E0E0"
  secondary-text-color: "#B0B6E0"
  disabled-text-color: "#7F849C"
  divider-color: "#4A4E6A"

  # Header
  app-header-background-color: var(--primary-background-color)
  app-header-text-color: "#FFFFFF"

  # Interactive Elements
  paper-slider-knob-color: var(--accent-color2)
  paper-slider-knob-border-color: var(--accent-color2)
  paper-slider-active-color: var(--accent-color2)
  paper-slider-secondary-color: "#E8C56E"
  switch-checked-color: var(--accent-color2)
  switch-checked-button-color: "#FFF4D3"
  switch-checked-track-color: "#E8C56E"
  paper-button-ink-color: var(--accent-color2)
  paper-tab-ink: var(--accent-color2)
  paper-item-icon-active-color: var(--accent-color2)
  paper-item-icon-color: var(--accent-color1)
  state-icon-active-color: var(--accent-color2)
  state-icon-unavailable-color: "#75798F"

  # Additional UI Elements
  paper-listbox-background-color: "#1D2951"
  sidebar-background-color: "#162447"
  sidebar-icon-color: var(--accent-color1)
  sidebar-text-color: "#D0D4EE"
  input-fill-color: "#162447"
  input-border-color: var(--accent-color2)

Community Post Creation


Now, I want you to create a Home Assistant community post for this theme.

Be clear that this theme was created using AI. Be open about how everything—from the code to this post—was generated by AI, except for the images and prompt blocks.

Provide details about the models used in the process:

GPT-4o: Used to refine my prompt.
GPT-3.5-mini-high (with deep research enabled): Used for generating the final code.
GPT-3.5-mini: Used to generate the community post.
Provide placeholders for the following:

YAML code (I will add it later—do not include actual code as it won’t render properly in the response).
Prompts used (I will add them later—do not include actual prompts as they won’t render properly).
Images (I will add them later).
This is my first theme.

Ensure the post is visually appealing using Markdown.

Images

image
image1731×1087 103 KB

Media (1)
Media (1)379×800 36.9 KB

image
image494×1041 55.6 KB

image
image1731×1258 173 KB

image
image1731×999 139 KB

I hope you enjoy using the Fairy Fantasy Dark theme as much as I enjoyed creating it. Your feedback is welcome, and I’m excited to see how this theme enhances your Home Assistant experience!

Happy theming!

2 Likes