No support for dark mode

[benmod]

How to reproduce:

• Create a blank Ionic 7 project
• Add any simple components, like a select box
• Switch to dark mode

Expected behaviour:

• Everything has the dark theme, including cards, etc.

Current behaviour:

• Only the select box has the dark theme

[Daniel-Mendes]

Just change in theme\specs\theme.dark.css:

body.dark {}

to

@media (prefers-color-scheme: dark) {
   body {}
}

[danielkleebinder]

@benmod Thank you for this issue! @Daniel-Mendes Thank you for your answer!

Please note that the component style overrides are only a small little hobby project of mine. This tool should just generate the MD3 CSS tokens. That's its primary purpose. It should provide you with all the tokens that are listed in the official Material Design 3 guidelines. However, it would be great if we could extend it to the point where we are fully compliant though!

[Daniel-Mendes]

You should add a kitchen sink demo, so we could check the current state and help improve the md3 design.

Maybe fork: https://github.com/ionic-team/docs-demo

Edit: I forked and added md3-for-ionic in the demo: https://github.com/Daniel-Mendes/docs-demo-main

Examples:

• Card looks good
• Alert has material 2 design

Screenshot of konsta ui dialog component:

[wdcossey]

@Daniel-Mendes I forked (your fork) and deployed it to Cloudflare Pages.

https://docs-demo-main.pages.dev/

PS: If you open that on an iOS device it'll automatically use to iOS mode

To force it to MD go here https://docs-demo-main.pages.dev/?ionic:mode=md