【主题分享】山寨了个主题，感觉还可以，顺便请教问题。

咸味土豆

20190426更新：哎，被自己蠢哭了，两个其实用一个就可以了（配合用倒也行）。感觉定义到主题里面灵活一些，这样不同终端就可以选择不同主题（自定义or默认）了。

一、前言

lovelace界面虽然一直在玩，但是一直没有配置card-modder，插件的使用 K大帖子也介绍的非常详细了，前几天不知道从哪儿看到一张主题图，比较喜欢，就想着照着这个搞（抄）一下，效果图：

然后在官方论坛主题讨论帖：Share your Themes里面翻了半天，参考以前的主题，对比拼凑了下，themes配合card-modder一起用感觉还不错。

二、半成品效果

截张图看一下：

我的玩具好费电。

三、参考配置

1、主题配置：

theme_xx:
  primary-color: "#384C55"                                                 
  primary-background-color: '#435F6A'                             
  primary-text-color: '#000000'                                          
  paper-listbox-color: "#FFFFFF" 
  secondary-background-color: '#707C7B'                               
  paper-listbox-background-color: '#2B3D41'                  

2、lovelace卡片配置：

xxx:
  - title: xxx
    path: xxx
    icon: mdi:xxx
    background: center / cover no-repeat url("/local/background/bg03.jpeg") fixed
    badges:
      - sensor.xxxx
    cards:
      - type: vertical-stack
        cards:
          - type: custom:card-modder
            style:
              --paper-card-background-color: rgba(92,119,130, 0.5) 
              --paper-item-icon-color: Gainsboro 
              --primary-text-color: Black 
              --secondary-text-color: Black 
              -webkit-backdrop-filter: blur(10px)                   
              backdrop-filter: blur(50px)                          
              border-radius: 3px                                 
              color: Black 
            card:
              type: weather-forecast   #示意
              entity: weather.colorfulclouds #示意              

3、顶部那个浮夸的标签是compact-custom-header插件的效果：

      - type: custom:compact-custom-header
        all_buttons_color: white # color of all buttons unless set in button_color
        button_color:
          menu: rgb(255,255,255)
          notifications: white
          voice: white
          options: white
        all_tabs_color: white # color of all tabs unless set in tab_color
        tab_color:
          0: WhiteSmoke
          1: white
          2: LightGrey
          3: Gray
          4: red
          5: Azure
          6: Ivory
          7: red
          8: AntiqueWhite
          9: red
        tab_indicator_color: white
        notify_indicator_color: white
        notify_text_color: white 
        chevrons: false
#        options: clock
#        clock_am_pm: true
#        clock_date: true
#        clock_format: 12
#        date_locale: en-gb
        main_config: true             

4、背景图片也发上来吧：

效果：

原图：

bg03.rar (71.27 KB, 下载次数: 49)

2019-4-24 11:54 上传

点击文件名下载附件

如果侵权的话我就删。

四、问题请教

小白也不懂CSS啥的，使用自定义主题中，下图这几个地方的颜色该配置哪些项，我最笨的方法试了一些，太折腾了、还得不停重启HA，求解惑：

还有问题忘了，谢谢K大帮我解决天气卡片的文字显示问题，上面代码里的“ --secondary-text-color: Black ”。

PS:这次又发现个工具：RGB颜色值与十六进制颜色码转换工具，配合上次发的帖子中的chrome插件的“页面取色工具”一起使用，比我以前更笨的办法好多了。

咸味土豆

karl_31 发表于 2019-4-24 15:39
感觉文字颜色可以用浅灰，而不是黑色，会更好看些

文字颜色暂时没搞，想的是先看得清楚再说，回头再调整一下。

咸味土豆

natic 发表于 2019-4-24 14:59
简直高产啊

我就是拖着一直没搞利索，这么玩也不是办法。

咸味土豆

welkin2018 发表于 2019-4-24 16:50
土豆君听说把title颜色改成白色效果会更棒哦

手机APP的状态栏不跟着变色，怎么搞都别扭，电脑上看还行，手机上看的我很晕啊。

咸味土豆

rtzz 发表于 2019-4-24 19:42
lovelace 配置保存下,刷新页面就更新了,不用重启ha

嗯，这个我知道，我说的是themes。

咸味土豆

Jones 发表于 2019-4-25 09:23
恭喜土豆哥跨入元老行列

，嘿嘿，靠抄抄抄混到元老真不容易啊，但凡有点技术，我就搞个插件、然后变身技达了。

咸味土豆

coolbug111 发表于 2019-4-27 20:38
土豆哥，你那系统监控能分享一下吗，之前用的感觉没有你这个简洁啊

我没有啊，那个是别人的啊。

咸味土豆

coolbug111 发表于 2019-4-27 22:43
就你发的半成品截图里面那个系统监控哦

