Theming

Appearance

<Theme appearance> takes "light", "dark" or "system" (follows the operating system). Everything inside it, and every menu, popover, dialog or toast it opens, uses that appearance.

import { Theme } from '@krackedui/motion';

export function App({ children }: { children: React.ReactNode }) {
  return <Theme appearance="system">{children}</Theme>;
}

Read the current appearance with useTheme(): it returns { appearance, resolvedAppearance }.

Tokens

Motion exposes two layers of CSS variables:

• --ds-*: the KrackedUI standard names every system provides (--ds-bg-surface, --ds-text-secondary, --ds-border-default, --ds-accent-default, --ds-status-danger, --ds-radius-md, --ds-shadow-popover, --ds-motion-duration-base…). Use these in code that should work with any KrackedUI system.
• --n-*: Motion’s full palette and scales (--n-text-tertiary, --n-blue-bg-secondary, --n-shadow-outline-lg…), for Motion-specific work.

Both switch with the appearance. See Colors and Typography for every value.

In your own components

Never hard-code colors next to Motion components: use the tokens, so your UI follows light and dark and stays consistent.

export function Panel({ children }: { children: React.ReactNode }) {
  return (
    <section style={{ background: 'var(--ds-bg-surface-raised)', border: '1px solid var(--ds-border-default)', borderRadius: 'var(--ds-radius-lg)', padding: 16 }}>
      {children}
    </section>
  );
}

Reduced motion

Motion animates overlays, drawers and indicators with --ds-motion-* durations. When the user asks the system to reduce motion, slides and scales are turned off automatically.