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

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38002?quickstart=1)

This PR improves the `useTheme` hook implementation to provide more
robust theme resolution and updates the unlock page logo to properly
respond to theme changes.

### 1. **Enhanced `useTheme` Hook** (`ui/hooks/useTheme.ts`)
- **Refactored theme resolution logic** into a separate `resolveTheme()`
function for better code organization and testability
- **Improved fallback mechanism** with the following priority:
  1. User's explicit theme setting (`light` or `dark`)
  2. System theme when "OS" is selected
  3. Document theme attribute on initial load
  4. System preference as final fallback

### 2. **Unlock Page Logo Component** (`ui/pages/unlock-page/`)
- Created new `MetaMaskWordmarkLogo` component that responds to theme
changes
- Updated styles to properly display logo based on theme
- Integrated `useTheme` hook for dynamic theme-aware rendering

### 3. **Test Snapshots Updates**
Updated Jest snapshots to reflect the new consistent theme behavior:
-
`ui/components/multichain-accounts/smart-contract-account-toggle/__snapshots__/smart-contract-account-toggle.test.tsx.snap`
-
`ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.tsx.snap`
-
`ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap`
-
`ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap`

**Why snapshots changed:** 
The improved `useTheme` hook now properly resolves to `light` theme by
default in tests (instead of `undefined`), causing `ToggleButton`
components to consistently render with light theme colors (`rgb(183,
187, 200)` = `#b7bbc8` = `lightTheme.colors.icon.muted`).

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Updated useTheme hook and logo for unlock page

## **Related issues**

Fixes:

## **Manual testing steps**

1. Open Extension
2. Create Wallet
3. Lock Wallet
4. Validate the changes

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/d14095eb-b4e5-4db7-a93f-bad6682f91c6



## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.




<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refactors `useTheme` for reliable light/dark resolution and updates
the unlock page wordmark logo to respond to theme, with minor CSS tweaks
and snapshot updates.
> 
> - **Hooks**:
> - **`useTheme`**: Extracts `resolveTheme(settingTheme)` with clear
priority (explicit setting > OS when selected > document on initial load
> system), validates against `validThemes`, warns and defaults to
`light` if invalid; initializes state via resolver and applies on
setting changes.
> - **Unlock Page UI**:
> - **New `MetamaskWordmarkLogo`**: Uses `useTheme` and renders
`MetaFoxHorizontalLogo` with theme awareness; replaces direct logo usage
in `unlock-page.component.js`.
> - **Styles**: Adjusts
`unlock-page__mascot-container__horizontal-logo--popup` margins with
responsive override.
> - **Tests**:
> - Snapshot updates across settings and multichain components
reflecting consistent toggle colors (e.g., off `rgb(183, 187, 200)`, on
`rgb(68, 89, 255)`).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
839eae4. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Chaitanya Potti <[email protected]>

Author: smgv

ui/components/multichain-accounts/smart-contract-account-toggle-section/__snapshots__/smart-contract-account-toggle-section.test.tsx.snap

@@ -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;"
@@ -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;"
@@ -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;"
@@ -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;"

ui/components/multichain-accounts/smart-contract-account-toggle/__snapshots__/smart-contract-account-toggle.test.tsx.snap

@@ -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;"
@@ -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;"
@@ -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;"

ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.tsx.snap

@@ -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;"
@@ -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;"

ui/hooks/useTheme.ts

@@ -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;