script:
  reboot_ha:
    alias: reboot_ha
    sequence:
      - service: homeassistant.restart
  reboot_linux_system:
    alias: reboot_linux_system
    sequence:
      - service: shell_command.linux_system
  turn_on_all_auto:
    alias: turn_on_all_auto
    sequence:
      - service: automation.turn_on
  turn_off_all_auto:
    alias: turn_off_all_auto
    sequence:
      - service: automation.turn_off
  host_reboot:
    alias: host_reboot
    sequence:
      - service: hassio.host_reboot
  host_shutdown:
    alias: host_shutdown
    sequence:
      - service: hassio.host_shutdown
  snapshot_full:
    alias: snapshot_full
    sequence:
      - service: hassio.snapshot_full

sensor:
  - platform: systemmonitor
    resources:
      - type: disk_use_percent
        arg: /home
      - type: disk_free
        arg: /home
      - type: memory_use
      - type: memory_free
      - type: network_in
        arg: eth0
      - type: network_out
        arg: eth0
      - type: ipv4_address
        arg: eth0
      - type: processor_use
      - type: last_boot
  - platform: uptime
    name: 'Time Online'
    unit_of_measurement: hours
  - platform: command_line
    name: Latest HA Version
    command: python3 -c "import requests; print(requests.get('https://pypi.python.org/pypi/homeassistant/json').json()['info']['version'])"
    command_timeout: 60
    scan_interval: 1800
  - platform: command_line
    name: Installed HA Version
    command: "head -5 /config/.HA_VERSION"
  - platform: command_line
    name: cpu_temp
    command: "cat /sys/class/hwmon/hwmon0/temp1_input"
    unit_of_measurement: "°C"
    value_template: '{{ value | multiply(0.001) | round(2) }}'

homeassistant:
  customize:
    sensor.cpu_temp:
      friendly_name: CPU温度
      hidden: false
      homebridge_hidden: true

    sensor.processor_use:
      friendly_name: CPU占用
      icon: mdi:select-inverse
      hidden: false
      homebridge_hidden: true

    sensor.memory_use:
      friendly_name: 内存占用
      hidden: false
      homebridge_hidden: true

    sensor.memory_free:
      friendly_name: 内存剩余
      hidden: false
      homebridge_hidden: true

    sensor.disk_use_percent_home:
      friendly_name: 磁盘占用
      hidden: false
      homebridge_hidden: true

    sensor.disk_free_home:
      friendly_name: 磁盘可用
      hidden: false
      homebridge_hidden: true

    sensor.ipv4_address_eth0:
      friendly_name: 网络信息
      hidden: false
      icon: mdi:lan
      homebridge_hidden: true

    sensor.network_out_eth0:
      friendly_name: 发送数据
      hidden: false
      icon: mdi:upload-network
      homebridge_hidden: true

    sensor.network_in_eth0:
      friendly_name: 接收数据
      hidden: false
      icon: mdi:download-network
      homebridge_hidden: true

    sensor.last_boot:
      friendly_name: 系统启动
      unit_of_measurement: '小时'
      hidden: false
      homebridge_hidden: true

    sensor.time_online:
      icon: mdi:clock-alert
      friendly_name: '系统运行'
      unit_of_measurement: '小时'
      homebridge_hidden: true

    sensor.latest_ha_version:
      friendly_name: '最新版本'
      icon: mdi:cloud-download
      homebridge_hidden: true

    sensor.installed_ha_version:
      icon: mdi:clipboard-check
      friendly_name: '当前版本'
      homebridge_hidden: true

    sensor.connected_clients:
      icon: mdi:account-multiple
      friendly_name: '连接用户'
      unit_of_measurement: '个'
      homebridge_hidden: true

    sensor.badlogin:
      icon: mdi:alert-circle
      friendly_name: '失败尝试'
      homebridge_hidden: true

    script.turn_on_all_auto:
      friendly_name: 一键激活
      icon: mdi:checkbox-marked-outline
      hidden: false
      homebridge_hidden: true
    script.turn_off_all_auto:
      friendly_name: 一键取消
      icon: mdi:cancel
      hidden: false
      homebridge_hidden: true

    script.reboot_ha:
      friendly_name: 重启Hassio
      icon: mdi:home-assistant
      hidden: false
      homebridge_hidden: true

    script.snapshot_full:
      friendly_name: 备份Hassio
      icon: mdi:content-save
      hidden: false
      homebridge_hidden: true

    script.reboot_linux_system:
      friendly_name: 重启服务器
      icon: mdi:tumblr-reblog
      hidden: false
      homebridge_hidden: true

    script.host_reboot:
      friendly_name: 重启服务器
      icon: mdi:tumblr-reblog
      hidden: false
      homebridge_hidden: true
    script.host_shutdown:
      friendly_name: 关闭服务器
      icon: mdi:power
      hidden: false
      homebridge_hidden: true

    automation.home_assistant_start:
      icon: mdi:message-text
      friendly_name: 系统重启通知
      homebridge_hidden: true