自定义HA界面UI，三套黑色主基调主题

alei643

从HA论坛帖子提取的三套基于黑色主基调的自定义主题，在0.52.1版本中测试可正常使用。
使用方法：将帖子底部的代码加入到configuration.yaml文件中的frontend下面，注意缩进，重启HA，进入configuration菜单，general菜单，在Set  a theme 中选择主题即可。

frontend:
  themes:
    darkorange:
       primary-color: "#ff9800"
       light-primary-color: "#ffc947"
       dark-primary-color: "#c66900"
       text-primary-color: "#ffffff"
       primary-background-color: "#37464f"
       sidebar-text_-_background: "#62717b"
       paper-card-background-color: "#263137"
       paper-card-header-color: "var(--text-primary-color)"
       secondary-background-color: "var(--primary-background-color)"
       primary-text-color: "var(--text-primary-color)"
       secondary-text-color: "var(--primary-color)"
       paper-listbox-background-color: "var(--sidebar-text_-_background)"
       paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
       paper-toggle-button-checked-button-color: "var(--dark-primary-color)"
       paper-toggle-button-checked-bar-color: "var(--dark-primary-color)"
       paper-slider-knob-color: "var(--primary-color)"
       paper-slider-knob-start-color: "var(--primary-color)"
       paper-slider-pin-color: "var(--primary-color)"
       paper-slider-active-color: "var(--primary-color)"
       paper-slider-secondary-color: "var(--light-primary-color)"
       paper-slider-container-color: "var(--sidebar-text_-_background)"
       paper-progress-secondary-color: "var(--sidebar-text_-_background)"
       paper-item-selected_-_background-color: "var(--primary-color)"
       paper-item-icon_-_color: "var(--text-primary-color)"
       paper-item-icon-color: "var(--sidebar-text_-_background)"
       paper-item-icon-active-color: "var(--primary-color)"
       paper-grey-50: "var(--sidebar-text_-_background)"
       paper-grey-200: "var(--primary-background-color)"
       label-badge-background-color: "var(--sidebar-text_-_background)"
       label-badge-text-color: "var(--text-primary-color)"
       label-badge-red: "var(--primary-color)"
       label-badge-blue: "var(--light-primary-color)"
       label-badge-green: "var(--dark-primary-color)"
       label-badge-yellow: "var(--text-primary-color)"
       label-badge-grey: "var(--paper-grey-500)"
       table-row-background-color: "var(--paper-card-background-color)"
      ## table-row-alternative-background-color: "var(--sidebar-text_-_background)”
    midnight:
      # Main colors
      primary-color: '#5294E2'                                                        # Header
      accent-color: '#E45E65'                                                         # Accent color
      dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks
      light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about

      # Text colors
      primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
      text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
      secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
      disabled-text-color: '#7F848E'                                                  # Disabled text colour
      label-badge-border-color: 'green'                                               # Label badge border, just a reference value

      # Background colors
      primary-background-color: '#383C45'                                             # Settings background
      secondary-background-color: '#383C45'                                           # Main card UI background
      divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider

      # Table rows
      table-row-background-color: '#353840'                                           # Table row
      table-row-alternative-background-color: '#3E424B'                               # Table row alternative

      # Nav Menu
      paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
      paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
      paper-grey-50: 'var(--primary-text-color)'
      paper-grey-200: '#414A59'                                                       # Navigation menu selection

      # Paper card
      paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
      paper-card-background-color: '#434954'                                          # Card background colour
      paper-dialog-background-color: '#434954'                                        # Card dialog background colour
      paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
      paper-item-icon-active-color: '#F9C536'                                         # Icon color active
      paper-item-icon_-_color: 'green'
      paper-item-selected_-_background-color: '#434954'                               # Popup item select
      paper-tabs-selection-bar-color: 'green'

      # Labels
      label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
      label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
      label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here

      # Switches
      paper-toggle-button-checked-button-color: 'var(--accent-color)'
      paper-toggle-button-checked-bar-color: 'var(--accent-color)'
      paper-toggle-button-checked-ink-color: 'var(--accent-color)'
      paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
      paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
      paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'

      # Sliders
      paper-slider-knob-color: 'var(--accent-color)'
      paper-slider-knob-start-color: 'var(--accent-color)'
      paper-slider-pin-color: 'var(--accent-color)'
      paper-slider-active-color: 'var(--accent-color)'
      paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
      paper-slider-secondary-color: 'var(--secondary-background-color)'
      paper-slider-disabled-active-color: 'var(--disabled-text-color)'
      paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

      # Google colors
      google-red-500: '#E45E65'
      google-green-500: '#39E949'
    darkcyan:
    # Main colors that can be changed
      primary-color: "#00bcd4"
      disabled-text-color: "#545454"
      divider-color: "rgba(255, 255, 255, 0.12)"
      paper-card-background-color: "#4e4e4e"
      paper-grey-200: "#191919"
      paper-item-icon-color: "#d3d3d3"
      paper-listbox-background-color: "#202020"
      paper-listbox-color: "#FFFFFF"
      primary-background-color: "#303030"
      primary-text-color: "#cfcfcf"
      secondary-background-color: "#2b2b2b"
      secondary-text-color: "#04a7bc"
    # Colors based on variables, see above
      label-badge-background-color: "var(--secondary-background-color)"
      label-badge-text-color: "var(--text-primary-color)"
      paper-card-header-color: "#var(--paper-item-icon-color)"
      paper-grey-50: "var(--primary-text-color)"
      paper-item-icon-active-color: "var(--primary-color)"
      paper-item-icon_-_color: "var(--primary-text-color)"
      paper-slider-active-color: "var(--primary-color)"
      paper-slider-knob-color: "var(--primary-color)"
      paper-slider-knob-start-color: "var(--primary-color)"
      paper-slider-pin-color: "var(--primary-color)"
      paper-slider-secondary-color: "var(--light-primary-color)"
      paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
      paper-toggle-button-checked-button-color: "var(--primary-color)"
      paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
      paper-toggle-button-unchecked-bar-color: "var(--primary-text-color)"

复制代码

囧

黑色的有点酷酷的！

说实话，还一直没时间玩HA的新功能呢，忙的焦头烂额的

luzai

够骚，先收藏，谢谢

zhang6321615

高手都在民间

nickey

手机UI什么可以跟进就好了。

心无痕星有迹

为什么不显示“Set  a theme“    配置文件也没有出错

alei643

nickey 发表于 2017-9-4 14:11
手机UI什么可以跟进就好了。

这个UI是针对所有终端的，你换个终端就得重新指定一下set a theme。可以用自动化解决

alei643

心无痕星有迹 发表于 2017-9-4 15:05
为什么不显示“Set  a theme“    配置文件也没有出错

请确认HA版本为0.52

Retroposter

hass论坛搬的？试了一个红黑的，太费眼，放弃了。

amos

谢谢分享