Create a Dark Theme

[adamdbradley]

From @adamdbradley on January 11, 2016 14:54

Ionic comes with a default theme, which is mainly a white background and black foreground:
https://github.com/driftyco/ionic2/blob/master/ionic/themes/default.scss

However, Ionic2's folder structure, Sass imports and variables have all been setup to allow other themes to be easily added, and allow end developers to choose which theme they want to start from. For example, an app could start with the dark theme, but they could still customize all the colors to fit their brand.

If anyone is looking to help create the dark theme we'd really appreciate the assistance. A lot of the work is just making sure all of the css and sass variables are in place to allow the entire app's theme to switch out, and allow many other themes to be easily created with minimal sass variable changes. If interested please let us know, thanks!

Copied from original issue: driftyco/ionic2#923

[adamdbradley]

From @alexbainbridge on January 12, 2016 0:20

I know you know this, but v2 docs suggests the dark theme already exists http://ionicframework.com/docs/v2/theming/theming-your-app/

I tried to use it then found it was docs only :)

[adamdbradley]

Yeah sorry, it did at one point. But as we were building our the sass files it got to be a pain to keep updating. But now that things are solidifying we can start building it out again.

[adamdbradley]

From @matheusrocha89 on January 12, 2016 11:6

I wanna help you guys with this 👍

[adamdbradley]

@matheusrocha89 Awesome thanks! I'll assign it to myself so for now so know it's being worked on. Any questions please let us know and we can help make sure the files are setup correctly. The new dark.scss file should go in here: https://github.com/driftyco/ionic2/tree/master/ionic/themes

Thanks!

[adamdbradley]

From @jgw96 on January 13, 2016 18:53

@matheusrocha89 are you working on this? Id love to help if needed?

[adamdbradley]

From @matheusrocha89 on January 13, 2016 20:59

@jgw96 I will start to do something today, I will create a branch. Any help it's welcome 👍

[adamdbradley]

Heads up, we JUST moved ionic2 to be in a different branch in the ionic repo: https://github.com/driftyco/ionic/tree/2.0

[adamdbradley]

From @jgw96 on January 13, 2016 22:50

@adamdbradley yep saw that today. Are all these bugs moved over to the main repo too?

[adamdbradley]

From @jgw96 on January 13, 2016 22:50

@adamdbradley or are all the bugs still gonna be handled in this repo?

[adamdbradley]

Currently being moved over, we've got some work to do to clean up the process for creating and managing issues.

[adamdbradley]

From @jgw96 on January 13, 2016 22:52

Got ya, is there gonna be an official set of contributing guidelines set up for v2?

[matheusrocha89]

@adamdbradley, @jgw96 made a good point, is there any contributing guidelines?

[3dd13]

there are several contributing guideline documents for ionic-related repos.

I usually follow the first link below to build and test changes:

• https://github.com/driftyco/ionic/blob/2.0/scripts/README.md
• https://github.com/driftyco/ionic/blob/af1bfef327e685585244c6051c4d38b98aa6c62a/CONTRIBUTING.md
• http://ionicframework.com/contribute/#pull-request-guidelines
• https://github.com/driftyco/ionic-conference-app/blob/2bd80de4874f3f363cf3717f0b986fb5aa85c727/CONTRIBUTING.md

[3dd13]

for look and feel changes, perhaps should suggest contributors to build a demo page or update ionic-site repo as well ?

[adamdbradley]

@jgw96 @3dd13 @matheusrocha89 Just checking in to see if there are any questions regarding this. Also, we have a slack channel for ionic2 development, if you're interested please email, adam at ionic io

[jgw96]

Don't have any questions yet on my end, I plan on working on this tonight,
I'd love to be a part of that slack channel! Shooting you an email now.
On Jan 15, 2016 9:46 AM, "Adam Bradley" notifications@github.com wrote:

@jgw96 https://github.com/jgw96 @3dd13 https://github.com/3dd13
@matheusrocha89 https://github.com/matheusrocha89 Just checking in to
see if there are any questions regarding this. Also, we have a slack
channel for ionic2 development, if you're interested please email, adam at
ionic io

—
Reply to this email directly or view it on GitHub
#4967 (comment).

[jgw96]

@adamdbradley is there any specific style guides that the dark theme should follow? Such as a specific color pallete? My thinking on this is that the $dark color in the normal theme should be the basis of the dark theme.

[matheusrocha89]

@adamdbradley If the slack is Ionic Worldwide I am already there 👍 Are you there too?

[matheusrocha89]

@jgw96 Are you on Ionic Worldwide slack?

[matheusrocha89]

@adamdbradley I created my dev environment to test the themes. I just have one question, do you have any idea of how do you want the dark theme? All dark, just toolbars dark? Or am I free to do whatever I want?

[adamdbradley]

It should be the entire app, like these examples:

Also, the spotify app is a good example of a dark themed app:

For now you can guess some good colors to use, but we'll probably end up tweaking them a bit once @bensperry gets ahold of them. Any other questions please let me know, thanks

[matheusrocha89]

@adamdbradley 👍

[brandyscarney]

The links to the code are broken currently, but there is a searchable list of all of the Sass variables with their default values that may be helpful: http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

Subscribing to this issue to also answer any questions. 😄

[matheusrocha89]

