Skip to main content

Theming

The Seekora UI SDK provides a flexible theming system to customize the appearance of all components.

Built-in Themes​

The SDK includes three built-in themes:

import { defaultTheme, darkTheme, minimalTheme } from '@seekora-ai/ui-sdk-react';

Default Theme (Light)​

<SearchProvider client={client} theme={defaultTheme}>
  {/* Components use light theme */}
</SearchProvider>

Dark Theme​

<SearchProvider client={client} theme={darkTheme}>
  {/* Components use dark theme */}
</SearchProvider>

Minimal Theme​

<SearchProvider client={client} theme={minimalTheme}>
  {/* Components use minimal theme */}
</SearchProvider>

Theme Structure​

interface Theme {
  colors: {
    primary: string;
    secondary: string;
    background: string;
    surface: string;
    text: string;
    textSecondary: string;
    border: string;
    hover: string;
    focus: string;
    error: string;
    success: string;
    warning: string;
  };
  typography: {
    fontFamily: string;
    fontSize: {
      small: string;
      medium: string;
      large: string;
    };
    fontWeight: {
      normal: number;
      medium: number;
      semibold: number;
      bold: number;
    };
    lineHeight: {
      tight: number;
      normal: number;
      relaxed: number;
    };
  };
  spacing: {
    small: string;
    medium: string;
    large: string;
  };
  borderRadius: {
    none: string;
    small: string;
    medium: string;
    large: string;
    full: string;
  };
  shadows: {
    small: string;
    medium: string;
    large: string;
  };
  transitions: {
    fast: string;
    normal: string;
    slow: string;
  };
  breakpoints: {
    sm: string;
    md: string;
    lg: string;
    xl: string;
  };
  zIndex: {
    dropdown: number;
    modal: number;
    tooltip: number;
  };
}

Creating Custom Themes​

Using createTheme​

import { createTheme } from '@seekora-ai/ui-sdk-react';

const customTheme = createTheme({
  colors: {
    primary: '#ff6b6b',
    secondary: '#4ecdc4',
    background: '#ffffff',
    surface: '#f8f9fa',
    text: '#2d3436',
    textSecondary: '#636e72',
    border: '#dfe6e9',
    hover: '#f1f2f6',
    focus: '#74b9ff',
    error: '#e74c3c',
    success: '#00b894',
    warning: '#fdcb6e',
  },
  typography: {
    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
    fontSize: {
      small: '12px',
      medium: '14px',
      large: '16px',
    },
    fontWeight: {
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
    },
    lineHeight: {
      tight: 1.25,
      normal: 1.5,
      relaxed: 1.75,
    },
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  },
  borderRadius: {
    none: '0',
    small: '4px',
    medium: '8px',
    large: '12px',
    full: '9999px',
  },
  shadows: {
    small: '0 1px 2px rgba(0, 0, 0, 0.05)',
    medium: '0 4px 6px rgba(0, 0, 0, 0.1)',
    large: '0 10px 15px rgba(0, 0, 0, 0.15)',
  },
  transitions: {
    fast: '150ms ease',
    normal: '250ms ease',
    slow: '350ms ease',
  },
  breakpoints: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
  },
  zIndex: {
    dropdown: 1000,
    modal: 1100,
    tooltip: 1200,
  },
});

Using mergeThemes​

Extend an existing theme with custom values:

import { mergeThemes, defaultTheme } from '@seekora-ai/ui-sdk-react';

const customTheme = mergeThemes(defaultTheme, {
  colors: {
    primary: '#ff6b6b',
    secondary: '#4ecdc4',
  },
  typography: {
    fontFamily: '"Poppins", sans-serif',
  },
  borderRadius: {
    medium: '12px',
  },
});

Applying Themes​

Global Theme​

Apply theme to all components:

<SearchProvider client={client} theme={customTheme}>
  <SearchBar />
  <SearchResults />
  <Pagination />
</SearchProvider>

Component-Level Theme​

Override theme for specific components:

<SearchProvider client={client} theme={defaultTheme}>
  <SearchBar theme={customSearchBarTheme} />
  <SearchResults theme={customResultsTheme} />
</SearchProvider>

Component Theme Props​

Each component accepts a theme prop with component-specific styles:

<SearchBar
  theme={{
    container: {
      backgroundColor: '#f5f5f5',
      borderRadius: '24px',
    },
    input: {
      fontSize: '16px',
      padding: '12px 16px',
    },
    suggestion: {
      padding: '8px 16px',
      hoverBackground: '#e0e0e0',
    },
  }}
/>

Dark Mode​

Automatic Dark Mode​

Use CSS media queries:

import { defaultTheme, darkTheme } from '@seekora-ai/ui-sdk-react';

