API tools faq
paste
pqpxoxa

SWAKES HA Theme

pqpxoxa
May 29th, 2026
26
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 10.23 KB | None | 0 0
raw download clone embed print report
  1. swakes:
  2.  
  3.   # Fonts
  4.   primary-font-family: 'Montserrat,sans-serif'
  5.   secondary-font-family: 'Roboto,sans-serif'
  6.   phone-font-family: "Roboto:wght@300"
  7.   paper-font-common-base_-_font-family: "var(--primary-font-family)"
  8.   paper-font-common-code_-_font-family: "var(--primary-font-family)"
  9.   paper-font-body1_-_font-family: "var(--primary-font-family)"
  10.   paper-font-subhead_-_font-family: "var(--primary-font-family)"
  11.   paper-font-headline_-_font-family: "var(--primary-font-family)"
  12.   paper-font-caption_-_font-family: "var(--primary-font-family)"
  13.   paper-font-title_-_font-family: "var(--primary-font-family)"
  14.   ha-card-header-font-family: "var(--primary-font-family)"
  15.   mush-chip-background: '#4B5975'
  16.   mush-chip-spacing: 6px
  17.   mush-chip-padding: 0 0.25em
  18.   mush-chip-height: 39px
  19.   mush-chip-border-radius: 22px
  20.   mush-chip-font-size: 0.35em
  21.   mush-chip-font-weight: bold
  22.   mush-chip-icon-size: 0.6em
  23.   mush-chip-avatar-padding: 0.1em
  24.  
  25.   # Text
  26.   text-color: '#ffffff'
  27.   primary-text-color: 'var(--text-color)'
  28.   text-primary-color: 'var(--text-color)'
  29.   secondary-text-color: "#dfe5eb"
  30.   text-medium-light-color: '#A0A2A8'
  31.   text-medium-color: '#80828A'
  32.   primary-color: 'var(--accent-color)'
  33.  
  34.   # Main Colors
  35.   app-header-background-color: 'var(--background-color)'
  36.   accent-color: '#98a7b9'
  37.  
  38.   iron-overlay-backdrop-filter: 'blur(50px) grayscale(50%)'
  39.   iron-overlay-backdrop-background-color: 'rgba(41,128,185,0.25)'
  40.   iron-overlay-backdrop-opacity: 0.5
  41.  
  42.   # Background
  43.   background-color: '#242e42'
  44.   primary-background-color: 'var(--background-color)'
  45.   background-color-2: '#20293c'
  46.   secondary-background-color: 'none'
  47.  
  48.   # Card
  49.   card-background-color: 'var(--paper-card-background-color)'
  50.   paper-card-background-color: 'rgba(43,55,78,1)'
  51.   ha-card-box-shadow: "inset 0px 0px 0px 1px var(--border-color)"
  52.   ha-card-border-radius: "10px"
  53.   border-color: 'none'
  54.   ha-card-color: '#242e42'
  55.  
  56.   # Text Fields and Dropdown
  57.   mdc-text-field-fill-color: 'var(--paper-item-icon-active-color)'
  58.   mdc-text-field-ink-color: 'var(--text-color)'
  59.   mdc-select-fill-color: 'var(--paper-item-icon-active-color)'
  60.   mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
  61.   input-ink-color: 'var(--primary-text-color)'                              
  62.   input-label-ink-color: 'var(--secondary-text-color)'
  63.   input-disabled-ink-color: 'var(--secondary-text-color)'
  64.   input-fill-color: '#222c40'                                
  65.   input-dropdown-icon-color: 'var(--primary-text-color)'
  66.   input-idle-line-color: 'var(--secondary-text-color)'
  67.   input-hover-line-color: 'var(--primary-text-color)'
  68.   input-disabled-line-color: 'var(--disabled-text-color)'
  69.   input-outlined-idle-border-color: 'var(--disabled-text-color)'
  70.   input-outlined-hover-border-color: 'var(--disabled-text-color)'
  71.   input-outlined-disabled-border-color: 'var(--disabled-text-color)'
  72.   input-disabled-fill-color: '#222c40'
  73.   code-editor-background-color: '#222c40'
  74.   codemirror-property: 'var(--accent-color)'  
  75.   ha-color-form-background-hover: '#222c40'
  76.   ha-color-form-background: '#2b374e'
  77.  
  78.   # Icons
  79.   paper-item-icon-color: '#EBEBEB'
  80.   paper-item-icon-active-color: '#2b374e'
  81.  
  82.   # Sidebar
  83.   paper-listbox-background-color: 'var(--background-color)'
  84.   sidebar-icon-color: '#98a7b9'
  85.   sidebar-selected-icon-color: 'var(--accent-color)'
  86.   sidebar-selected-text-color: 'var(--text-color)'
  87.   divider-color: 'var(--background-color)'
  88.   light-primary-color: 'var(--paper-card-background-color)'
  89.  
  90.   # Sidebar hover tooltips (HA Frontend 20260429+)
  91.   tooltip-background-color: '#2b374e'
  92.   tooltip-text-color: '#ffffff'
  93.   tooltip-border-radius: '6px'
  94.  
  95.   # Sliders
  96.   paper-slider-knob-color: 'var(--accent-color)'
  97.   paper-slider-pin-color: 'var(--background-color-2)'
  98.   paper-slider-active-color: 'var(--background-color-2)'
  99.   paper-slider-container-color: 'var(--background-color-2)'
  100.  
  101.   # Toggle
  102.   paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  103.   mdc-theme-primary: 'var(--accent-color)'
  104.  
  105.   # Switch
  106.   switch-unchecked-color: '#70889e'
  107.   switch-checked-button-color: 'var(--accent-color)'
  108.   switch-unchecked-track-color: 'var(--background-color-2)'
  109.   switch-checked-track-color: 'var(--background-color-2)'
  110.  
  111.   # Radio Button
  112.   paper-radio-button-checked-color: 'var(--accent-color)'
  113.  
  114.   # Popups / Dialogs (legacy paper vars, kept for compatibility)
  115.   more-info-header-background: 'var(--secondary-background-color)'
  116.   paper-dialog-background-color: 'var(--background-color)'
  117.  
  118.   # -----------------------------------------------------------------------
  119.   # NEW: Dialog + Action Editor (HA Frontend 20260429+ / Core 2025.x+)
  120.   # These variables control the white panels seen in the Add Action dialog
  121.   # and automation/script action editors.
  122.   # -----------------------------------------------------------------------
  123.  
  124.   # Dialog surface (the main modal background)
  125.   dialog-surface-background-color: '#2b374e'
  126.   ha-dialog-surface-background: '#2b374e'
  127.   ha-dialog-header-background: '#1e2a3a'
  128.   ha-dialog-border-radius: '12px'
  129.   dialog-backdrop-filter: 'blur(50px) grayscale(50%)'
  130.  
  131.   # MDC list used in "Add action / condition / trigger" type pickers
  132.   mdc-theme-surface: '#1e2a3a'
  133.   mdc-theme-on-surface: '#ffffff'
  134.   mdc-ripple-color: 'var(--accent-color)'
  135.  
  136.   # Right-hand detail panel in action/condition/trigger pickers (image 1 right side)
  137.   action-editor-background-color: '#2b374e'
  138.   ha-select-background-color: '#2b374e'
  139.  
  140.   # Disabled / placeholder text (e.g. "Select an action" in image 1)
  141.   disabled-text-color: '#8a9bb0'
  142.   # -----------------------------------------------------------------------
  143.  
  144.   # Tables
  145.   table-row-background-color: 'var(--background-color)'
  146.   table-row-alternative-background-color: 'var(--paper-card-background-color)'
  147.  
  148.   mwc-button-color: '#2b374e'
  149.   mdc-button-color: '#2b374e'
  150.   button-color: '#2b374e'
  151.   mwc-ripple: '#2b374e'
  152.   mdc-button--raised: '#2b374e'
  153.  
  154.   # Badges
  155.   label-badge-background-color: 'var(--background-color)'
  156.   label-badge-text-color: 'var(--text-primary-color)'
  157.   label-badge-red: 'rgba(73,85,108,1)'
  158.   label-badge-blue: 'rgba(26,137,245,1)'
  159.   label-badge-green: 'rgba(0,202,139,1)'
  160.   label-badge-yellow: 'rgba(222,176,107,1)'
  161.  
  162.   paper-input-container-focus-color: 'var(--accent-color)'
  163.  
  164.   # Custom Header
  165.   ch-background: 'var(--background-color)'
  166.   ch-active-tab-color: 'var(--accent-color)'
  167.   ch-notification-dot-color: 'var(--accent-color)'
  168.   ch-all-tabs-color: 'var(--sidebar-icon-color)'
  169.   ch-tab-indicator-color: 'var(--accent-color)'
  170.  
  171.   # Mini Mediaplayer
  172.   mini-media-player-base-color: 'var(--text-color)'
  173.   mini-media-player-accent-color: 'var(--accent-color)'
  174.  
  175.   --honeycomb-menu-icon-color: var(--paper-item-icon-color);
  176.   --honeycomb-menu-icon-active-color: var(--paper-item-icon-active-color);
  177.   --honeycomb-menu-background-color: var(--paper-card-background-color);
  178.   --honeycomb-menu-active-background-color: var(--paper-card-active-background-color, var(--paper-card-background-color));
  179.   --honeycomb-menu-disabled: '#9a9a9a6e'
  180.   my_button_style: |
  181.       custom_fields:
  182.         card:
  183.          - &fancy_animation
  184.             $: |
  185.              <style>
  186.                 .fancy {
  187.                   --offset: 3px;
  188.                   background: rgb(55, 21, 90);
  189.                   border-radius: 50px;
  190.                   position: relative;
  191.                   height: 75px;
  192.                   width: 400px;
  193.                   max-width: 100%;
  194.                   overflow: hidden;
  195.                 }
  196.    
  197.                 .fancy::before {
  198.                   content: '';
  199.                   background: conic-gradient(transparent 270deg, white, transparent);
  200.                   position: absolute;
  201.                   top: 50%;
  202.                   left: 50%;
  203.                   transform: translate(-50%, -50%);
  204.                   aspect-ratio: 1;
  205.                   width: 100%;
  206.                   animation: rotate 2s linear infinite;
  207.                 }
  208.    
  209.                 .fancy::after {
  210.                   content: '';
  211.                   background: inherit;
  212.                   border-radius: inherit;
  213.                   position: absolute;
  214.                   inset: var(--offset);
  215.                   height: calc(100% - 2 * var(--offset));
  216.                   width: calc(100% - 2 * var(--offset));  
  217.                 }
  218.    
  219.                 .fancy input {
  220.                   background: transparent;
  221.                   color: white;
  222.                   font-size: 1.5rem;
  223.                   position: absolute;
  224.                   inset: 0;
  225.                   z-index: 10;
  226.                   padding: 1.5rem;
  227.                 }
  228.    
  229.                 @keyframes rotate {
  230.                   from {
  231.                     transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
  232.                   }
  233.                   to {
  234.                     transform: translate(-50%, -50%) scale(1.4) rotate(1turn);  
  235.                   }
  236.                 }
  237.               </style>
  239.   card-mod-theme: noctis
  240.   card-mod-root-yaml: |
  241.    custom-button-card ha-card {
  242.       --mdc-ripple-color: transparent;
  243.       -webkit-tap-highlight-color: transparent;
  244.     }
  245.     ha-sidebar$: |
  246.       .tooltip {
  247.         background-color: #2b374e !important;
  248.         color: #ffffff !important;
  249.         border: 1px solid #98a7b9 !important;
  250.       }
  251.       simple-tooltip, mwc-list-item .tooltip {
  252.         background-color: #2b374e !important;
  253.         color: #ffffff !important;
  254.       }
  255.     simple-tooltip$: |
  256.       #tooltip {
  257.         background-color: #2b374e !important;
  258.         color: #ffffff !important;
  259.         border-radius: 6px !important;
  260.       }
  261.   card-mod-view-yaml: |
  262.     "*:first-child$": |
  263.      #columns .column > * {
  264.         padding-left: 5px;
  265.         padding-right: 5px;
  266.         padding-bottom: 5px;
  267.       }
  268.   card-mod-more-info-yaml: |
  269.     .: |
  270.       @media (max-width: 450px) {
  271.         ha-dialog {
  272.             --mdc-dialog-min-width: calc(95vw)!important;
  273.             --mdc-dialog-min-height: 0!important;
  274.             --ha-dialog-border-radius: 20px!important;
  275.             --vertical-align-dialog: center !important;
  276.         }
  277.       }
  278.     ha-more-info-info:
  279.       $: |
  280.         @media (max-width: 450px) {
  281.           .container {
  282.             min-height: auto!important;
  283.           }
  284.         }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!