I'm not sure what the best way is to design pages (Pages app) so they look good in light and dark mode.

I found out that I can target dark mode with CSS by adding html[data-ips-scheme-active="dark"] to my CSS selector, for example:

html[data-ips-scheme-active="dark"] .column {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

Is that the proper way to do it or is there a better way?

For example if I want a specific background or text color in a certain section of the page, do I have to declare two colors, one by default (for the light mode) and one with html[data-ips-scheme-active="dark"] (for the dark mode)?

Or are there variables I can use that automatically switch between light and dark modes?

Are there some resources on this topic? Thank you!

That is the correct way in which to do it. We dont have any documentation on that currently, but this is what you are looking for

[data-ips-scheme="light"] {
    SOMETHINGCSS-Y;
}
[data-ips-scheme="dark"] {
    SOMETHINGCSS-Y;
}

Great! Thank you Marc.

If you want to merge both light and dark values into a single property, you can use the --if- variables, like so:

.your-element{
	background: var(--if-light, red) var(--if-dark, blue);
}

But otherwise the [data-ips-scheme] attribute is correct. 👍

Great! Thanks a lot for replying @Ehren ! Much appreciated.