[General] Apply global color-scheme to reflect theme in use

[ProH4Ck]

Pull Request

📖 Description

This pull request includes changes to improve theme management in the FluentDesignTheme component and updates to the CSS to support these changes.

A new data attribute (data-theme) is added to body and updated every time theme changes.

In reboot.css this attribute is used to control the value of color-scheme: this ensure all browser-managed components (like scrollbars) matches theme in use.

Before:

After:

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

[dvoituron]

You can use a style like this to do the same thing... but maybe it's easier to add a body attribute.

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

[ProH4Ck]

You can use a style like this to do the same thing... but maybe it's easier to add a body attribute.

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

The media query strategy only works if system theme is in use.
If the user switches to opposite theme (example: system is light, user switches to dark) media query is not updated and as result colors are inconsistent.