Skip to content

Theme for settings#16479

Merged
zadjii-msft merged 4 commits intomicrosoft:mainfrom
bundgaard:light_settings_v2
Jul 1, 2024
Merged

Theme for settings#16479
zadjii-msft merged 4 commits intomicrosoft:mainfrom
bundgaard:light_settings_v2

Conversation

@bundgaard
Copy link
Contributor

@bundgaard bundgaard commented Dec 15, 2023

Adds support for a new settings object in the theme settings. This includes a single property, theme. This allows users to set a different theme from the app's requested theme, if they so choose.

Closes #9231

Updated with JSON entries.
Update _UpdateBackgroundForMica
@zadjii-msft
Copy link
Member

Hey so I spent another few minutes playing with this, and I think I realized what's wonky about mica and the settings UI. Basically, Mica will always be in the app theme, so a light themed MainPage will have black text, and if you put that on top of a dark-themed Mica, it'll look insane.

Fortunately, the fix is actually pretty straightforward:

diff --git a/src/cascadia/TerminalSettingsEditor/MainPage.cpp b/src/cascadia/TerminalSettingsEditor/MainPage.cpp
index be390f728..ea98ee83f 100644
--- a/src/cascadia/TerminalSettingsEditor/MainPage.cpp
+++ b/src/cascadia/TerminalSettingsEditor/MainPage.cpp
@@ -699,21 +699,23 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             }
         }

-        if (!isMicaAvailable)
-        {
-            return;
-        }
         const auto& theme = _settingsSource.GlobalSettings().CurrentTheme();
-        const auto& requestedTheme = (theme.Settings() != nullptr) ? theme.Settings().RequestedTheme() : theme.RequestedTheme();
+        const bool hasThemeForSettings{ theme.Settings() != nullptr };
+        const auto& appTheme = theme.RequestedTheme();
+        const auto& requestedTheme = (hasThemeForSettings) ? theme.Settings().RequestedTheme() : appTheme;

         RequestedTheme(requestedTheme);

-        if (!isMicaAvailable)
-        {
-            return;
-        }
+        // Mica gets it's appearance from the app's theme, not necessarily the
+        // Page's theme. In the case of dark app, light settings, mica will be a
+        // dark color, and the text will also be dark, making the UI _very_ hard
+        // to read. (and similarly in the inverse situation).
+        //
+        // To mitigate this, don't set the transparent background in the case
+        // that our theme is different than the app's.
+        const bool actuallyUseMica = isMicaAvailable && (appTheme == requestedTheme);

-        const auto bgKey = (theme.Window() != nullptr && theme.Window().UseMica()) ?
+        const auto bgKey = (theme.Window() != nullptr && theme.Window().UseMica()) && actuallyUseMica ?
                                L"SettingsPageMicaBackground" :
                                L"SettingsPageBackground";

I think you should be able to take that delta and get this into a totally working state, and we can finally merge this in. Sorry for all the delays here.

settings blob I was using
        {
            "name": "GH#16479 Light app, no mica, light settings",
            "window":
            {
                "applicationTheme": "light",
                "useMica": false
            },
            "settings": { "theme": "light" }
        },
        {
            "name": "GH#16479 Dark app, no mica, light settings",
            "window":
            {
                "applicationTheme": "dark",
                "useMica": false
            },
            "settings": { "theme": "light" }
        },
        {
            "name": "GH#16479 Light app, yes mica, light settings",
            "window":
            {
                "applicationTheme": "light",
                "useMica": true
            },
            "settings": { "theme": "light" }
        },
        {
            "name": "GH#16479 Dark app, yes mica, light settings",
            "window":
            {
                "applicationTheme": "dark",
                "useMica": true
            },
            "settings": { "theme": "light" }
        },
        {
            "name": "GH#16479 Light app, no mica, dark settings",
            "window":
            {
                "applicationTheme": "light",
                "useMica": false
            },
            "settings": { "theme": "dark" }
        },
        {
            "name": "GH#16479 Dark app, no mica, dark settings",
            "window":
            {
                "applicationTheme": "dark",
                "useMica": false
            },
            "settings": { "theme": "dark" }
        },
        {
            "name": "GH#16479 Light app, yes mica, dark settings",
            "window":
            {
                "applicationTheme": "light",
                "useMica": true
            },
            "settings": { "theme": "dark" }
        },
        {
            "name": "GH#16479 Dark app, yes mica, dark settings",
            "window":
            {
                "applicationTheme": "dark",
                "useMica": true
            },
            "settings": { "theme": "dark" }
        }

Copy link
Member

@zadjii-msft zadjii-msft left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(as noted)

@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Apr 30, 2024
@microsoft-github-policy-service microsoft-github-policy-service bot added the No-Recent-Activity This issue/PR is going stale and may be auto-closed without further activity. label May 7, 2024
@zadjii-msft
Copy link
Member

I'm just gonna push the above delta to this branch after Build and get this merged in, cause I think this is pretty straightforward.

@zadjii-msft zadjii-msft removed Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something No-Recent-Activity This issue/PR is going stale and may be auto-closed without further activity. labels May 10, 2024
@zadjii-msft zadjii-msft self-assigned this May 14, 2024
@zadjii-msft zadjii-msft dismissed their stale review May 28, 2024 19:56

now I'm on the hook

@zadjii-msft zadjii-msft added Area-SettingsUI Anything specific to the SUI Area-Theming Anything related to the theming of elements of the window labels May 28, 2024
@microsoft-github-policy-service microsoft-github-policy-service bot added Issue-Task It's a feature request, but it doesn't really need a major design. Product-Terminal The new Windows Terminal. labels May 28, 2024
@zadjii-msft zadjii-msft added this to the Terminal v1.22 milestone May 28, 2024
zadjii-msft added a commit that referenced this pull request Jun 3, 2024
Copy link
Member

@carlos-zamora carlos-zamora left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just want a response to that one comment before reviewing. Also don't forget to update the...

  • schema
  • docs

X(bool, RainbowFrame, "experimental.rainbowFrame", false) \
X(bool, UseMica, "useMica", false)

#define MTSM_THEME_SETTINGS_SETTINGS(X) \
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this macro get called anywhere?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Copy link
Member

@carlos-zamora carlos-zamora left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Idk why ctrl+f didn't find the reference there... thanks!

@zadjii-msft zadjii-msft added this pull request to the merge queue Jul 1, 2024
Merged via the queue into microsoft:main with commit 1f47de3 Jul 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Area-SettingsUI Anything specific to the SUI Area-Theming Anything related to the theming of elements of the window Issue-Task It's a feature request, but it doesn't really need a major design. Product-Terminal The new Windows Terminal.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Light mode in settings UI only

4 participants