@c2e/ui

C2E UI kit — a theme system, base styles and @ng-select theming for Angular apps built on DaisyUI v5 + Tailwind v4.

Contents

• ThemeService — signal-based theme manager. Applies data-theme + theme classes to <html>, persists the choice to localStorage, and falls back to the OS prefers-color-scheme. Ships with 28 DaisyUI themes and per-theme brand colors.
• Theme / ThemeConfig / ThemeCategory — type-safe theme identifiers and metadata (name, description, icon, swatch color).
• styles/ui.css — one-entry global stylesheet:
  • DaisyUI plugin registration (28 themes, light default)
  • brand @theme color overrides
  • base element styles (typography, native form controls)
  • dark-mode-aware @ng-select overrides
  • .card, table, scrollbar, focus-visible and reduced-motion rules
• Markdown docs shipped inside the package (/docs).

Requirements

| Dependency | Version | | ---------- | ------------ | | Angular | >= 16 | | Tailwind | v4 | | DaisyUI | v5 | | @ng-select | * (optional) |

Install

npm install @c2e/ui daisyui tailwindcss
# optional, only if you use ng-select
npm install @ng-select/ng-select

Quick start

1. Global styles

Your e.g. src/styles.css:

@import "tailwindcss";
@import "@ng-select/ng-select/themes/default.theme.css"; /* optional */
@import "@c2e/ui/styles/ui.css";

2. ThemeService

import {ThemeService} from '@c2e/ui';
import {inject} from '@angular/core';

// Change theme
const themeService = inject(ThemeService);
themeService.setTheme('dark');       // or 'dracula', 'cupcake', …
themeService.toggleTheme();          // dark <-> light
themeService.cycleTheme('fun');      // rotate within a category

// Reactive state
const theme = themeService.currentTheme();        // signal<Theme>
const dark  = themeService.isDarkMode();          // computed<boolean>
const name  = themeService.currentThemeName();    // computed<string>

// Discover themes
const themes = themeService.getAvailableThemes(); // ThemeConfig[]

Docs

• Getting started
• Themes
• ng-select
• Base styles

Publishing

ng build c2e-ui
npm publish dist/c2e-ui