function App() {
  const [isDark, setIsDark] = useState(
    window.matchMedia('(prefers-color-scheme: dark)').matches
  );

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handler = (e) => setIsDark(e.matches);
    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  return (
    <SearchProvider client={client} theme={isDark ? darkTheme : defaultTheme}>
      {/* Components */}
    </SearchProvider>
  );
}

Theme Toggle​

function ThemeToggle() {
  const [theme, setTheme] = useState('light');

  const themes = {
    light: defaultTheme,
    dark: darkTheme,
    minimal: minimalTheme,
  };

  return (
    <SearchProvider client={client} theme={themes[theme]}>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="minimal">Minimal</option>
      </select>
      <SearchBar />
      <SearchResults />
    </SearchProvider>
  );
}

CSS Custom Properties​

The SDK also supports CSS custom properties:

:root {
  --seekora-color-primary: #ff6b6b;
  --seekora-color-secondary: #4ecdc4;
  --seekora-color-background: #ffffff;
  --seekora-color-text: #2d3436;
  --seekora-font-family: 'Inter', sans-serif;
  --seekora-border-radius: 8px;
  --seekora-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --seekora-color-background: #1a1a2e;
    --seekora-color-text: #ffffff;
    --seekora-color-surface: #16213e;
  }
}
<SearchProvider client={client} useCSSVariables>
  <SearchBar />
</SearchProvider>

Theme Examples​

E-commerce Theme​

const ecommerceTheme = createTheme({
  colors: {
    primary: '#f59e0b',
    secondary: '#10b981',
    background: '#ffffff',
    surface: '#fafafa',
    text: '#1f2937',
    textSecondary: '#6b7280',
    border: '#e5e7eb',
    hover: '#f3f4f6',
    focus: '#fbbf24',
    error: '#ef4444',
    success: '#22c55e',
    warning: '#f59e0b',
  },
  typography: {
    fontFamily: '"Roboto", sans-serif',
  },
  borderRadius: {
    small: '4px',
    medium: '8px',
    large: '16px',
    full: '9999px',
  },
  shadows: {
    small: '0 1px 2px rgba(0, 0, 0, 0.05)',
    medium: '0 4px 6px rgba(0, 0, 0, 0.07)',
    large: '0 10px 25px rgba(0, 0, 0, 0.1)',
  },
});

Editorial Theme​

const editorialTheme = createTheme({
  colors: {
    primary: '#000000',
    secondary: '#666666',
    background: '#fafafa',
    surface: '#ffffff',
    text: '#1a1a1a',
    textSecondary: '#666666',
    border: '#e0e0e0',
    hover: '#f5f5f5',
    focus: '#000000',
    error: '#cc0000',
    success: '#008800',
    warning: '#cc8800',
  },
  typography: {
    fontFamily: '"Georgia", "Times New Roman", serif',
    fontSize: {
      small: '13px',
      medium: '15px',
      large: '18px',
    },
  },
  borderRadius: {
    none: '0',
    small: '0',
    medium: '0',
    large: '0',
    full: '0',
  },
  shadows: {
    small: 'none',
    medium: 'none',
    large: 'none',
  },
});

Tech Theme​

const techTheme = createTheme({
  colors: {
    primary: '#6366f1',
    secondary: '#8b5cf6',
    background: '#0f172a',
    surface: '#1e293b',
    text: '#f1f5f9',
    textSecondary: '#94a3b8',
    border: '#334155',
    hover: '#334155',
    focus: '#818cf8',
    error: '#f87171',
    success: '#4ade80',
    warning: '#fbbf24',
  },
  typography: {
    fontFamily: '"JetBrains Mono", "Fira Code", monospace',
  },
  borderRadius: {
    small: '6px',
    medium: '10px',
    large: '14px',
    full: '9999px',
  },
  shadows: {
    small: '0 0 10px rgba(99, 102, 241, 0.1)',
    medium: '0 0 20px rgba(99, 102, 241, 0.15)',
    large: '0 0 40px rgba(99, 102, 241, 0.2)',
  },
});

Styled Components Integration​

import styled, { ThemeProvider } from 'styled-components';
import { defaultTheme } from '@seekora-ai/ui-sdk-react';

const StyledSearchBar = styled(SearchBar)`
  .seekora-search-input {
    border: 2px solid ${(props) => props.theme.colors.primary};
    
    &:focus {
      box-shadow: 0 0 0 3px ${(props) => props.theme.colors.focus}33;
    }
  }
`;

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <SearchProvider client={client}>
        <StyledSearchBar />
      </SearchProvider>
    </ThemeProvider>
  );
}

Tailwind CSS Integration​

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        seekora: {
          primary: '#6366f1',
          secondary: '#8b5cf6',
        },
      },
    },
  },
};

// Component
<SearchBar className="rounded-xl shadow-lg border-seekora-primary" />

Next Steps​