renemarc/home-assistant-config

<!-- Header -->
[link-profile]:https://github.com/renemarc
[link-repo]:https://github.com/renemarc/home-assistant-config

<a name="top"></a>
<code>[renemarc][link-profile] / **[home-assistant-config][link-repo]** / **themes** /</code>

<p align="right"><sub><strong><a href="https://github.com/renemarc/home-assistant-config">🏠 Home Assistant configuration for a smart-looking place! 😎</a><br>Be sure to <a href="#" title="star">⭐️</a> or <a href="#" title="fork">🔱</a> this repo!</strong></sub></p>

<!-- Hero -->
<figure>
    <div align="center">
        <a href="#-normalyaml"><img src="../www/screenshots/group-atmosphere.png" alt="Atmospheric Safety group" title="Normal theme" width="140"></a>
        <a href="#-darkyaml"><img src="../www/screenshots/group-atmosphere-dark.png" alt="Atmospheric Safety group (dark theme)" title="Dark theme" width="140"></a>
    </div>
    <div align="center">
        <a href="#-card-secondary-titleyaml"><img src="../www/screenshots/card-secondary.png" alt="Secondary Title card" title="Secondary Title" width="140"></a>
        <a href="#-card-warningyaml"><img src="../www/screenshots/card-warning.png" alt="Warning card" title="Normal theme" width="140"></a>
        <a href="#-card-warningyaml"><img src="../www/screenshots/card-warning-dark.png" alt="Warning card (dark theme)" title="Dark theme" width="140"></a>
        <a href="#-card-criticalyaml"><img src="../www/screenshots/card-critical.png" alt="Critical card" title="Normal theme" width="140"></a>
        <a href="#-card-criticalyaml"><img src="../www/screenshots/card-critical-dark.png" alt="Critical card (dark theme)" title="Dark theme" width="140"></a>
    </div>
</figure>

<h1 align="center">Themes</h1>

These CSS configurations serve to bonify the frontend's user interface and improve the user experience.

## Whole themes

These full themes change the whole look of Home Assistant.

### [`🌞 ./normal.yaml`](normal.yaml)

Contains minor improvements over Home Assistant's [default theme](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.html).

<div align="center">
    <figure>
        <div>
            <img src="../www/screenshots/group-atmosphere.png" alt="Atmospheric Safety group" title="Normal theme" width="325">
        </div>
        <figcaption>
            <p><strong>Normal theme.</strong></p>
        </figcaption>
    </figure>
</div>

<p align="right"><a href="#top" title="Back to top">🔝</a></p>

### [`🌜 ./dark.yaml`](dark.yaml)

Automtically set by [`/automations/theme_auto.yaml`](../automations/theme_auto.yaml) whenever **night_mode** in [`/inputs/input_booleans.yaml`](../inputs/input_booleans.yaml) is enabled. Based on [PmxMononight](https://community.home-assistant.io/t/share-your-themes/22018/38) by PhysicalMagic.

<div align="center">
    <figure>
        <div>
            <img src="../www/screenshots/group-atmosphere-dark.png" alt="Atmospheric Safety group (dark theme)" title="Dark theme" width="325">
        </div>
        <figcaption>
            <p><strong>Dark theme.</strong></p>
        </figcaption>
    </figure>
</div>

<!-- Footer -->
<p align="right"><a href="#top" title="Back to top">🔝</a></p>

<p align="center"><strong>Don't forget to <a href="#" title="star">⭐️</a> or <a href="#" title="fork">🔱</a> this repo! 😃</strong></p>

[🏠 Home][link-repo]