Open Peer Power Open Peer Power
Edit this page on GitHub

Open Peer Power Frontend

This offers the official frontend to control Open Peer Power. This integration is by default enabled, unless you’ve disabled or removed the default_config: line from your configuration. If that is the case, the following example shows you how to enable this integration manually:

# Example configuration.yaml entry
frontend:

Defining Themes

Starting with version 0.49 you can define themes:

# Example configuration.yaml entry
frontend:
  themes:
    happy:
      primary-color: pink
    sad:
      primary-color: blue

The example above defined two themes named happy and sad. For each theme you can set values for CSS variables. For a partial list of variables used by the main frontend see ha-style.ts.

Check our community forums to find themes to use.

Theme automation

There are 2 themes-related services:

  • frontend.reload_themes: reloads theme configuration from your configuration.yaml file.
  • frontend.set_theme(name): sets backend-preferred theme name.

Example in automation:

Set a theme at the startup of Open Peer Power:

automation:
  - alias: 'Set theme at startup'
    trigger:
     - platform: openpeerpower
       event: start
    action:
      service: frontend.set_theme
      data:
        name: happy

To enable “night mode”:

automation:
  - alias: 'Set dark theme for the night'
    trigger:
      - platform: time
        at: '21:00:00'
    action:
      - service: frontend.set_theme
        data:
          name: darkred

Manual Theme Selection

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). You can then choose any installed theme from the dropdown list and it will be applied immediately.

Set a theme

Loading extra HTML

Starting with version 0.53 you can specify extra HTML files to load, and starting with version 0.95 extra JS modules.

Example:

# Example configuration.yaml entry
frontend:
  extra_html_url:
    - https://example.com/file1.html
    - /local/file2.html
  extra_module_url:
    - /local/my_module.js

HTML will be loaded via <link rel='import' href='' async> on any page (states and panels), and modules via <script type='module' scr=''></script>.

Manual Language Selection

The browser language is automatically detected. To use a different language, go to the user profile page (accessed by clicking your user account initials at the bottom of the sidebar) and select one. It will be applied immediately.

Choose a Language