UMD Web Utilities Library
    Preparing search index...

    Variable themeConst

    theme: {
        background: (isDark?: boolean) => string | undefined;
        border: (isDark?: boolean) => string;
        fontColor: (isDark?: boolean) => "light" | "dark";
        foreground: (isDark?: boolean) => "white" | "black";
        inverse: (isDark?: boolean) => "white" | "black";
        muted: (isDark?: boolean) => string;
        subdued: (isDark?: boolean) => string;
        variant: (isDark?: boolean) => "light" | "dark";
    } = ...

    Theme utility namespace

    Provides functions to map boolean theme flags to style package values. All functions accept an optional boolean and return type-safe literals.

    Type Declaration

    • Readonlybackground: (isDark?: boolean) => string | undefined

      Get appropriate background color for theme

      Returns the background color token for dark themes. Returns undefined for light themes (uses default/transparent).

      .withStyles({
        element: {
          backgroundColor: theme.background(isThemeDark)
        }
      })
    • Readonlyborder: (isDark?: boolean) => string

      Get appropriate border color for theme

      Returns border color appropriate for the theme. Dark themes use darker gray, light themes use light gray.

      .withStyles({
        element: {
          border: `1px solid ${theme.border(isThemeDark)}`
        }
      })
    • ReadonlyfontColor: (isDark?: boolean) => "light" | "dark"

      Get theme variant for font-related compose functions (alias for variant)

      Alias for theme.variant() with a more explicit name for typography contexts. Use this when passing theme to compose functions like typography.sans.compose(), typography.campaign.compose(), or text.rich.composeSimple().

      // Use with typography compose functions
      typography.sans.compose('large', { theme: theme.fontColor(isThemeDark) })
      elementStyles.text.rich.composeSimple({ theme: theme.fontColor(isThemeDark) })

      // For actual color values, use foreground()
      .withStyles({
        element: {
          color: theme.foreground(isThemeDark)  // Returns 'white' | 'black'
        }
      })
    • Readonlyforeground: (isDark?: boolean) => "white" | "black"

      Get appropriate foreground color for theme

      Returns the text/icon color that should be used for the given theme. Dark themes use white text, light themes use black text.

      animation.line.composeSlideUnder({ color: theme.foreground(isThemeDark) })
      animation.line.composeFadeUnder({ color: theme.foreground(isThemeDark) })

      .withStyles({
        element: {
          color: theme.foreground(isThemeDark)
        }
      })
    • Readonlyinverse: (isDark?: boolean) => "white" | "black"

      Get inverted foreground color for theme

      Returns the opposite of theme.foreground(). Useful for accent elements that should contrast with the theme.

      // Badge on dark background
      .withStyles({
        element: {
          backgroundColor: theme.foreground(isThemeDark),
          color: theme.inverse(isThemeDark)
        }
      })
    • Readonlymuted: (isDark?: boolean) => string

      Get muted/tertiary text color for theme

      Returns the most subtle text color appropriate for tertiary text, placeholder text, or disabled states. More muted than subdued().

      // Placeholder or disabled text
      typography.sans.compose('small', {
        color: theme.muted(isThemeDark)
      })

      // Tertiary supporting text
      .withStyles({
        element: {
          color: theme.muted(isThemeDark)  // Most subtle gray for theme
        }
      })
    • Readonlysubdued: (isDark?: boolean) => string

      Get subdued/secondary text color for theme

      Returns a less prominent text color appropriate for secondary text, captions, labels, or supporting content. Adapts to theme context.

      // Secondary text that adapts to theme
      typography.sans.compose('small', {
        color: theme.subdued(isThemeDark)
      })

      // Caption text
      .withStyles({
        element: {
          color: theme.subdued(isThemeDark)  // Gray variant for theme
        }
      })
    • Readonlyvariant: (isDark?: boolean) => "light" | "dark"

      Convert boolean theme flag to theme variant string

      Maps the boolean isThemeDark prop to the string values expected by styles package compose functions (typography, campaign, etc.)

      typography.sans.compose('large', { theme: theme.variant(isThemeDark) })
      typography.campaign.compose('extralarge', { theme: theme.variant(isThemeDark) })
      elementStyles.text.rich.composeSimple({ theme: theme.variant(isThemeDark) })

    import { theme } from '@universityofmaryland/web-utilities-library/theme';

    // Use in typography compose
    const headlineStyles = {
      ...typography.sans.compose('large', {
        theme: theme.variant(isThemeDark)
      })
    };

    // Use in animation compose
    const animationStyles = {
      ...animation.line.composeSlideUnder({
        color: theme.foreground(isThemeDark)
      })
    };

    // Use in element styles
    .withStyles({
      element: {
        color: theme.foreground(isThemeDark),
        backgroundColor: theme.background(isThemeDark)
      }
    })

    Settings

    Member Visibility