├── themes
├── .gitkeep
└── kibibit.yaml
├── hacs.json
├── .commit-template
├── css
└── kibibit-theme-effects.css
├── .github
├── FUNDING.yml
├── dependabot.yml
└── workflows
│ └── release.yml
├── hassio-theme-logo.png
├── screenshots
└── dashboard-example.png
├── commitlint.config.js
├── .all-contributorsrc
├── LICENSE
├── package.json
├── .gitignore
├── INFO.md
├── CODE_OF_CONDUCT.md
└── README.md
/themes/.gitkeep:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/hacs.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "kibibit Theme"
3 | }
--------------------------------------------------------------------------------
/.commit-template:
--------------------------------------------------------------------------------
1 | type(scope): subject
2 |
3 | description
--------------------------------------------------------------------------------
/css/kibibit-theme-effects.css:
--------------------------------------------------------------------------------
1 | ha-card {
2 | backdrop-filter: blur(5px);
3 | }
4 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom:
2 | - https://paypal.me/thatkookooguy?locale.x=en_US
3 |
--------------------------------------------------------------------------------
/hassio-theme-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kibibit/hass-kibibit-theme/HEAD/hassio-theme-logo.png
--------------------------------------------------------------------------------
/screenshots/dashboard-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kibibit/hass-kibibit-theme/HEAD/screenshots/dashboard-example.png
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: npm
4 | directory: "/"
5 | schedule:
6 | interval: daily
7 | time: "03:00"
8 | open-pull-requests-limit: 10
9 | target-branch: next
10 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: [ '@commitlint/config-angular' ],
3 | rules: {
4 | 'type-enum': [
5 | 2,
6 | 'always', [
7 | 'build',
8 | 'chore',
9 | 'ci',
10 | 'docs',
11 | 'feat',
12 | 'fix',
13 | 'perf',
14 | 'refactor',
15 | 'revert',
16 | 'style',
17 | 'test'
18 | ]
19 | ]
20 | }
21 | };
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 | on:
3 | push:
4 | branches:
5 | - master
6 | - next
7 | jobs:
8 | release:
9 | name: Release
10 | runs-on: ubuntu-18.04
11 | steps:
12 | - name: Checkout
13 | uses: actions/checkout@v2
14 | with:
15 | fetch-depth: 0
16 | - name: Setup Node.js
17 | uses: actions/setup-node@v1
18 | with:
19 | node-version: 12
20 | - name: Install dependencies
21 | run: npm ci
22 | - name: Release
23 | env:
24 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
25 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
26 | run: npx semantic-release
--------------------------------------------------------------------------------
/.all-contributorsrc:
--------------------------------------------------------------------------------
1 | {
2 | "projectName": "hass-kibibit-theme",
3 | "projectOwner": "kibibit",
4 | "repoType": "github",
5 | "repoHost": "https://github.com",
6 | "files": [
7 | "README.md"
8 | ],
9 | "badgeTemplate": "![](\"https://img.shields.io/badge/all_contributors-<%=)
-orange.svg?style=flat-square\" alt=\"All Contributors\">",
10 | "imageSize": 100,
11 | "commit": true,
12 | "commitConvention": "angular",
13 | "contributors": [
14 | {
15 | "login": "Thatkookooguy",
16 | "name": "Neil Kalman",
17 | "avatar_url": "https://avatars3.githubusercontent.com/u/10427304?v=4",
18 | "profile": "http://thatkookooguy.kibibit.io/",
19 | "contributions": [
20 | "code",
21 | "doc",
22 | "design",
23 | "infra",
24 | "maintenance"
25 | ]
26 | }
27 | ],
28 | "contributorsPerLine": 7
29 | }
30 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 neilkalman@gmail.com
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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@kibibit/hass-kibibit-theme",
3 | "version": "0.0.0-development",
4 | "description": "A milky glass theme for Home Assistant",
5 | "homepage": "https://github.com/Kibibit/hass-kibibit-theme#readme",
6 | "files": [
7 | "INFO.md",
8 | "/themes",
9 | "hacs.json"
10 | ],
11 | "repository": {
12 | "type": "git",
13 | "url": "https://github.com/Kibibit/hass-kibibit-theme.git"
14 | },
15 | "author": "thatkookooguy ",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/Kibibit/hass-kibibit-theme/issues"
19 | },
20 | "devDependencies": {
21 | "@commitlint/cli": "^11.0.0",
22 | "@commitlint/config-angular": "^11.0.0",
23 | "@commitlint/config-conventional": "^11.0.0",
24 | "all-contributors-cli": "^6.19.0",
25 | "commitizen": "^4.2.2",
26 | "cross-env": "^7.0.2",
27 | "cz-conventional-changelog": "^3.3.0",
28 | "husky": "^4.3.0",
29 | "semantic-release": "^17.2.2",
30 | "semantic-release-cli": "^5.4.0"
31 | },
32 | "scripts": {
33 | "commit": "cz",
34 | "contributors:add": "cross-env HUSKY_SKIP_HOOKS=1 all-contributors add",
35 | "contributors:generate": "cross-env HUSKY_SKIP_HOOKS=1 all-contributors generate",
36 | "semantic-release": "semantic-release",
37 | "semantic-release:init": "semantic-release-cli setup"
38 | },
39 | "keywords": [
40 | "home-assistant",
41 | "hass",
42 | "automation",
43 | "hassio",
44 | "homeassistant",
45 | "theme"
46 | ],
47 | "config": {
48 | "commitizen": {
49 | "path": "./node_modules/cz-conventional-changelog"
50 | }
51 | },
52 | "husky": {
53 | "hooks": {
54 | "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
55 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
56 | }
57 | },
58 | "publishConfig": {
59 | "access": "public"
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # kibibit
2 | test-results
3 |
4 | # Logs
5 | logs
6 | *.log
7 | npm-debug.log*
8 | yarn-debug.log*
9 | yarn-error.log*
10 | lerna-debug.log*
11 |
12 | # Diagnostic reports (https://nodejs.org/api/report.html)
13 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
14 |
15 | # Runtime data
16 | pids
17 | *.pid
18 | *.seed
19 | *.pid.lock
20 |
21 | # Directory for instrumented libs generated by jscoverage/JSCover
22 | lib-cov
23 |
24 | # Coverage directory used by tools like istanbul
25 | coverage
26 | *.lcov
27 |
28 | # nyc test coverage
29 | .nyc_output
30 |
31 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
32 | .grunt
33 |
34 | # Bower dependency directory (https://bower.io/)
35 | bower_components
36 |
37 | # node-waf configuration
38 | .lock-wscript
39 |
40 | # Compiled binary addons (https://nodejs.org/api/addons.html)
41 | build/Release
42 |
43 | # Dependency directories
44 | node_modules/
45 | jspm_packages/
46 |
47 | # Snowpack dependency directory (https://snowpack.dev/)
48 | web_modules/
49 |
50 | # TypeScript cache
51 | *.tsbuildinfo
52 |
53 | # Optional npm cache directory
54 | .npm
55 |
56 | # Optional eslint cache
57 | .eslintcache
58 |
59 | # Microbundle cache
60 | .rpt2_cache/
61 | .rts2_cache_cjs/
62 | .rts2_cache_es/
63 | .rts2_cache_umd/
64 |
65 | # Optional REPL history
66 | .node_repl_history
67 |
68 | # Output of 'npm pack'
69 | *.tgz
70 |
71 | # Yarn Integrity file
72 | .yarn-integrity
73 |
74 | # dotenv environment variables file
75 | .env
76 | .env.test
77 |
78 | # parcel-bundler cache (https://parceljs.org/)
79 | .cache
80 | .parcel-cache
81 |
82 | # Next.js build output
83 | .next
84 | out
85 |
86 | # Nuxt.js build / generate output
87 | .nuxt
88 | dist
89 |
90 | # Gatsby files
91 | .cache/
92 | # Comment in the public line in if your project uses Gatsby and not Next.js
93 | # https://nextjs.org/blog/next-9-1#public-directory-support
94 | # public
95 |
96 | # vuepress build output
97 | .vuepress/dist
98 |
99 | # Serverless directories
100 | .serverless/
101 |
102 | # FuseBox cache
103 | .fusebox/
104 |
105 | # DynamoDB Local files
106 | .dynamodb/
107 |
108 | # TernJS port file
109 | .tern-port
110 |
111 | # Stores VSCode versions used for testing VSCode extensions
112 | .vscode-test
113 |
114 | # yarn v2
115 | .yarn/cache
116 | .yarn/unplugged
117 | .yarn/build-state.yml
118 | .yarn/install-state.gz
119 | .pnp.*
--------------------------------------------------------------------------------
/INFO.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 | @kibibit/hass-kibibit-theme
6 |
7 |
8 |
9 | 
10 |
11 |
12 | A milky glass theme for Home Assistant
13 |
14 |
15 |
16 | This is based on [Henrik](https://www.reddit.com/user/Trollet_/)'s [reddit post](https://www.reddit.com/r/homeassistant/comments/c4s28m/my_current_lovelace_ui_constructive_feedback_is/) with a few additions of mine
17 |
18 | ## Screenshots
19 | 
20 | 
21 |
22 | [more screenshots](https://imgur.com/a/b7HaXx3#ExNC57m)
23 |
24 | ## Installation
25 |
26 | ### Prerequisites
27 |
28 | Add the following code to your `configuration.yaml` file (reboot required).
29 |
30 | ```yaml
31 | frontend:
32 | ... # your configuration.
33 | themes: !include_dir_merge_named themes
34 | ... # your configuration.
35 | ```
36 |
37 | ### Add the font
38 | Right now, this theme requires you to add the `Comfortaa` font as a resource to your lovelace configuration:
39 | ```yaml
40 | resources:
41 | - url: https://fonts.googleapis.com/css?family=Comfortaa&display=swap
42 | type: css
43 | ```
44 |
45 | ### HACS
46 |
47 | 1. Go to the Community Store.
48 | 2. Search for `kibibit`.
49 | 3. Navigate to `kibibit` theme.
50 | 4. Press `Install`.
51 | 6. Go to services and trigger the `frontend.reload_themes` service.
52 |
53 | ### Change the background
54 |
55 | This theme comes with a background by default, but you can change it to whatever you like.
56 |
57 | You can use either a url or a local file.
58 |
59 | 1. Find a background you like (You can fetch the original one from [HERE](https://thatkookooguy.github.io/https-assets/bg-kibibit-theme.png))
60 | 2. If it's a local image, put the background image inside `/config/www` to make it a public asset accessible from the frontend (`/config/www/bg-kibibit-theme.png`).
61 |
62 | access the theme file `kibibit.yaml` and change the following line:
63 |
64 | ```yaml
65 | background-image: "center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg-kibibit-theme.png')"
66 | ```
67 |
68 | to include your url, or a local asset by mapping `/config/www/` to `/local/` (`/local/bg-kibibit-theme.png`)
69 |
70 | Refresh home assistant after that.
71 |
72 | ### Setting the default `backend-selected` theme
73 | In order to have this theme set automatically as the backend selected default, add the following automation to your home assistant:
74 | ```yaml
75 | - alias: Set Default Theme
76 | description: ''
77 | trigger:
78 | - event: start
79 | platform: homeassistant
80 | condition: []
81 | action:
82 | - data:
83 | name: kibibit
84 | service: frontend.set_theme
85 | ```
86 |
87 | ## Stay in touch
88 |
89 | - Author - [Neil Kalman](https://github.com/thatkookooguy)
90 | - Website - [https://github.com/kibibit](https://github.com/kibibit)
91 | - StackOverflow - [thatkookooguy](https://stackoverflow.com/users/1788884/thatkookooguy)
92 | - Twitter - [@thatkookooguy](https://twitter.com/thatkookooguy)
93 | - Twitter - [@kibibit_opensrc](https://twitter.com/kibibit_opensrc)
94 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at neilkalman@gmail.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | @kibibit/hass-kibibit-theme
6 |
7 |
8 |
9 | 
10 |
11 |
12 | 
13 |
14 | 
15 |
16 | 
17 |
18 |
19 | A milky glass theme for Home Assistant
20 |
21 |
22 |
23 | ## Screenshots
24 | 
25 | 
26 |
27 | [more screenshots](https://imgur.com/gallery/SQJNbWb)
28 |
29 | ## Installation
30 |
31 | ### Prerequisites
32 |
33 | Add the following code to your `configuration.yaml` file (reboot required).
34 |
35 | ```yaml
36 | frontend:
37 | ... # your configuration.
38 | themes: !include_dir_merge_named themes
39 | ... # your configuration.
40 | ```
41 |
42 | ### Add the font
43 | Right now, this theme requires you to add the `Comfortaa` font as a resource to your lovelace configuration:
44 | ```yaml
45 | resources:
46 | - url: https://fonts.googleapis.com/css?family=Comfortaa&display=swap
47 | type: css
48 | ```
49 |
50 | ### HACS
51 |
52 | 1. Go to the Community Store.
53 | 2. Search for `kibibit`.
54 | 3. Navigate to `kibibit` theme.
55 | 4. Press `Install`.
56 | 6. Go to services and trigger the `frontend.reload_themes` service.
57 |
58 | ### Change the background
59 |
60 | This theme comes with a background by default, but you can change it to whatever you like.
61 |
62 | You can use either a url or a local file.
63 |
64 | 1. Find a background you like (You can fetch the original one from [HERE](https://thatkookooguy.github.io/https-assets/bg-kibibit-theme.png))
65 | 2. If it's a local image, put the background image inside `/config/www` to make it a public asset accessible from the frontend (`/config/www/bg-kibibit-theme.png`).
66 |
67 | access the theme file `kibibit.yaml` and change the following line:
68 |
69 | ```yaml
70 | background-image: "center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg-kibibit-theme.png')"
71 | ```
72 |
73 | to include your url, or a local asset by mapping `/config/www/` to `/local/` (`/local/bg-kibibit-theme.png`)
74 |
75 | Refresh home assistant after that.
76 |
77 | ### Setting the default `backend-selected` theme
78 | In order to have this theme set automatically as the backend selected default, add the following automation to your home assistant:
79 | ```yaml
80 | - alias: Set Default Theme
81 | description: ''
82 | trigger:
83 | - event: start
84 | platform: homeassistant
85 | condition: []
86 | action:
87 | - data:
88 | name: kibibit
89 | service: frontend.set_theme
90 | ```
91 |
92 | ## Contributors ✨
93 |
94 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
95 |
96 |
97 |
98 |
99 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
111 |
112 | ## Credits
113 |
114 | This theme started based on this post [Henrik](https://www.reddit.com/user/Trollet_/)'s [reddit post](https://www.reddit.com/r/homeassistant/comments/c4s28m/my_current_lovelace_ui_constructive_feedback_is/).
115 |
116 | Learned a lot about lovelace themes from the [lovelace ios themes repo](https://github.com/basnijholt/lovelace-ios-themes)!
117 | Check their themes out!
118 |
119 | ## Stay in touch
120 |
121 | - Author - [Neil Kalman](https://github.com/thatkookooguy)
122 | - Website - [https://github.com/kibibit](https://github.com/kibibit)
123 | - StackOverflow - [thatkookooguy](https://stackoverflow.com/users/1788884/thatkookooguy)
124 | - Twitter - [@thatkookooguy](https://twitter.com/thatkookooguy)
125 | - Twitter - [@kibibit_opensrc](https://twitter.com/kibibit_opensrc)
126 |
--------------------------------------------------------------------------------
/themes/kibibit.yaml:
--------------------------------------------------------------------------------
1 | #
2 | # kibibit theme - Default ('White' Cards)
3 | #
4 | kibibit:
5 | # Global
6 | background-image: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg.png')"
7 | background-image2: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg2.png')"
8 | background-image3: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg3.png')"
9 | background-image4: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg4.png')"
10 | background-image5: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg5.png')"
11 | background-image6: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg6.png')"
12 | background-image7: "center / cover no-repeat fixed url('/local/bg.png'), center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg/abstract/bg7.png')"
13 | lovelace-background: var(--background-image)
14 | primary-color: "#209cee"
15 | light-primary-color: "#B6B6C1"
16 | primary-background-color: "#212121"
17 | secondary-background-color: rgba(25, 25, 25, 0.7)
18 | divider-color: var(--primary-background-color)
19 | accent-color: rgba(255, 159, 9, 1)
20 | # Fonts
21 | primary-font-family: 'Comfortaa'
22 | paper-font-common-base_-_font-family: "var(--primary-font-family)"
23 | paper-font-common-code_-_font-family: "var(--primary-font-family)"
24 | paper-font-body1_-_font-family: "var(--primary-font-family)"
25 | paper-font-subhead_-_font-family: "var(--primary-font-family)"
26 | paper-font-headline_-_font-family: "var(--primary-font-family)"
27 | paper-font-caption_-_font-family: "var(--primary-font-family)"
28 | paper-font-title_-_font-family: "var(--primary-font-family)"
29 | # Text
30 | primary-text-color: "#FFF"
31 | secondary-text-color: "#d3d3d3"
32 | text-primary-color: "#FFF"
33 | disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
34 | text-dark-color: "#FFF"
35 | # Sidebar Menu
36 | sidebar-background-color: var(--primary-background-color)
37 | sidebar-icon-color: var(--light-primary-color)
38 | sidebar-text-color: "#F1F1F1"
39 | sidebar-selected-background-color: var(--primary-background-color)
40 | sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX)
41 | sidebar-selected-text-color: var(--sidebar-selected-icon-color)
42 | # States and Badges
43 | state-icon-color: "#FFF"
44 | state-icon-active-color: rgba(255, 214, 10, 1)
45 | state-icon-unavailable-color: var(--disabled-text-color)
46 | # Sliders
47 | paper-slider-knob-color: "#FFF"
48 | paper-slider-knob-start-color: var(--paper-slider-knob-color)
49 | paper-slider-pin-color: var(--paper-slider-knob-color)
50 | paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
51 | paper-slider-secondary-color: var(--paper-slider-knob-color)
52 | paper-slider-container-color: rgba(255, 255, 255, 0.5)
53 | paper-slider-font-color: "#000"
54 | ha-slider-background: none !important
55 | # Labels
56 | label-badge-background-color: "#23232E"
57 | label-badge-text-color: "#F1F1F1"
58 | label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode
59 | # Cards
60 | card-background-color: var(--secondary-background-color) # Unused entities table background
61 | paper-listbox-background-color: var(--primary-background-color)
62 | ha-card-border-radius: 20px
63 | ha-card-background: 'rgba(150, 150, 150, 0.1)'
64 | paper-card-background-color: var(--ha-card-background)
65 | # Toggles
66 | paper-toggle-button-checked-button-color: "#484848"
67 | paper-toggle-button-checked-bar-color: "#484848"
68 | paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
69 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
70 | # Table row
71 | table-row-background-color: var(--primary-background-color)
72 | table-row-alternative-background-color: var(--secondary-background-color)
73 | # Switches
74 | switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
75 | switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
76 | switch-checked-button-color: "#FFF"
77 | # Other
78 | paper-dialog-background-color: rgba(55, 55, 55, 0.6)
79 | paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself)
80 | more-info-header-background: rgba(25, 25, 25, 0.5)
81 | app-header-background-color: var(--primary-background-color)
82 | # Custom
83 | mcg-title-letter-spacing: .15em
84 | mini-media-player-base-color: white
85 | mini-media-player-icon-color: white
86 | fc-neutral-bg-color: var(--primary-background-color)
87 | fc-page-bg-color: transparent
88 |
89 | #
90 | # kibibit theme - Dark Cards ('White' Cards)
91 | #
92 | kibibit-dark-cards:
93 | # Global
94 | background-image: "center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg-kibibit-theme.png')"
95 | lovelace-background: var(--background-image)
96 | primary-color: "#209cee"
97 | light-primary-color: "#B6B6C1"
98 | primary-background-color: "#212121"
99 | secondary-background-color: rgba(25, 25, 25, 0.7)
100 | divider-color: var(--primary-background-color)
101 | accent-color: rgba(255, 159, 9, 1)
102 | # Fonts
103 | primary-font-family: 'Comfortaa'
104 | paper-font-common-base_-_font-family: "var(--primary-font-family)"
105 | paper-font-common-code_-_font-family: "var(--primary-font-family)"
106 | paper-font-body1_-_font-family: "var(--primary-font-family)"
107 | paper-font-subhead_-_font-family: "var(--primary-font-family)"
108 | paper-font-headline_-_font-family: "var(--primary-font-family)"
109 | paper-font-caption_-_font-family: "var(--primary-font-family)"
110 | paper-font-title_-_font-family: "var(--primary-font-family)"
111 | # Text
112 | primary-text-color: "#FFF"
113 | secondary-text-color: "#d3d3d3"
114 | text-primary-color: "#FFF"
115 | disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
116 | text-dark-color: "#FFF"
117 | # Sidebar Menu
118 | sidebar-background-color: var(--primary-background-color)
119 | sidebar-icon-color: var(--light-primary-color)
120 | sidebar-text-color: "#F1F1F1"
121 | sidebar-selected-background-color: var(--primary-background-color)
122 | sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX)
123 | sidebar-selected-text-color: var(--sidebar-selected-icon-color)
124 | # States and Badges
125 | state-icon-color: "#FFF"
126 | state-icon-active-color: rgba(255, 214, 10, 1)
127 | state-icon-unavailable-color: var(--disabled-text-color)
128 | # Sliders
129 | paper-slider-knob-color: "#FFF"
130 | paper-slider-knob-start-color: var(--paper-slider-knob-color)
131 | paper-slider-pin-color: var(--paper-slider-knob-color)
132 | paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
133 | paper-slider-secondary-color: var(--paper-slider-knob-color)
134 | paper-slider-container-color: rgba(255, 255, 255, 0.5)
135 | paper-slider-font-color: "#000"
136 | ha-slider-background: none !important
137 | # Labels
138 | label-badge-background-color: "#23232E"
139 | label-badge-text-color: "#F1F1F1"
140 | label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode
141 | # Cards
142 | card-background-color: var(--secondary-background-color) # Unused entities table background
143 | paper-listbox-background-color: var(--primary-background-color)
144 | ha-card-border-radius: 20px
145 | ha-card-background: 'rgba(0, 0, 0, 0.3)'
146 | paper-card-background-color: var(--ha-card-background)
147 | # Toggles
148 | paper-toggle-button-checked-button-color: "#484848"
149 | paper-toggle-button-checked-bar-color: "#484848"
150 | paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
151 | paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
152 | # Table row
153 | table-row-background-color: var(--primary-background-color)
154 | table-row-alternative-background-color: var(--secondary-background-color)
155 | # Switches
156 | switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
157 | switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
158 | switch-checked-button-color: "#FFF"
159 | # Other
160 | paper-dialog-background-color: rgba(55, 55, 55, 0.6)
161 | paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself)
162 | more-info-header-background: rgba(25, 25, 25, 0.5)
163 | app-header-background-color: var(--primary-background-color)
164 | # Custom
165 | mcg-title-letter-spacing: .15em
166 | mini-media-player-base-color: white
167 | mini-media-player-icon-color: white
168 | fc-neutral-bg-color: var(--primary-background-color)
169 | fc-page-bg-color: transparent
170 |
--------------------------------------------------------------------------------
