Noctis Theme - Themes - Home Assistant Community = 40rem)" rel="stylesheet" data-target="desktop" /> = 40rem)" rel="stylesheet" data-target="chat_desktop" /> = 40rem)" rel="stylesheet" data-target="discourse-ai_desktop" /> = 40rem)" rel="stylesheet" data-target="discourse-reactions_desktop" /> = 40rem)" rel="stylesheet" data-target="poll_desktop" /> = 40rem)" rel="stylesheet" data-target="desktop_theme" data-theme-id="19" data-theme-name="scroll to top"/> Noctis Theme Share your Projects! Themes aFFekopp January 16, 2020, 8:13pm 1 Here is a dark blue theme I have created. Has been on HACS for a while, thought I would share it here too. 11383×879 116 KB 1-11383×879 70.4 KB 31383×879 119 KB For more infos and screenshots see the readme NFL game sensor (scores, possession, etc) Bouke_Regnerus (Bouke Regnerus) January 22, 2020, 6:13pm 2 Thanks for sharing, the theme looks amazing. I also had a look at your personal Home Assistant config, which is equally as interesting! I love the use of the button_card_templates. snel6424 (Colton S.) March 8, 2020, 8:40pm 3 what should I change in the config to change the orange color here? Screen Shot 2020-03-08 at 3.39.14 PM882×98 15.8 KB hectormartinezdev (Hector Martinez) March 10, 2020, 6:17pm 4 Hi! I like the theme so far But I can’t get to work the blurry background. I added the js as stated, both in the “www” folder and the “ui-lovelace.yaml”. However I do not know how to double check if it is being loaded. Any tips to debug this? Thanks! Edit: could I be missing some other dependency? I only have your theme and custom-header.js aFFekopp March 12, 2020, 4:32pm 5 Can you please post the lovelace config for this, so I can take a look at it. aFFekopp March 12, 2020, 4:36pm 6 What browser are you using? I think it doesn’t work with every browser. hectormartinezdev (Hector Martinez) March 12, 2020, 4:43pm 7 Here you have it! https://pastebin.com/a6yVb2bQ hectormartinezdev (Hector Martinez) March 12, 2020, 4:43pm 8 I’m using Firefox 73.0.1 (64-bit) aFFekopp March 12, 2020, 6:07pm 9 I found that by default it doesn’t work in firefox. You can go into about:config in firefox and set both: gfx.webrender.all layout.css.backdrop-filter.enabled To true. You may need to restart firefox fo it to take effect. I don’t know if there are any safety implications by enabling this, but other browsers have it enabled by default. PS: I don’t see - url: /local/popup-background.js type: js in your ui-lovelace.yaml hectormartinezdev (Hector Martinez) March 12, 2020, 7:02pm 10 Yeah, sorry, removed since it didn’t work, but it still applies. Added it again and applied all the changes in the about:config tab. It is working Thank you! Maybe you can add this to the README so anyone with Firefox can get it to work DeviDarkL March 20, 2020, 12:56am 11 Awesome theme! Thank you! How do you put Card Titles outside of the Card itself like in the screenshot you uploaded? rogersmj March 20, 2020, 1:47am 12 This is one of the cleanest themes I’ve yet seen. Appreciate all the subtle touches, will look great on a wall panel and not call too much attention to itself. Thanks for making it. rogersmj March 20, 2020, 4:48pm 13 How do you set up those buttons along the top to be highlighted in blue when they’re “on”? Like Remote UI. I installed this but my button cards only change the color of the icon, not the background. EDIT: Nevermind, realized I need the custom component button-card. aFFekopp March 21, 2020, 2:02pm 14 Those are Markdown Cards styled with Card-mod. You can check out my config on github. MrBill (Bill) January 15, 2021, 5:32pm 15 I’m pretty much a n00b to HA so I’ll apologize in advance for probably basic questions that “everyone know the answer to”… I spent awhile looking at theme’s yesterday, settled on Noctis… was excited to exit the white background of the default theme… Got it installed, but then was surprised some colors are different when I switched from Firefox v84.02 (64bit) on my laptop to using the HA app on iOS… is that just an IOS thing? Does it happen with all themes? TBH it doesn’t bother me enough to change themes because of it, but I’m curious if that’s just a normal thing to expect, or if Noctis is just like that? When I log out and back in the theme defaults back to default, I’m sure I didn’t do something but I’m not sure what to address. Can anyone point me the correct place to read? Very confused about installing things, fortunately I’m not afraid of YAML files and understand config files etc… and know how to clone things from github… directions to follow are all over the place tho… the biggest black hole in my knowledge seems to be constant references to installing from HACS, which appears to be the “easy way”, but HACS seems to be a blackhole, nothing i’ve seached for in add-on seems to be there. I decided to post here because 1 seems directly related to Noctis, I realize 2 and 3 are more general questions but decided to opt for a single post rather than asking things in multiple places… TIA for any help anyone can provide, and I admit I’m only a week into HA… Stolsel January 19, 2021, 1:51pm 16 The NOCTIS theme is indeed a relaxed and modest theme. However I would like to be able to kinda ‘group’ my buttons visibly. They are currently in a vertical-stack, but I cannot find the way to set the background of the vertical stack to anything else but transparent, as what it is now. I have been scratching my head, but cannot find it. It must be something obvious. TIA Stolsel January 19, 2021, 2:36pm 17 Found it myself. It is even simpler than I expected. Instead of using a vertical-stack, use the built-in ‘Entities’ card and identify the cards as being entities. This was the original: type: vertical-stack cards: Which I turned into this: type: entities entities: The custom cards within the - initially - vertical stack are perceived as entities. For the built-in cards, you need to change it into: 'custom:hui-<built-in card name>-card' Source: Palm Springs Theme thomasloven (Thomas Lovén) January 20, 2021, 10:28am 18 It’s not quite that simple nowadays Stolsel January 20, 2021, 10:43am 19 I noticed and thanks @thomasloven for pointing it out. The hui-horizontal-stack and hui-vertical-stack work flawlessly, the ones starting with a ‘g’ are less reliable hui-gauge-card and hui-grid-card have persistent issues. I’ll switch over to either other custom cards in combination with your proposed hui-element. Good stuff! sk229 February 2, 2021, 7:53pm 20 I can’t quite get the blurry background, maybe I have the folders wrong. [ha_root]/themes/noctis.yaml [ha_root]/resources/ui-lovelace.yaml [ha_root]/www/popup-background.js What am I doing/placing wrong? PS: using HA core. I’ve also tried adding the ref to /local/popup-background.js through the Lovelace config in the UI, it seems to be loaded by the network calls in the browser developer tools.