Establishing Consistent Design Tokens

Implementing a unified color scheme in a modern React application bundled with Vite requires selecting an approach that aligns with your styling architecture. The following patterns demonstrate how to inject primary and secondary hues into your interface.

1. Native CSS Custom Properties

Defining design tokens at the root level provides a dependency-free solution that integrates seamlessly with browser rendering. This approach centralizes palette management in standard stylesheets.

Global Stylesheet Configuration (src/styles/design-tokens.css):

:root {
  --palette-accent: #0f172a;
  --palette-highlight: #d946ef;
  --surface-primary: #ffffff;
  --text-default: #1e293b;
}

body {
  background-color: var(--surface-primary);
  color: var(--text-default);
  font-family: system-ui, -apple-system, sans-serif;
}

Component Implementation (src/components/Header.tsx):

import { FC } from 'react';
import '../styles/design-tokens.css';

const NavigationBar: FC = () => (
  <nav style={{ padding: '1.5rem', borderBottom: '2px solid var(--palette-highlight)' }}>
    <h2 style={{ color: 'var(--palette-accent)', margin: 0 }}>Application Title</h2>
    <button style={{ 
      marginTop: '1rem',
      background: 'var(--palette-accent)', 
      color: '#fff',
      border: 'none',
      padding: '0.5rem 1rem',
      cursor: 'pointer'
    }}>
      Activate
    </button>
  </nav>
);

export default NavigationBar;

2. Material UI Theme Engine

When building interfaces with Material UI, leveraging the ThemeProvider ensures that palette values propagate automatically to all underlying components.

Theme Definition (src/theme/appTheme.ts):

import { createTheme } from '@mui/material/styles';

const appTheme = createTheme({
  palette: {
    mainBrand: { main: '#0f172a', contrastText: '#ffffff' },
    accentHighlight: { main: '#d946ef', contrastText: '#000000' },
    surface: { default: '#f8fafc' },
  },
  typography: {
    fontFamily: '"Inter", "Roboto", sans-serif',
  },
});

export default appTheme;

Root Integration (src/main.tsx):

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import appTheme from './theme/appTheme';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider theme={appTheme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </StrictMode>
);

Component Usage (src/pages/Home.tsx):

import { FC } from 'react';
import { Box, Typography, Button } from '@mui/material';

const HomePage: FC = () => (
  <Box sx={{ p: 4, bgcolor: 'surface.default' }}>
    <Typography variant="h4" sx={{ color: 'mainBrand.main', mb: 2 }}>
      Central Dashboard
    </Typography>
    <Typography variant="body1" sx={{ color: 'accentHighlight.main', mb: 3 }}>
      Real-time metrics are displayed below.
    </Typography>
    <Button variant="contained" color="mainBrand" size="large">
      Proceed
    </Button>
  </Box>
);

export default HomePage;

3. Tailwind CSS Configuration

Tailwind's configuration file allows developers to map semantic color names directly to utility classes, enabling rapid iteration while maintaining a single source of truth.

Configuration Setup (tailwind.config.js):

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        baseDark: '#0f172a',
        neonPink: '#d946ef',
        canvasLight: '#f8fafc',
      },
    },
  },
  plugins: [],
};

Component Implementation (src/components/Card.tsx):

import { FC } from 'react';

const FeatureCard: FC = () => (
  <div className="flex flex-col p-6 rounded-xl shadow-sm bg-canvasLight">
    <h3 className="text-2xl font-semibold text-baseDark mb-2">
      Module Configuration
    </h3>
    <p className="text-neonPink leading-relaxed">
      Custom utilities streamline layout adjustments.
    </p>
  </div>
);

export default FeatureCard;

4. Vite Environment Injection

Storing color values in environment files enables distinct visual themes across deployment stages without modifying source files. Vite automatically exposes VITE_ prefixed variables to the client bundle via import.meta.env.

Environment Files (.env.production / .env.development):

VITE_UI_PRIMARY=#0f172a
VITE_UI_SECONDARY=#d946ef

Runtime Component (src/components/DynamicTheme.tsx):

import { FC, CSSProperties } from 'react';

const EnvironmentThemeView: FC = () => {
  const styleSet: CSSProperties = {
    padding: '2rem',
    background: '#f1f5f9',
    borderRadius: '8px',
  };

  const headingStyle: CSSProperties = {
    color: import.meta.env.VITE_UI_PRIMARY || '#3b82f6',
    marginBottom: '1rem',
  };

  const textAccent: CSSProperties = {
    color: import.meta.env.VITE_UI_SECONDARY || '#8b5cf6',
  };

  return (
    <div style={styleSet}>
      <h2 style={headingStyle}>Stage-Specific Palette</h2>
      <p style={textAccent}>
        Colors adapt based on the active environment configuration.
      </p>
    </div>
  );
};

export default EnvironmentThemeView;

Selecting the appropriate strategy depends on dependency tolerance and scale. Native CSS properties minimize bundle size for straightforward layouts. Material UI's theming engine provides comprehensive component integration for complex interfaces. Tailwind's configuration system accelerates development when utility classes drive the design system. Environment variable injection is strictly reserved for CI/CD pipelines requiring deployment-target overrides without code recompilation.