Ombi Version 4 is nearly ready for release. For anyone that uses Ombi, you are likely aware of this and anxious for the onslaught of new features and modern design. One issue I had, though, when setting up my new V4 instance last night was the theme.

The initial Ombi V4 theme is a light theme, with the option to switch to a dark theme by clicking “Change Theme” on the left-hand menu. However, I use Organizr and everything else in my setup uses a dark theme, so I got to work trying to figure out how to get the light theme to default to dark.

The default Ombi “light” theme does look good

The long and short of it is that after deep investigation, I discovered that the theme is set and stored via a Local Storage cookie that is not initially set when the page loads. The local storage cookie with key name “theme” and values of either “light” or “dark” determine which theme is used by Ombi.

Since the default is to not set the cookie at all (if no cookie is set it defaults to light), the easiest way to set the default theme to the dark theme in a non-obtrusive manner was to add a simple javascript IF statement to the main index.html file that Ombi uses (located in the Ombi folder under \Ombi\ClientApp\dist\index.html. It looks like this:

if (localStorage.getItem("theme")) {
	// The user has been to this page before
	} 
else {
	// First time on this page
	localStorage.setItem('theme', 'dark');
	}

Basically, this if statement checks the localStorage cookies for a key named “theme”. If it finds this key, it doesn’t do anything (meaning that if this key already exists from the user clicking the change theme button, it won’t modify it). If the cookie does not exist, it creates it with the value “dark”.

You add this code in the <head> section under the javascript section, typically somewhere around line 12 or 13. The resulting index.html file should look like this:

The lines we added are lines 13 through 18

With this simple modification, the default theme is dark but the ability to change the theme to light for each user is preserved and remembered (for the extent of that session on their respective machines). Your resulting default dark theme is beautiful and matches the dark styling of both Organizr and Plex.

It is worth noting that if you update Ombi you’ll likely have to make this same change again if you replace the index.html with an updated version. Thankfully it is a quick and easy copy and paste.

, , , , ,
Show Comments