[Bug]: Custom theme tokens in top-navigation context are overridden by dark mode defaults due to CSS specificity

[GoranMandic91]

When using applyTheme() with custom tokens in the top-navigation context, the custom values work correctly in light mode but are overridden by Cloudscape's default dark mode styles when switching to dark mode via applyMode(Mode.Dark).

Steps to Reproduce:

1. Apply a custom theme with tokens in the top-navigation context:

import { applyTheme } from '@cloudscape-design/components/theming';
import { Theme } from '@cloudscape-design/components/theming';

const theme: Theme = {
  tokens: {},
  contexts: {
    'top-navigation': {
      tokens: {
        colorTextAccent: { light: '#FFAC00', dark: '#FFAC01' },
        colorTextInteractiveHover: { light: '#FFAC00', dark: '#FFAC01' },
      },
    },
  },
};

applyTheme({ theme });

2. Switch to dark mode:

import { applyMode, Mode } from '@cloudscape-design/global-styles';
applyMode(Mode.Dark);

3. Observe the TopNavigation component - elements like the expanded dropdown button and identity link hover state show the default blue (#42b4ff) instead of the custom color (#FFAC00).

Expected Behavior:
Custom theme tokens should take precedence over default dark mode styles. The top navigation elements should display #FFAC00 in both light and dark modes.

Actual Behavior:
In dark mode, the custom theme values are overridden by Cloudscape's default dark mode styles. The elements display #42b4ff (default blue) instead of #FFAC00.

Root Cause Analysis:
The issue is CSS specificity. The theme runtime injects CSS like:

.awsui-context-top-navigation:not(#\9) {
  --color-text-accent-n1kmht: #FFAC00;
  --color-text-accent-n1kmht: #FFAC01;
}

But Cloudscape's dark mode defaults use a doubled selector with higher specificity:

.awsui-dark-mode.awsui-dark-mode .awsui-context-top-navigation:not(#\9) {
  --color-text-accent-n1kmht: #42b4ff;
}

The .awsui-dark-mode.awsui-dark-mode selector has higher specificity than the theme-injected selector, causing the custom values to be overridden.

Workaround:
Using CSS overrides with !important:

.awsui-context-top-navigation button[aria-expanded='true'] {
  color: var(--custom-primary-color) !important;
}

Environment:

• @cloudscape-design/components: 3.0.1171
• @cloudscape-design/global-styles: 1.0.49
• @cloudscape-design/theming-runtime: 1.0.90 (transitive)
• Browser: Chrome (latest)
• OS: macOS

[jperals]

Hello Goran,

Thank you for the detailed report. We are taking a look.

[mxschll]

Hi Gorgan,

I tried replicating the issue using the code below but wasn’t able to reproduce the behavior you described. Did you happen to use the navigation in another nested context?

Here’s the complete sample code I used. The colors are applied correctly in dark mode as well:

import Button from '@cloudscape-design/components/button'
import { applyTheme, Theme } from '@cloudscape-design/components/theming'
import TopNavigation from '@cloudscape-design/components/top-navigation'
import { applyMode, Mode } from '@cloudscape-design/global-styles'
import { useEffect, useState } from 'react'

const theme: Theme = {
  tokens: {},
  contexts: {
    'top-navigation': {
      tokens: {
        colorTextAccent: { light: '#FFAC00', dark: '#FFAC01' },
        colorTextInteractiveHover: { light: '#FFAC00', dark: '#FFAC01' },
      },
    },
  },
}

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false)
  const [isThemeApplied, setIsThemeApplied] = useState(false)

  useEffect(() => {
    let reset: (() => void) | undefined

    if (isThemeApplied) {
      const result = applyTheme({ theme })
      reset = result.reset
    }

    return () => {
      if (reset) {
        reset()
      }
    }
  }, [isThemeApplied])

  const toggleDarkMode = () => {
    const newMode = !isDarkMode
    setIsDarkMode(newMode)
    applyMode(newMode ? Mode.Dark : Mode.Light)
  }

  return (
    <div>
      <TopNavigation
        identity={{
          href: '#',
          title: 'Test Application',
        }}
        utilities={[
          {
            type: 'button',
            text: 'Link',
            href: '#',
          },
          {
            type: 'menu-dropdown',
            text: 'User Menu',
            description: 'user@example.com',
            iconName: 'user-profile',
            items: [
              { id: 'profile', text: 'Profile' },
              { id: 'preferences', text: 'Preferences' },
              { id: 'signout', text: 'Sign out' },
            ],
          },
        ]}
        i18nStrings={{
          searchIconAriaLabel: 'Search',
          searchDismissIconAriaLabel: 'Close search',
          overflowMenuTriggerText: 'More',
          overflowMenuTitleText: 'All',
          overflowMenuBackIconAriaLabel: 'Back',
          overflowMenuDismissIconAriaLabel: 'Close menu',
        }}
      />

      <div style={{ padding: '20px' }}>
        <h1>Cloudscape Theme Test</h1>
        
        <div style={{ margin: '20px 0' }}>
          <Button
            variant="primary"
            onClick={() => setIsThemeApplied(!isThemeApplied)}
          >
            {isThemeApplied ? 'Remove Theme' : 'Apply Theme'}
          </Button>
          {' '}
          <Button onClick={toggleDarkMode}>
            {isDarkMode ? 'Light Mode' : 'Dark Mode'}
          </Button>
        </div>

        <div style={{ marginTop: '20px' }}>
          <p><strong>Mode:</strong> {isDarkMode ? 'Dark' : 'Light'}</p>
          <p><strong>Theme:</strong> {isThemeApplied ? 'Applied' : 'Not Applied'}</p>
          <p><strong>Expected color in dark mode:</strong> #FFAC01 (orange)</p>
          <p><strong>Default color in dark mode:</strong> #42b4ff (blue)</p>
        </div>
      </div>
    </div>
  )
}

export default App