-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Create a Dark Theme #4967
Comments
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 :) |
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. |
From @matheusrocha89 on January 12, 2016 11:6 I wanna help you guys with this 👍 |
@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 Thanks! |
From @jgw96 on January 13, 2016 18:53 @matheusrocha89 are you working on this? Id love to help if needed? |
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 👍 |
Heads up, we JUST moved |
From @jgw96 on January 13, 2016 22:50 @adamdbradley yep saw that today. Are all these bugs moved over to the main repo too? |
From @jgw96 on January 13, 2016 22:50 @adamdbradley or are all the bugs still gonna be handled in this repo? |
Currently being moved over, we've got some work to do to clean up the process for creating and managing issues. |
From @jgw96 on January 13, 2016 22:52 Got ya, is there gonna be an official set of contributing guidelines set up for v2? |
@adamdbradley, @jgw96 made a good point, is there any contributing guidelines? |
there are several contributing guideline documents for ionic-related repos. I usually follow the first link below to build and test changes:
|
for look and feel changes, perhaps should suggest contributors to build a demo page or update ionic-site repo as well ? |
@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 |
Don't have any questions yet on my end, I plan on working on this tonight,
|
@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. |
@adamdbradley If the slack is Ionic Worldwide I am already there 👍 Are you there too? |
@jgw96 Are you on Ionic Worldwide slack? |
@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? |
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 |
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. 😄 |
@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 |
@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. |
@matheusrocha89 I made some updates to the repo to make it easier to create new themes. If you get the latest from the 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:
When you make changes to the dark themes you'll have to run 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! |
@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 |
Looking nice!! |
Ok, I will try, thanks @brandyscarney and @adamdbradley |
@adamdbradley one last question, is there a way to use the md version on e2e too? |
👍 |
@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? |
@matheusrocha89 Hey, if you want to ignore the chip component for now I can work on adding some variables in this issue: #5386 😄 |
"allow end developers to choose which theme they want to start from" How is this accomplished (or what is the plan)? (A starter-app currently loads |
Importing app.ios.scss
|
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. |
Can't tell for sure what is going on with this issue, since it seems it was never truly resolved.
|
@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: 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. |
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
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 b) Get Maybe someone with more expertise here can comment on the right path to explore. |
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. |
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
The text was updated successfully, but these errors were encountered: