search

ionic-team / ionic-docs

https://ionicframework.com/docs
Apache License 2.0
589 stars 3.02k forks source link

Dark Mode page doesn't make it clear for manual toggle for Dark Mode settings #1335

Closed billygerhard closed 7 months ago

billygerhard commented 4 years ago

URL https://ionicframework.com/docs/theming/dark-mode

What is missing or inaccurate about the content on this page? The Dark Mode shows an easy way to toggle dark mode on/off, but it doesn't mention that you need to add the body.dark yourself to the CSS. Reading it over, I assumed it came standard with the starter templates. If you are adding the Media query standard to the starter templates, then the body.dark should also come standard, or make it clear that it needs to be added manually.

brandyscarney commented 4 years ago

Thanks for the issue! In the documentation we state that a fallback can be added to support older browsers.

https://ionicframework.com/docs/theming/dark-mode#css-class-fallback

With the variables targeting the body.dark selector, all that is needed now is to add the class to the <body> in the app. This can be done in a variety of ways depending on the framework your app is built with.

This is mainly only needed if you need to support IE: https://caniuse.com/#feat=prefers-color-scheme

Our starters include only the media query, as we do not support IE, and we don't want to force users to have the toggle set up for their dark modes.

There is a section on adding the dark class to the body via JavaScript here: https://ionicframework.com/docs/theming/dark-mode#automatically-enable-dark-mode

At the end of the document there is some code to copy/paste into your CSS if you follow this guide: https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme

We also mention that the class has to be added to the body there:

The following code can be copied and pasted into an app to get Ionic's dark theme. We add the dark class to the document body using JavaScript as mentioned in the combining with JavaScript section. The dark mode will not be enabled until the dark class is added to the document body.

We don't plan to include this specific class in our starters as it is only intended for browsers that do not support the media query or if you want to support toggling dark mode, but we wanted to cover different uses in the guide. However, if you have tips on how we can make this more clear please let me know! Thanks. 🙂

billygerhard commented 4 years ago

The section that says to copy and paste the CSS is well below the section explaining the manual toggle. That toggle section should link to the CSS section to make it easier to follow.

I have a lot more uses personally to add a toggle in or use other sources besides the media query, and I just found it hard readability wise to follow this guide. The only problem with not including the body.dark in the starters, I can see if having to update 2 different sources, if you update the default colors on the starters, and forget to update the sample doc here, you can get 2 different themes if you use the toggle vs the media query.

mhartington commented 4 years ago

@billygerhard if you have any suggestions or improvements, we'd gladly accept a pull request.

To be very frank, there's a few ways to handle dark mode experience, and they all fit different use cases. It would be great if we could expand things to fit automatic (css media query), manual (js-based with classes), and some mix of the two.

mavyfaby commented 4 years ago

Just create a button to toggle to add class "dark" on the <body> tag.

billygerhard commented 4 years ago

@mavyfaby the issue is the CSS doesn't exist in the template, not the toggle. Even if you add the class, it doesn't do anything. You need to add the CSS yourself. The document shows how to add the button, but the CSS that goes with the button is a few sections lower, and its hard to follow all the requirements.

mavyfaby commented 4 years ago

@mavyfaby the issue is the CSS doesn't exist in the template, not the toggle. Even if you add the class, it doesn't do anything. You need to add the CSS yourself. The document shows how to add the button, but the CSS that goes with the button is a few sections lower, and its hard to follow all the requirements.

I see

xuelink commented 1 year ago

I totally agree with @billygerhard. You can add body.dark in default starter template

Just create a button to toggle to add class "dark" on the <body> tag.

If it works like that mentioned above, its gonna be simplier and easier.

Best

liamdebeasi commented 7 months ago

Hey there,

With the Ionic 8 release we revamped our dark mode documentation to provide more clarification around when dark mode gets applied.