Dark theme in Ionic 2 Beta (as of today)

TL;DR — check out the solution section below.

I’ve just been tinkering with Ionic 2. I quite fancied trying out the dark theme that is mentioned in the docs but doesn’t exist in the sample apps.

So I looked back through the git repo history and found the previous version of the docs file which mentioned where the dark theme was previously stored.

So I followed the link. Found the old scss file called dark and then fathomed out how to still use it.

Solution

Create a new folder in your app folder called theme.

Add a file called dark.scss.

Copy the following into it:

// Dark Theme
// — — — — — — — — — — — — — — — — —
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #fff,
dark: #333,
) !default;
$text-color: #fff !default;
$background-color: #222 !default;
$list-text-color: $text-color !default;
$list-background-color: $background-color !default;
$list-border-color: #666 !default;
$link-color: map-get($colors, primary) !default;
$toolbar-background-color: #111 !default;
$toolbar-border-color: #000 !default;
$toolbar-text-color: $text-color !default;
$toolbar-active-color: $link-color !default;
$toolbar-inactive-color: #8c8c8c !default;

Now open the app.ios.scss file and add the following at line 2:

@import "theme/dark.scss";

Now open app.variables.scss and update the last line of the $colors section from:

);

to:

) !default;

So the above will get your content looking pretty sweet. All dark and pretty. However some stuff like your ion-navbars will still be light. For these you need to add a dark attribute. No value required, just the attribute:

<ion-navbar dark>

That works on all manor of components.

Reload the app your viewing (if it’s not reloaded with serve) and you should be viewing a nice dark theme application.

Worked at time of writing. May not after further Ionic 2 Beta updates. You can also use the dark.scss file to theme components rather than the dark attribute mentioned above if you struggle with it or you get sick of putting it on every. single. component. you. use.

See the responses below for some additional advice from Dirk Bertels.

If this is still useful then please hit ‘recommend’ below so others can find it :-D


If you’d like to know more about my work supporting developer well-being, and fostering teams and the humans who form and fuel them then you can find me on Twitter @harrybailey or my Harry Bailey site.