Theming

SCSS Variables

Override default variables before importing EthioWDS:

// Customize before import
  $primary: #2E86AB;
  $secondary: #FF6B6B;
  $ethio-green: #1B5E20;
  $ethio-yellow: #FFC107;
  $ethio-red: #C2185B;
  $ethio-blue: #1976D2;
  
  // Typography
  $font-family-sans: 'Inter', 'Noto Sans Ethiopic', sans-serif;
  $font-size-base: 1.1rem;
  
  // Import EthioWDS with your customizations
  @use '@abiyub/ethiowds' as *;

CSS Custom Properties

EthioWDS also exposes CSS custom properties for runtime theming:

/* Override in your CSS */
  :root {
    --primary: #2E86AB;
    --secondary: #FF6B6B;
    --ethio-green: #1B5E20;
    --ethio-yellow: #FFC107;
    --ethio-red: #C2185B;
    --ethio-blue: #1976D2;
    --font-family-sans: 'Inter', sans-serif;
  }

Theme Examples