drizzle-cube 0.1.32 → 0.1.34

package/README.md

@@ -141,20 +141,78 @@ function App() {
 
 ## Key Features
 
-🔒 **SQL Injection Proof** - All queries use Drizzle's parameterized SQL  
-🛡️ **Type Safe** - Full TypeScript inference from your database schema  
-⚡ **Performance** - Prepared statements and query optimization  
-🧩 **Cube.js Compatible** - Works with existing Cube.js React components  
+🔒 **SQL Injection Proof** - All queries use Drizzle's parameterized SQL
+🛡️ **Type Safe** - Full TypeScript inference from your database schema
+⚡ **Performance** - Prepared statements and query optimization
+🧩 **Cube.js Compatible** - Works with existing Cube.js React components
 🎯 **Zero Config** - Infer cube definitions from your Drizzle schema
+🎨 **Themeable** - Built-in light/dark themes with CSS variables
 
 
 ## Supported Features
 
-✅ **Multiple Database Types** - PostgreSQL, MySQL  
-✅ **Framework Adapters** - Hono, Express, Fastify, Next.js  
-✅ **Full Type Safety** - Complete TypeScript inference  
-✅ **All SQL Features** - Joins, CTEs, subqueries, window functions  
+✅ **Multiple Database Types** - PostgreSQL, MySQL
+✅ **Framework Adapters** - Hono, Express, Fastify, Next.js
+✅ **Full Type Safety** - Complete TypeScript inference
+✅ **All SQL Features** - Joins, CTEs, subqueries, window functions
 ✅ **Cube.js Compatibility** - Drop-in replacement for existing apps
+✅ **Scalable Theming** - Built-in themes (light/dark/neon) with semantic CSS variables
+
+## Theming
+
+Drizzle Cube features a **scalable semantic theming system** with three built-in themes. All components automatically adapt using CSS variables - no component changes needed when adding new themes!
+
+### Built-in Themes
+
+🌞 **Light** - Clean white backgrounds with blue accents
+🌙 **Dark** - Slate grays with lighter blue highlights
+⚡ **Neon** - Bold fluorescent colors with deep purple backgrounds
+
+### Quick Start
+
+```typescript
+import { getTheme, setTheme, watchThemeChanges } from 'drizzle-cube/client'
+
+// Set a theme programmatically
+setTheme('neon')  // 'light' | 'dark' | 'neon'
+
+// Get current theme
+const currentTheme = getTheme()
+
+// Watch for theme changes
+watchThemeChanges((theme) => {
+  console.log('Theme changed:', theme)
+})
+```
+
+### Adding Custom Themes
+
+Create your own theme by defining CSS variables - **zero component changes required**:
+
+```css
+[data-theme="ocean"] {
+  /* Surface colors */
+  --dc-surface: #001f3f;
+  --dc-surface-secondary: #002b5c;
+  --dc-card-bg: #003366;
+
+  /* Text colors */
+  --dc-text: #e6f7ff;
+  --dc-text-secondary: #b3d9ff;
+
+  /* Primary/accent colors */
+  --dc-primary: #39cccc;
+  --dc-border: #004d66;
+  /* ... other semantic variables */
+}
+```
+
+Then update your theme toggle to include the new theme:
+```typescript
+setTheme('ocean')  // It just works! ✨
+```
+
+**[Complete Theming Guide →](./docs/THEMING.md)**
 
 ## Documentation