Provider / Theme

The Provider component is the root-level context wrapper for Proyecto Viviana. It supplies color scheme (light/dark), scale, and locale context to all descendant components.

Import

import { Provider } from '@proyecto-viviana/solid-spectrum';

Basic Setup

Wrap your application with Provider at the root level.

Provider is typically used at the root of your app — not rendered inline.

It establishes the theme context consumed by all Proyecto Viviana components.

// In your app entry point:
import { Provider } from '@proyecto-viviana/solid-spectrum';
import '@proyecto-viviana/solid-spectrum/styles.css';

function App() {
  return (
    <Provider>
      <YourApp />
    </Provider>
  );
}

Color Scheme

Control whether components render in light or dark mode.

Default (`light`)

<Provider colorScheme="dark">
  <Button variant="primary">Dark Theme Button</Button>
</Provider>

<Provider colorScheme="light">
  <Button variant="primary">Light Theme Button</Button>
</Provider>

Scale

Control the interface density. 'medium' is standard, 'large' increases touch target sizes for mobile.

scale: "medium" (default)

scale: "large" (touch-optimized)

<Provider scale="medium">
  <Button>Medium Scale</Button>
</Provider>

<Provider scale="large">
  <Button>Large Scale (mobile-friendly)</Button>
</Provider>

Using useTheme

Access the current theme context in any descendant component.

// Import the hook

import { useTheme } from '@proyecto-viviana/solid-spectrum';

// Inside any descendant component:

const theme = useTheme();

// theme.colorScheme → 'light' | 'dark'

// theme.scale → 'medium' | 'large'

import { useTheme } from '@proyecto-viviana/solid-spectrum';

function MyComponent() {
  const theme = useTheme();
  return <p>Color scheme: {theme.colorScheme}</p>;
}

Props

Prop	Type	Default	Description
`colorScheme`	'light' \| 'dark'	`'light'`	Color scheme selection for built-in themes
`scale`	'medium' \| 'large'	`'medium'`	Interface density scale
`locale`	string	—	BCP 47 locale string for date/number formatting (e.g. 'en-US')
`children`	JSX.Element	—	Application tree to provide context to

Accessibility

Respects system color scheme preference via prefers-color-scheme when not explicitly set
The scale prop increases touch target sizes for WCAG 2.5.5 compliance
Locale affects date/number formatting and text direction for RTL languages