Skip to content

fix: Improved useTheme Hook and Unlock Page Logo Theme Handling #38002

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.

Sign up for GitHub

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

Merged
merged 11 commits into from
Nov 21, 2025
+103 −60
Merged

fix: Improved useTheme Hook and Unlock Page Logo Theme Handling #38002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1a6fa97
fix: updated useTheme hook and unlock page logo
smgv Nov 20, 2025
78b5696
fix: comment review
smgv Nov 20, 2025
e8efcb6
fix: updated comment review
smgv Nov 20, 2025
0d62aaf
Merge branch 'main' into fix/updated-usetheme-hook-for-logo
smgv Nov 20, 2025
c9e7f82
fix: lint and test case update
smgv Nov 20, 2025
7262aef
fix: updated snapshot
smgv Nov 20, 2025
bea787b
Merge branch 'main' into fix/updated-usetheme-hook-for-logo
smgv Nov 20, 2025
c950927
chore: update snapshots after useTheme improvements
smgv Nov 20, 2025
e6d73fe
Merge branch 'main' into fix/updated-usetheme-hook-for-logo
smgv Nov 20, 2025
6e878b9
fix: reverted the snapshot
smgv Nov 20, 2025
839eae4
Merge branch 'main' into fix/updated-usetheme-hook-for-logo
chaitanyapotti Nov 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions ...-account-toggle-section/__snapshots__/smart-contract-account-toggle-section.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ exports[`SmartContractAccountToggleSection Disabled State Handling disables all
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(139, 153, 255);"
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(68, 89, 255);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
Expand Down Expand Up @@ -101,7 +101,7 @@ exports[`SmartContractAccountToggleSection Disabled State Handling disables all
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
Expand Down Expand Up @@ -313,7 +313,7 @@ exports[`SmartContractAccountToggleSection Network Integration displays toggle f
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(139, 153, 255);"
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(68, 89, 255);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
Expand Down Expand Up @@ -363,7 +363,7 @@ exports[`SmartContractAccountToggleSection Network Integration displays toggle f
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
Expand Down
6 changes: 3 additions & 3 deletions ...s/smart-contract-account-toggle/__snapshots__/smart-contract-account-toggle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`SmartContractAccountToggle Basic Rendering shows toggle as OFF for unsu
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
Expand Down Expand Up @@ -73,7 +73,7 @@ exports[`SmartContractAccountToggle Basic Rendering shows toggle as enabled for
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(139, 153, 255);"
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(68, 89, 255);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
Expand Down Expand Up @@ -128,7 +128,7 @@ exports[`SmartContractAccountToggle Disabled State disables toggle during pendin
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(139, 153, 255);"
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(68, 89, 255);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
Expand Down
4 changes: 2 additions & 2 deletions ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -759,7 +759,7 @@ exports[`NetworkListMenu renders properly 1`] = `
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
Expand Down Expand Up @@ -1867,7 +1867,7 @@ exports[`NetworkListMenu should match snapshot when editing a network 1`] = `
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
>
<div
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(75, 80, 92);"
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(183, 187, 200);"
>
<div
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
Expand Down
66 changes: 46 additions & 20 deletions ui/hooks/useTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,65 @@ import { getTheme } from '../selectors';
import { ThemeType } from '../../shared/constants/preferences';

/**
* List of valid themes. Should return an array with only the values ThemeType.light and ThemeType.dark
* unless there is a future we add more themes.
* List of valid themes.
*/
const validThemes = Object.values(ThemeType).filter((theme) => {
return theme !== ThemeType.os;
});

/**
* Resolves the theme based on the user's theme setting.
*
* @param settingTheme - The theme setting from user preferences
* @returns The resolved theme (light or dark)
*/
function resolveTheme(
settingTheme: string | undefined,
): ThemeType.light | ThemeType.dark {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
? ThemeType.dark
: ThemeType.light;

const documentTheme = document.documentElement.getAttribute('data-theme');

let resolvedTheme;
if (settingTheme === ThemeType.os) {
resolvedTheme = systemTheme;
} else if (settingTheme) {
resolvedTheme = settingTheme;
} else {
// Initial load
resolvedTheme = documentTheme || systemTheme;
}

const isValidTheme = validThemes.includes(
resolvedTheme as ThemeType.light | ThemeType.dark,
);

if (!isValidTheme) {
console.warn(
`useTheme: Invalid theme resolved to "${resolvedTheme}". Defaulting to "${ThemeType.light}".`,
);
return ThemeType.light;
}

return resolvedTheme as ThemeType.light | ThemeType.dark;
}

/**
* Returns the current theme based on the user's theme setting.
*
* @returns theme
*/
export function useTheme() {
export function useTheme(): ThemeType.light | ThemeType.dark {
const settingTheme = useSelector(getTheme);
const [theme, setTheme] = useState(settingTheme);
const [theme, setTheme] = useState<ThemeType.light | ThemeType.dark>(() =>
resolveTheme(settingTheme),
);

useEffect(() => {
const result =
!settingTheme || settingTheme === ThemeType.os
? document.documentElement.getAttribute('data-theme')
: settingTheme;
const isValidTheme = validThemes.includes(
result as ThemeType.light | ThemeType.dark,
);

if (!isValidTheme) {
console.warn(
`useTheme: Invalid theme resolved to "${result}". Defaulting to "${ThemeType.light}".`,
);
setTheme(ThemeType.light);
}

setTheme(result);
const resolved = resolveTheme(settingTheme);
setTheme(resolved);
}, [settingTheme]);

return theme;
Expand Down
Loading
Loading