├── README.md ├── hacs.json ├── images ├── iOS Light Mode 1.jpg ├── iOS Light Mode 2.jpg └── iOS Light Mode 3.jpg └── themes └── ios_light_mode.yaml /README.md: -------------------------------------------------------------------------------- 1 | # NEW VERSION OF THIS THEME IS AVAILABLE. IT SUPPORTS BOTH LIGHT AND DARK MODE. YOU CAN CHECK THE THEME [HERE](https://github.com/JuanMTech/ios-theme). 2 |
3 |
4 | 5 | # iOS Light Mode 6 | 7 | A Home Assistant theme inspired on the iOS light mode interface. 8 |
9 |
10 | 11 | [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge)](https://github.com/custom-components/hacs) 12 | 13 | 14 | [![Subscribe to YouTube channel][youtube-sub-shield]][youtubesubscribe] 15 | 16 | [![Become a Patron][become-a-patron-shield]][becomeapatron] 17 | 18 | [![Buy me a coffee][buymeacoffee-shield]][buymeacoffee] 19 |
20 |
21 | 22 | ### Screenshots 23 | 24 | ![iOS Light Mode 1](https://raw.githubusercontent.com/JuanMTech/ios_light_mode_theme/master/images/iOS%20Light%20Mode%201.jpg)
25 |
26 | 27 | 28 | ### Preparation 29 | 1. Make sure that under the **configuration.yaml** file you have the following: 30 | 31 | ``` 32 | frontend: 33 | themes: !include_dir_merge_named themes 34 | ``` 35 | 36 | 2. Under the Home Assistant **Config** folder, create a new folder named **themes** 37 | 3. **Restart** Home assistant to apply the changes. 38 | 39 | ### HACS installation 40 | 1. Go into the Community Store (HACS) 41 | 2. Search for **iOS Light Mode** 42 | 3. Open the theme 43 | 4. Press Install 44 | 5. Restart Home Assistant 45 | 46 | ### Manual installation 47 | 1. In the Home assistant **themes** folder, create a file named `ios_light_mode.yaml` 48 | 2. In this GitHub repo, go into the **themes** folder, open the `ios_light_mode.yaml` file and copy the content 49 | 3. Paste the content in the `ios_light_mode.yaml` file created under your Home Assistant themes folder 50 | 51 | ### Enable theme 52 | 1. Open your Home Assistant **Profile** 53 | 2. Under, **Themes**, select the new **iOS Light Mode** theme 54 |
55 |
56 |
57 | 58 | # Other available themes 59 | - [**iOS Theme**](https://github.com/JuanMTech/ios-theme) - Based on the system-wide light and dark mode UI 60 | - [**Google Theme**](https://github.com/JuanMTech/google-theme) - Based on the Android light and dark interface 61 | - [**AMOLED Blue**](https://github.com/JuanMTech/amoled_blue) - A true black Home Assistant theme for devices with AMOLED displays 62 | 63 | 64 | [buymeacoffee-shield]: https://i.imgur.com/Hzn2rM8.png 65 | [buymeacoffee]: https://www.buymeacoffee.com/JuanMTech 66 | [become-a-patron-shield]: https://i.imgur.com/U9BjCfc.png 67 | [becomeapatron]: https://www.patreon.com/JuanMTech 68 | [youtube-sub-shield]: https://i.imgur.com/6TAqHgi.png 69 | [youtubesubscribe]: https://www.youtube.com/c/JuanMTech?sub_confirmation=1 70 | -------------------------------------------------------------------------------- /hacs.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "iOS Light Mode", 3 | "render_readme": true 4 | } 5 | -------------------------------------------------------------------------------- /images/iOS Light Mode 1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuanMTech/ios_light_mode_theme/35834c2d0003f2d4356fb00cf9d9cc11f168e634/images/iOS Light Mode 1.jpg -------------------------------------------------------------------------------- /images/iOS Light Mode 2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuanMTech/ios_light_mode_theme/35834c2d0003f2d4356fb00cf9d9cc11f168e634/images/iOS Light Mode 2.jpg -------------------------------------------------------------------------------- /images/iOS Light Mode 3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JuanMTech/ios_light_mode_theme/35834c2d0003f2d4356fb00cf9d9cc11f168e634/images/iOS Light Mode 3.jpg -------------------------------------------------------------------------------- /themes/ios_light_mode.yaml: -------------------------------------------------------------------------------- 1 | # Theme based on the iOS Light Mode UI 2 | # Creator: Juan - @juanmtech 3 | # Website: https://www.juanmtech.com 4 | # YouTube Channel: https://youtube.com/juanmtech 5 | # My Home Assistant Config files: https://github.com/JuanMTech/Home_Assistant_files 6 | # 7 | # 8 | iOS Light Mode: 9 | # Header: 10 | app-header-background-color: rgb(242, 242, 247) 11 | app-header-text-color: var(--primary-text-color) 12 | app-header-selection-bar-color: var(--primary-color) 13 | app-header-edit-background-color: rgb(199, 199, 204) 14 | # Main Interface Colors 15 | primary-color: rgb(0, 122, 255) 16 | primary-background-color: rgb(242, 242, 247) 17 | secondary-background-color: rgb(222, 222, 227) 18 | divider-color: rgb(229, 229, 234) 19 | accent-color: rgb(0, 122, 255) 20 | # Text 21 | primary-text-color: rgb(28, 28, 30) 22 | secondary-text-color: rgb(142, 142, 147) 23 | text-primary-color: var(--primary-text-color) 24 | disabled-text-color: rgb(199, 199, 204) 25 | # Sidebar Menu 26 | sidebar-icon-color: rgb(58, 58, 30) 27 | sidebar-text-color: var(--primary-text-color) 28 | sidebar-background-color: rgb(255, 255, 255) 29 | sidebar-selected-icon-color: rgb(0, 122, 255) 30 | sidebar-selected-text-color: var(--sidebar-selected-icon-color)) 31 | # Buttons 32 | paper-item-icon-color: rgb(58, 58, 30) 33 | paper-item-icon-active-color: rgb(0, 122, 255) 34 | # States and Badges 35 | state-icon-color: var(--paper-item-icon-color) 36 | state-icon-active-color: var(--paper-item-icon-active-color) 37 | state-icon-unavailable-color: var(--disabled-text-color) 38 | # Sliders 39 | paper-slider-knob-color: rgb(0, 122, 255) 40 | paper-slider-knob-start-color: var(--paper-slider-knob-color) 41 | paper-slider-pin-color: rgb(0, 122, 255) 42 | paper-slider-active-color: rgb(0, 122, 255) 43 | paper-slider-secondary-color: var(--paper-slider-active-color) 44 | # Labels 45 | label-badge-background-color: var(--secondary-background-color) 46 | label-badge-text-color: var(--primary-text-color) 47 | label-badge-red: rgb(255, 69, 58) 48 | label-badge-green: rgb(52, 199, 89) 49 | label-badge-blue: rgb(0, 122, 255) 50 | label-badge-yellow: rgb(255, 214, 10) 51 | label-badge-gray: rgb(72, 72, 74) 52 | # Cards 53 | card-background-color: rgb(255, 255, 255) 54 | ha-card-background: rgb(255, 255, 255) 55 | ha-card-border-color: rgb(235, 235, 235) 56 | paper-dialog-background-color: var(--card-background-color) 57 | paper-listbox-background-color: var(--card-background-color) 58 | paper-card-background-color: var(--card-background-color) 59 | # Switches 60 | switch-checked-button-color: rgb(52, 199, 89) 61 | switch-checked-track-color: rgb(52, 199, 89) 62 | switch-unchecked-button-color: rgb(174, 174, 178) 63 | switch-unchecked-track-color: rgb(174, 174, 178) 64 | # Toggles 65 | paper-toggle-button-checked-button-color: var(--switch-checked-button-color) 66 | paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) 67 | paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) 68 | paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) 69 | # Table 70 | table-row-background-color: rgb(255, 255, 255) 71 | table-row-alternative-background-color: rgb(242, 242, 247) 72 | data-table-background-color: var(--primary-background-color) 73 | # Dropdowns 74 | material-background-color: rgb(255, 255, 255) 75 | material-secondary-background-color: rgb(242, 242, 247) 76 | mdc-theme-surface: var(--primary-background-color) 77 | # Pre/Code 78 | markdown-code-background-color: rgb(242, 242, 247) 79 | code-editor-background-color: rgb(242, 242, 247) 80 | # Checkboxes 81 | mdc-checkbox-unchecked-color: rgb(191, 191, 191) 82 | mdc-checkbox-disable-color: var(--disabled-text-color) 83 | mdc-select-fill-color: rgb(255, 255, 255) 84 | mdc-select-ink-color: var(--primary-text-color) 85 | mdc-select-label-ink-color: var(--secondary-text-color) 86 | mdc-select-idle-line-color: var(--primary-text-color) 87 | mdc-select-dropdown-icon-color: var(--secondary-text-color) 88 | mdc-select-hover-line-color: var(--accent-color) 89 | # Input 90 | input-fill-color: var(--secondary-background-color) 91 | input-dropdown-icon-color: var(--secondary-text-color) 92 | input-ink-color: var(--primary-text-color) 93 | input-label-ink-color: var(--secondary-text-color) 94 | input-idle-line-color: var(--primary-text-color) 95 | input-hover-line-color: var(--accent-color) 96 | #RGB 97 | rgb-primary-text-color: 28, 28, 30 98 | rgb-primary-color: 28, 28, 30 99 | --------------------------------------------------------------------------------