Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme for settings #16479

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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-Settings UI 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-Settings UI 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
2 participants