Skip to content

A cool-toned dark theme with pleasing contrast

License

Notifications You must be signed in to change notification settings

mjs271/arcticForest-dark_HA

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ArcticForest Dark for Home Assistant

hacs_badge GitHub Release CC BY-NC-SA 4.0

A cool-toned dark theme with pleasing contrast.

Contents

About

I started work on my collection of ArcticForest Dark themes when I stumbled upon 0xGlitchbyte's Everforest Dark theme for Obsidian that, as far as I can tell, appears to be based on sainnhe's versions for Vim and VS Code.

So, as someone who can't leave well-enough alone, I started tinkering with it... As a recovering Solarized Dark addict, I personally favor the cooler/bluer side of the spectrum. Hence, we have ArcticForest Dark. After tweaking it for my daily-driver editors (Sublime Text, VS Code) and terminal (iTerm2), I decided it was time to give my off-hours obsession the same treatment... And here we are with the official ArcticForest Dark for Home Assistant.

I also want to give credit to aFFekopp's Noctis Home Assistant theme that I ran for years and largely followed to build out this theme.

Images

dashboard dashboard
dashboard energy

Installation

First, note that the instructions below may be specific to HassOS because that is they way my Home Assistant instance is configured. However, In the case of other installations, I suspect that these instructions should at least get you to the general outcomes they are intended for.1

HACS Installation (Recommended)

  1. If HACS is not already installed, follow the instructions from the HACS.xyz docs.

Once HACS is installed and configured...

  • Navigate to HACS.
  • Select the 3 dots in the top-right corner.
    • Choose Custom repositories.
  • Add the repository URL (https://github.com/mjs271/ha_afdark) to the Repository field.
  • Choose Theme for the Type field.
  • Click the Add button, and it should appear in the list above.
  • Exit the popup dialog.
  • Search for ArcticForest Dark and select it from the list.
  • Choose Download at the bottom-right of the page.

Once the ArcticForest Dark theme is installed...

  • Restart home-assistant.
    • At minimum, you must fully reload the yaml configuration at
      • Developer Tools > YAML > YAML configuration reloading > ALL YAML CONFIGURATION.
    • I would recommend a full restart, though, to avoid any unexpected behavior.
      • Developer Tools > YAML > Check and restart > RESTART.
  • Enable the arcticForest_dark theme in your user profile.
    • Username in bottom-left corner > General (default first screen) > Browser settings > Theme.

Manual Installation

  • Clone, download, or otherwise copy this repository to your Home Assistant instance.2
  • Move or copy the arcticForest_dark/ directory into the themes/ subdirectory of the directory containing the top-level configuration.yaml for Home Assistant.
    • This is likely to be $HA_ROOT/configuration/themes/, where HA_ROOT represents the home directory of your admin user (probably /root in most cases).
    • If themes/ does not exist here, create that directory.
    • Note: It is not explicitly required for your Home Assistant themes to be stored in $HA_ROOT/configuration/themes/, but it is convention and considered best practice.

So, to this point, altogether, we have

$ cd $HA_ROOT/configuration

# NOTE: the '-p' flag means that it won't error out if 'themes/' already exists
#       and also won't overwrite

$ mkdir -p themes/
$ cd themes/

# ==============================================================================
# clone the repository
# ==============================================================================

$ git clone https://github.com/mjs271/ha_afdark.git
$ cp ha_afdark/themes/ha_afdark.yaml .

# ==============================================================================
# *** OR ***
# ==============================================================================
# download the yaml configuration file directly
# ==============================================================================

# NOTE: the flag is a capital O ("oh"), and not a zero (0).

$ curl -O https://raw.githubusercontent.com/mjs271/ha_afdark/main/themes/arcticForest_dark.yaml

# ==============================================================================

Now, once you've done the above...

  • Modify your top-level configuration.yaml to contain the following (presuming that the theme was intstalled to the location described above.)
frontend:
  themes: !include_dir_merge_named themes

Finally, see the instructions above to activate the ArcticForest Dark theme in your Home Assistant Instance.

Additional Images

trace automation
template dev_actions
addon addon

Alternative Accent-color Sub-themes

(Work in Progress)

To address the very specific issue of color diversity on sensor card graphs, I have included some sub-themes that do nothing more than change the accent color of the theme (i.e., the orange color used for notification badges and to indicate the active dashboard view when editing).

The intended use-case for these is to select the sub-theme on individual cards or sub-cards, and below are images of the included options, displayed in alphabetical order (the order they appear in the dropdown selector), column-wise, top-to-bottom, left-to-right.

Note: I don't love the fact that this results in every single alt profile always being displayed in the picker, so I'm looking into a workaround.

alt-accent_colors

License

If you like it: use it, change it, improve it, but please attribute it because I'd love to see it.

For the record, if anyone wants to take on a light-themed version, I would consider that an honor and will shout it out, link to it everywhere, include it, or whatever else because I will probably never take the time to do so myself 🙂

ArcticForest Dark for Home Assistant © 2025 by mjs271 is licensed under CC BY-NC-SA 4.0.

Footnotes

  1. That said, if anyone with a different setup would like to add to these instructions, please do and submit a PR!

  2. Technically, Home Assistant only needs the arcticForest_dark.yaml file within the themes/ directory from this repo.