Theming

import { darkTheme, lightTheme } from '@inkui-cli/core';
import { Spinner } from './components/ui/spinner';
 
// Default (dark)
<Spinner label="Loading..." />
 
// Light theme
<Spinner label="Loading..." theme={lightTheme} />

interface InkUITheme {
  colors: {
    primary: string;
    secondary: string;
    success: string;
    warning: string;
    error: string;
    text: string;
    textMuted: string;
    border: string;
    background: string;
  };
  borderStyle: BorderStyle;
  spacing: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
  };
}

import { darkTheme } from '@inkui-cli/core';
import type { InkUITheme } from '@inkui-cli/core';
 
export const myTheme: InkUITheme = {
  ...darkTheme,
  colors: {
    ...darkTheme.colors,
    primary: '#F472B6',   // pink instead of cyan
    border: '#3F3F46',
  },
  borderStyle: 'rounded',
};

import React, { createContext, useContext } from 'react';
import { darkTheme } from '@inkui-cli/core';
import type { InkUITheme } from '@inkui-cli/core';
 
const ThemeContext = createContext<InkUITheme>(darkTheme);
 
export function ThemeProvider({
  theme,
  children,
}: {
  theme: InkUITheme;
  children: React.ReactNode;
}) {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}
 
export const useTheme = () => useContext(ThemeContext);