@brandyscarney I used this to run the ionic-site example https://github.com/driftyco/ionic/blob/2.0/scripts/README.md on my mac. Is there a way to force the v2 docs of ionic-site example to use the new theming that I am creating? I would like to edit my theme and see how it's looking with the docs examples

[brandyscarney]

@matheusrocha89 We moved all of the demos to their own repo - https://github.com/driftyco/ionic-preview-app (I just made it public). So you could import the dark theme in this app and then run it just like a normal Ionic 2 app.

[adamdbradley]

@matheusrocha89 I made some updates to the repo to make it easier to create new themes. If you get the latest from the 2.0 branch, I made a few changes to the theme structures, and added the dark theme scss files: https://github.com/driftyco/ionic/tree/2.0/ionic/themes

What I have there now is pretty much the same as the default theme, but with a black background and white text. If you can tweak the colors a bit to be more like the examples above that'd be great, but as it gets further along @bensperry well be helping to set the final the colors for the dark theme.

To view e2e with the dark theme:

• gulp sass.themes
• gulp watch
• Default theme e2e tests: http://localhost:8000/dist/e2e/
• Put ?theme=dark at the end of any e2e test to see it with the dark theme

When you make changes to the dark themes you'll have to run gulp sass.themes again to rebuild the e2e css files.

So the next steps are to come up with some good dark colors, then view each of the e2e tests and make sure each component can invert colors, and that there aren't any issues with components not styling correctly. Any questions please let us know. Thanks!

[adamdbradley]

@matheusrocha89 Also, I'd prefer this is done in smaller steps, rather than one large PR. If you can break up changes to smaller commits and narrowed updating one component or color change that'd be great, and it'll be easier for us to merge in changes. Thanks

[adamdbradley]

[bensperry]

Looking nice!!

[matheusrocha89]

Ok, I will try, thanks @brandyscarney and @adamdbradley

[matheusrocha89]

@adamdbradley one last question, is there a way to use the md version on e2e too?

[adamdbradley]

Either change the device with chrome's dev tools:

Or add this querystring ionicplatform=android

[matheusrocha89]

👍

[matheusrocha89]

@brandyscarney Hi, I created a version of the dark theme but I am having some problems with the chips component, because they don't have any variables to override and since they are dark the became almost invisible on dark theme. Do you have any idea of how we can find a solution for them?

[brandyscarney]

@matheusrocha89 Hey, if you want to ignore the chip component for now I can work on adding some variables in this issue: #5386 😄

[tomsun]

"allow end developers to choose which theme they want to start from"
#4967 (comment)

How is this accomplished (or what is the plan)?

(A starter-app currently loads ionic.ios.scss which loads components.ios which loads globals.ios which loads themes/default.ios...
Naive guess #1: somehow swap themes/default.ios for themes/dark.ios in the above chain even though you don't have ownership of those files?
Naive guess #2: themes/dark.ios by convention shadows all relevant parts of themes/default.ios and can be included directly by the app somehow? )

[tomsun]

Importing themes/dark.ios before ionic.ios from the app's scss does make things darker! (my instinct was to inport the theme as the last step, which does nothing)

app.ios.scss

@import 'themes/dark.ios';
@import 'ionic.ios';

[ghenry22]

the ability to switch themes programatically rather than just at build time would be great as then we could allow users to choose from a list of defined themes in app.

[mg1075]

Can't tell for sure what is going on with this issue, since it seems it was never truly resolved.
Anyways...

1. There has been recent work on a dark theme by @pliablepixels here:
   https://github.com/pliablepixels/ionic-dark-grey-theme

2. And then the other issue is: how can we have the ability to switch themes programmatically, as asked by @ghenry22?

[ghenry22]

@mg1075 Looks like some decent work on a dark theme there.

I do have a solution for programmatically switching themes which works perfectly, the only problem that I have to put it into production or share it is that I can't figure out how to adjust the ionic build process to run an extra step to compile and build the alternate css.

For example:
What I need to figure out is how to have a second copy of variables.scss (ie variables_dark.scss) which has the dark app theme selected and any specific colour overrides etc for the dark theme in it, where the default variables.scss has the default ionic light theme.

In the build process I want it to run the usual build against variables.scss, then run those tasks again against variables_dark.scss and generate a main_dark.css.

Then we have compiled and minified light theme (main.css) and dark theme (main_dark.css) and then we programmatically switch those out.

Sorry it can be hard to explain but basically if someone can help with how to add a custom build step as above so that automatic builds work properly then I will gladly share the rest of my solution for switching themes programmatically to pair up with it.

[pliablepixels]

I did a bit of investigation on dynamic switching for my theme. I don't have an answer yet, just half-trodden paths with walls I need to scale. I am also not sure if I'm diving in deeper than needed and if there is a better path to explore.

I looked at two options:

a) In variables.scss, scope your imports like this:

.dark_grey_theme { @import 'dark.scss' }

While this does scope the import and any classes defined in it correctly, it doesn't really solve the problem of ionic components using default unscoped variable values for its components. My goal here was basically to have a dark_grey_theme and a default theme scoped import and wrap the app inside a div that I can dynamically toggle. However, this did not work due to reasons I stated above.

b) Get ionic build to compile multiple sass files and output them as 'main_dark.css' and 'main_default.css'. Ionic allows you to modify scripts with your custom scripts, which I got working, but couldn't figure out how to make the sass part invoke two different scripts with two prefixes. I used it to generate either dark or default, but not both

Maybe someone with more expertise here can comment on the right path to explore.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.