├── CHANGELOG.md ├── VERSION ├── .gitignore ├── info.md ├── LICENSE ├── README.md └── themes └── synthwave.yaml /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /VERSION: -------------------------------------------------------------------------------- 1 | 0.3.6 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /info.md: -------------------------------------------------------------------------------- 1 | > Do you remember that endless summer back in '84? Cruising down the ocean-highway with the top down, the wind in our hair and heads buzzing with neon dreams? 2 | > No, I don't remember it either, but with this experimental theme we can go there. 3 | > https://github.com/robb0wen/synthwave-vscode 4 | 5 | **Screenshots** 6 | 7 | ![1](https://i.imgur.com/DHbESc9.png) 8 | 9 | ![2](https://i.imgur.com/bLhZFHy.png) 10 | 11 | ![3](https://i.imgur.com/BcyjeJz.png) 12 | 13 | ![3](https://i.imgur.com/WXg2417.png) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Benji 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Synthwave-Hass 2 | 3 | [![Version](https://img.shields.io/badge/version-0.3.6-green.svg?style=flat-square&labelColor=2a2139&color=f92aad)](#) 4 | [![Maintained](https://img.shields.io/maintenance/no/2020.svg?style=flat-square&labelColor=2a2139&color=f92aad)](#) 5 | [![PRs Accepted](https://img.shields.io/badge/accepting%20PR's-yes-x?style=flat-square&labelColor=2a2139&color=f92aad)](#) 6 | 7 | ## Project Status 8 | 9 | **This project is no longer supported.** 10 | 11 | Due to Home Assistant now supporting limited theme customization through Lovelace, this theme has become partially redundant. Additionally, I have lost the time and interest to maintain this project further. However, I will still review and accept pull requests for any fixes or improvements submitted by the community. 12 | 13 | --- 14 | 15 | > "Do you remember that endless summer back in '84? Cruising down the ocean highway with the top down, the wind in our hair and heads buzzing with neon dreams?" 16 | > 17 | > No? Well, neither do I, but with this experimental theme, we can pretend to go there. 18 | 19 | Inspired by: [Synthwave VSCode Theme](https://github.com/robb0wen/synthwave-vscode) 20 | 21 | --- 22 | 23 | ## Installation 24 | 25 | ### Step 1: Locate Your Home Assistant Directory 26 | 27 | Find the directory containing your Home Assistant configuration. This is typically located at `~/.homeassistant/`. 28 | 29 | ### Step 2: Add the Theme 30 | 31 | 1. Navigate to the `themes` directory: 32 | ```bash 33 | cd ~/.homeassistant/themes 34 | ``` 35 | 2. If the `themes` directory does not exist, create it: 36 | 37 | ```bash 38 | mkdir themes 39 | ``` 40 | 41 | After creating the directory, you may need to restart Home Assistant. 42 | 43 | 3. Download the theme file directly: 44 | ```bash 45 | wget https://raw.githubusercontent.com/bbbenji/synthwave-hass/master/themes/synthwave.yaml 46 | ``` 47 | 48 | ### Step 3: Update Configuration 49 | 50 | Add the following lines to your `configuration.yaml` file to ensure Home Assistant recognizes the new theme: 51 | 52 | ```yaml 53 | frontend: 54 | themes: !include_dir_merge_named themes 55 | ``` 56 | 57 | ### Step 4: Enable the Theme 58 | 59 | You can enable the theme from your profile page or by configuring it directly in `configuration.yaml`. 60 | 61 | --- 62 | 63 | ## Extras 64 | 65 | For additional styling that is not achievable with a `.yaml` theme file, you can install [synthwave-hass-extras](https://github.com/bbbenji/synthwave-hass-extras). 66 | 67 | --- 68 | 69 | ## Screenshots 70 | 71 | Here are some visuals to get a feel for the theme: 72 | 73 | ![Screenshot 1](https://i.imgur.com/DHbESc9.png) 74 | 75 | ![Screenshot 2](https://i.imgur.com/bLhZFHy.png) 76 | 77 | ![Screenshot 3](https://i.imgur.com/BcyjeJz.png) 78 | 79 | ![Screenshot 4](https://i.imgur.com/WXg2417.png) 80 | 81 | --- 82 | 83 | ## Contributions 84 | 85 | While this project is no longer actively maintained, contributions are welcome! If you find any issues or have improvements to suggest, feel free to submit a pull request. Let's keep the Synthwave spirit alive together! 86 | -------------------------------------------------------------------------------- /themes/synthwave.yaml: -------------------------------------------------------------------------------- 1 | synthwave: 2 | # text 3 | primary-text-color: '#fff' 4 | secondary-text-color: '#ffffffca' 5 | text-primary-color: '#f4eee4' 6 | disabled-text-color: '#bdbdbd' 7 | text-light-primary-color: '#fff' 8 | 9 | # main interface colors 10 | primary-color: '#f92aad' 11 | primary-background-color: '#2a2139' 12 | dark-primary-color: '#f92aad' 13 | light-primary-color: '#241b2f' 14 | accent-color: '#f92aad' 15 | divider-color: '#49549539' 16 | paper-dialog-button-color: '#fff' 17 | switch-unchecked-button-color: '#fff' 18 | outline-color: 'rgba(255, 255, 255, 0.12)' 19 | outline-over-color: 'rgba(255, 255, 255, 0.24)' 20 | # iron-icon-fill-color: '#fff' 21 | yellow: '#ffcc00' 22 | green: '#72f1b8cc' 23 | 24 | ### 25 | 26 | # background and sidebar 27 | card-background-color: '#34294f' 28 | app-header-background-color: 'var(--primary-background-color)' 29 | paper-card-background-color: 'var(--card-background-color)' 30 | secondary-background-color: 'var(--light-primary-color)' # behind the cards on state 31 | ha-card-border-radius: '8px' 32 | 33 | # sidebar menu 34 | sidebar-text-color: 'var(--secondary-text-color)' 35 | # sidebar-background-color: 'var(--paper-listbox-background-color)' # backward compatible with existing themes 36 | sidebar-icon-color: 'var(--secondary-text-color)' 37 | sidebar-selected-text-color: 'var(--primary-text-color)' 38 | sidebar-selected-icon-color: 'var(--primary-text-color)' 39 | 40 | # mwc - for some reason it's buttons 41 | mdc-theme-primary: 'var(--dark-primary-color)' 42 | mdc-theme-secondary: 'var(--dark-primary-color)' 43 | 44 | # shadows 45 | ha-card-box-shadow: '0' 46 | 47 | # icons 48 | paper-item-icon-color: 'var(--secondary-text-color)' # Off 49 | paper-item-icon-active-color: 'var(--yellow)' # On 50 | 51 | # switches 52 | toggle-button-color: 'var(--primary-color)' 53 | # --toggle-button-unchecked-color: 'var(--accent-color)' 54 | paper-toggle-button-checked-button-color: 'var(--primary-text-color)' # Knob On 55 | paper-toggle-button-checked-bar-color: 'var(--dark-primary-color)' # Background On 56 | switch-checked-color: 'var(--dark-primary-color)' # Background On 57 | paper-toggle-button-unchecked-button-color: 'var(--primary-text-color)' # Knob Off 58 | paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)' # Background Off 59 | 60 | # Sliders 61 | slider-color: 'var(--primary-color)' 62 | slider-secondary-color: 'var(--light-primary-color)' 63 | slider-bar-color: 'var(--disabled-text-color)' 64 | paper-slider-knob-color: 'var(--accent-color)' 65 | paper-slider-knob-start-color: 'var(--accent-color)' 66 | paper-slider-pin-color: 'var(--accent-color)' 67 | paper-slider-active-color: 'var(--dark-primary-color)' 68 | # paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat' 69 | paper-slider-secondary-color: 'var(--secondary-background-color)' 70 | paper-slider-disabled-active-color: 'var(--disabled-text-color)' 71 | paper-slider-disabled-secondary-color: 'var(--disabled-text-color)' 72 | switch-unchecked-track-color: 'var(--primary-text-color)' 73 | 74 | # radio buttons 75 | paper-radio-button-checked-color: 'var(--paper-toggle-button-checked-button-color)' 76 | paper-radio-button-unchecked-color: 'var(--paper-toggle-button-unchecked-button-color)' 77 | 78 | # other 79 | state-icon-color: 'var(--green)' 80 | table-row-background-color: 'var(--divider-color)' 81 | table-row-alternative-background-color: 'var(--light-primary-color)' 82 | 83 | # Inputs 84 | mdc-select-fill-color: 'var(--card-background-color)' 85 | mdc-select-ink-color: 'var(--primary-text-color)' 86 | mdc-select-label-ink-color: 'var(--primary-text-color)' 87 | mdc-select-dropdown-icon-color: 'var(--primary-text-color)' 88 | mdc-text-field-label-ink-color: 'var(--primary-text-color)' 89 | mdc-text-field-ink-color: 'var(--primary-text-color)' 90 | mdc-text-field-fill-color: 'var(--card-background-color)' 91 | input-dropdown-icon-color: 'var(--primary-text-color)' 92 | # Inputs Ripple/line 93 | mdc-ripple-color: 'var(--primary-text-color)' 94 | mdc-text-field-idle-line-color: 'var(--primary-text-color)' 95 | mdc-text-field-hover-line-color: 'var(--primary-text-color)' 96 | mdc-select-idle-line-color: 'var(--primary-text-color)' 97 | mdc-select-hover-line-color: 'var(--primary-text-color)' 98 | # Inputs Disabled 99 | mdc-select-disabled-fill-color: 'var(--primary-background-color)' 100 | mdc-select-disabled-ink-color: 'var(--disabled-text-color)' 101 | mdc-select-disabled-dropdown-icon-color: 'var(--disabled-text-color)' 102 | mdc-text-field-disabled-fill-color: 'var(--primary-background-color)' 103 | mdc-text-field-disabled-ink-color: 'var(--disabled-text-color)' 104 | mdc-text-field-disabled-dropdown-icon-color: 'var(--disabled-text-color)' 105 | 106 | # Template Editor 107 | codemirror-keyword: '#36f9f6' 108 | codemirror-operator: '#36f9f6' 109 | codemirror-variable: '#ff7edb' 110 | codemirror-variable-2: '#ff7edb' 111 | codemirror-variable-3: '#ff7edb' 112 | codemirror-builtin: '#36f9f6' 113 | codemirror-atom: '#36f9f6' 114 | codemirror-number: '#f97e72' 115 | codemirror-def: '#fe4450' 116 | codemirror-string: '#ff8b39' 117 | codemirror-string-2: '#ff8b39' 118 | codemirror-comment: '#848bbd' 119 | codemirror-tag: '#72f1b8' 120 | codemirror-meta: '#36f9f6' 121 | codemirror-attribute: '#fede5d' 122 | codemirror-qualifier: '#fe4450' 123 | codemirror-property: 'var(--primary-color)' 124 | codemirror-type: '#fe4450' 125 | 126 | ### 127 | 128 | # UI 129 | paper-card-header-color: 'var(--text-primary-color)' # Title in settings 130 | 131 | # Left Menu 132 | paper-listbox-background-color: 'var(--light-primary-color)' # Background 133 | sidebar-background-color: 'var(--light-primary-color)' 134 | 135 | # bar-card compatibility 136 | # https://github.com/custom-cards/bar-card 137 | custom-bar-card-color: 'var(--accent-color)' 138 | 139 | # fix dropdown background 140 | material-background-color: 'var(--light-primary-color)' 141 | 142 | # Scrollbar 143 | scrollbar-thumb-color: 'var(--divider-color)' 144 | 145 | # simple-thermostat buttons 146 | # https://github.com/nervetattoo/simple-thermostat 147 | st-mode-background: 'var(--primary-background-color)' 148 | st-mode-active-background: 'var(--dark-primary-color)' 149 | --------------------------------------------------------------------------------