![]() ![]() When themes are enabled in the configuration.yaml file, a new option will show up in the user profile page (accessed by clicking your user account initials at the bottom of the sidebar). The backend theme settings will be saved and restored on a restart of Home Assistant. If no dark mode backend theme is set, the light mode theme will also be used in dark mode. If the theme should be applied in light or dark mode light or dark (Optional, default light). Name of the theme to set, default for the default theme or none to restore to the default. t_theme: Sets backend-preferred theme name.frontend.reload_themes: Reloads theme configuration from your configuration.yaml file.Create a dedicated folder (e.g., my_themes) and include all files from within this folder ( themes: !include_dir_merge_named my_themes).įor more details about splitting up the configuration into multiple files, see this page.Ĭheck our community forums to find themes to use.Put them into a separate file (e.g., themes.yaml) and include that in your configuration ( themes: !include themes.yaml).Directly specify the themes inside your configuration.yaml file.Theme configuration splittingĪs with all configuration, you can either: Independent of the selection, the primary color will be set to coral, but based on the chosen mode either the default light or dark theme will be used as the basis for rendering, plus the secondary text color will be either olive or slategray. That tells the frontend to allow the user to choose which mode to use from the user profile (default selection is based on the system settings). Theme day_and_night: This theme has both a light and a dark mode section. Note: Since this example theme only has a dark mode defined, this mode will automatically be used. The final theme rules are determined in three steps: First, the default dark theme CSS variables will be applied, then second the CSS variables from the top level of the theme that are mode-independent ( primary-color: steelblue in this example) and lastly the mode-specific CSS variables will be layered on top ( secondary-text-color: slategray). Theme sad: By using the new modes key plus the subkey dark this theme will now be based on the default dark theme. This legacy format is still supported and will behave as before and automatically use the default light theme as the base. ![]() Theme happy: Same as in the previous example. # Example configuration.yaml entry frontend : themes : happy : primary-color : pink text-primary-color : purple sad : primary-color : steelblue modes : dark : secondary-text-color : slategray day_and_night : primary-color : coral modes : light : secondary-text-color : olive dark : secondary-text-color : slategray Note that the variables will be used in the listed order, so if multiple match your entity, the first matching variable (= most specific one) will be used. The color rules can be customized using theme variables: Here is a list of domains that support colors: alarm_control_panel, alert, automation, binary_sensor, calendar, camera, climate, cover, device_tracker, fan, group, humidifier, input_boolean, light, lock, media_player, person, plant, remote, schedule, script, siren, sun, switch, timer, update, and vacuum. Home Assistant has default color rules that fit most use cases. Theses colors are used in dashboards and history. State colorĮach entity has its own color, based on domain, device_class, and state, to be easily recognizable. They can be changed it using primary-color and accent-color variables. Primary and accent colors are the main colors of the application. Supported theme variables Primary and accent color If you want to provide hex color values, wrap those in quotation marks, since otherwise, YAML would consider them a comment ( primary-color: "#123456"). For each theme, you can set values for CSS variables. The example above defines two themes named happy and sad. # Example configuration.yaml entry frontend : themes : happy : primary-color : pink accent-color : orange sad : primary-color : steelblue accent-color : darkred ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |