Theming

You can customize colors, typography, and spacing using CSS variables.

Importing Styles

Default Styles

Import the default stylesheet:

import '@editu/core/styles.css';

This includes CSS variable definitions (light and dark themes), component styles, and typography styles.

Components Only (shadcn/ui)

For projects using shadcn/ui or custom CSS variables:

import '@editu/core/components.css';

This includes only component styles without CSS variable definitions.

---

Theme Provider

Use the EdituThemeProvider to enable dark mode support:

React

import { EdituThemeProvider } from '@editu/react';

function App() {
  return (
    <EdituThemeProvider 
      defaultTheme="system" 
      storageKey="my-app-theme"
    >
      <Editor />
    </EdituThemeProvider>
  );
}

EdituThemeProvider Options

Property	Type	Default	Description
defaultTheme	"light" | "dark" | "system"	"system"	Default theme
storageKey	string	"editu-theme"	localStorage key for persistence
targetSelector	string	document.documentElement	Element to apply theme attribute
disableTransitionOnChange	boolean	false	Disable transitions during theme change

Using Theme State

React

import { useEdituTheme } from '@editu/react';

function ThemeToggle() {
  const { theme, resolvedTheme, setTheme } = useEdituTheme();
  
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="system">System</option>
    </select>
  );
}

Theme State Properties

Property	Type	Description
theme	"light" | "dark" | "system"	Current theme setting
resolvedTheme	"light" | "dark"	Actual resolved theme
systemTheme	"light" | "dark"	System preference
setTheme	(theme) => void	Function to change theme

---

CSS Variables

Editu uses CSS custom properties (variables) for all visual styling. You can override these to customize the appearance.

Theme Selectors

/* Light theme (default) */
:root,
.light,
[data-theme="light"],
[data-editu-theme="light"] {
  /* Light theme variables */
}

/* Dark theme */
.dark,
[data-theme="dark"],
[data-editu-theme="dark"] {
  /* Dark theme variables */
}

Color Variables

Primary Colors

Variable	Description
--editu-primary	Primary brand color
--editu-primary-hover	Primary hover state
--editu-primary-active	Primary active state
--editu-primary-foreground	Text on primary background
--editu-primary-bg	Primary background (10% opacity)
--editu-primary-bg-hover	Primary background hover

Secondary Colors

Variable	Description
--editu-secondary	Secondary color
--editu-secondary-hover	Secondary hover state
--editu-secondary-foreground	Text on secondary background

Background & Foreground

Variable	Description
--editu-background	Main background
--editu-background-secondary	Secondary background
--editu-background-tertiary	Tertiary background
--editu-foreground	Main text color
--editu-foreground-secondary	Secondary text color
--editu-foreground-muted	Muted text color

UI Colors

Variable	Description
--editu-muted	Muted background
--editu-muted-foreground	Muted foreground
--editu-accent	Accent background
--editu-accent-foreground	Accent foreground
--editu-border	Border color
--editu-border-hover	Border hover color

State Colors

Variable	Description
--editu-hover-bg	Hover background
--editu-active-bg	Active background
--editu-success	Success color
--editu-warning	Warning color
--editu-error	Error color
--editu-destructive	Destructive action color

Example: Custom Colors

Editu uses the OKLCH color space for all color values. Here's an example of custom color overrides:

:root {
  /* Brand colors (using OKLCH) */
  --editu-primary: oklch(0.623 0.214 259.815);
  --editu-primary-hover: oklch(0.546 0.245 262.881);
  --editu-primary-active: oklch(0.488 0.243 264.376);
  --editu-primary-foreground: oklch(1 0 0);
  
  /* Background */
  --editu-background: oklch(1 0 0);
  --editu-background-secondary: oklch(0.985 0 0);
  --editu-foreground: oklch(0.21 0.006 285.885);
  
  /* Borders */
  --editu-border: oklch(0.922 0 0);
}

[data-editu-theme="dark"] {
  --editu-primary: oklch(0.707 0.165 254.624);
  --editu-primary-hover: oklch(0.623 0.214 259.815);
  
  --editu-background: oklch(0.21 0.006 285.885);
  --editu-background-secondary: oklch(0.145 0 0);
  --editu-foreground: oklch(0.985 0 0);
  
  --editu-border: oklch(0.279 0.041 260.031);
}

---

Typography Variables

Font Families

Variable	Default
--editu-font-sans	system-ui, -apple-system, sans-serif
--editu-font-serif	Georgia, serif
--editu-font-mono	ui-monospace, monospace

Font Sizes

Variable	Value
--editu-font-size-xs	0.75rem
--editu-font-size-sm	0.875rem
--editu-font-size-base	1rem
--editu-font-size-lg	1.125rem
--editu-font-size-xl	1.25rem
--editu-font-size-2xl	1.5rem
--editu-font-size-3xl	1.875rem
--editu-font-size-4xl	2.25rem

Line Heights

Variable	Value
--editu-line-height-tight	1.25
--editu-line-height-snug	1.375
--editu-line-height-normal	1.5
--editu-line-height-relaxed	1.625
--editu-line-height-loose	2

Font Weights

Variable	Value
--editu-font-weight-normal	400
--editu-font-weight-medium	500
--editu-font-weight-semibold	600
--editu-font-weight-bold	700

---

Spacing Variables

Variable	Value
--editu-spacing-0	0
--editu-spacing-1	0.25rem
--editu-spacing-2	0.5rem
--editu-spacing-3	0.75rem
--editu-spacing-4	1rem
--editu-spacing-5	1.25rem
--editu-spacing-6	1.5rem
--editu-spacing-8	2rem
--editu-spacing-10	2.5rem
--editu-spacing-12	3rem

---

Border Radius Variables

Variable	Value
--editu-radius-none	0
--editu-radius-sm	0.25rem
--editu-radius-md	0.375rem
--editu-radius-lg	0.5rem
--editu-radius-xl	0.75rem
--editu-radius-2xl	1rem
--editu-radius-full	9999px

---

Shadow Variables

Variable	Description
--editu-shadow-sm	Small shadow
--editu-shadow-md	Medium shadow
--editu-shadow-lg	Large shadow
--editu-shadow-xl	Extra large shadow
--editu-shadow-2xl	2XL shadow

---

Transition Variables

Variable	Value
--editu-transition-fast	100ms
--editu-transition-normal	150ms
--editu-transition-slow	300ms

---

Z-Index Variables

Variable	Value	Description
--editu-z-dropdown	50	Dropdowns
--editu-z-sticky	60	Sticky elements
--editu-z-fixed	70	Fixed elements
--editu-z-modal-backdrop	80	Modal backdrop
--editu-z-modal	90	Modals
--editu-z-popover	100	Popovers
--editu-z-tooltip	110	Tooltips

---

Component-Specific Variables

Editor

Variable	Default	Description
--editu-editor-min-height	350px	Minimum editor height
--editu-editor-padding	var(--editu-spacing-6)	Editor padding
--editu-editor-font-family	var(--editu-font-sans)	Editor font
--editu-editor-font-size	var(--editu-font-size-base)	Editor font size
--editu-editor-line-height	var(--editu-line-height-relaxed)	Editor line height

Images

Variable	Default	Description
--editu-image-border-radius	var(--editu-radius-lg)	Image border radius
--editu-image-outline-color	var(--editu-primary)	Selected image outline
--editu-image-outline-width	2px	Outline width
--editu-resize-handle-color	var(--editu-primary)	Resize handle color
--editu-resize-handle-width	8px	Resize handle width
--editu-resize-handle-height	48px	Resize handle height

Code Blocks

Variable	Description
--editu-code-block-bg	Background color
--editu-code-block-text	Text color
--editu-code-block-toolbar-bg	Toolbar background
--editu-code-block-gutter-bg	Line number gutter background
--editu-code-block-line-number-color	Line number color
--editu-code-block-language-color	Language indicator color
--editu-code-block-placeholder	Placeholder text color
--editu-code-block-button-color	Button text color
--editu-code-block-button-border	Button border color
--editu-code-block-button-hover-bg	Button hover background
--editu-code-block-input-bg	Input background
--editu-code-block-input-border	Input border

Mathematics

Variable	Default	Description
--editu-math-block-bg	var(--editu-background-secondary)	Block math background
--editu-math-inline-bg	transparent	Inline math background

Portal

Variable	Default	Description
--editu-portal-base-z-index	9999	Base z-index for portals

---

shadcn/ui Integration

You can map shadcn/ui CSS variables to Editu. Note that shadcn/ui uses HSL format while Editu uses OKLCH, but CSS custom properties can reference each other:

:root {
  /* Map shadcn colors to Editu */
  --editu-primary: hsl(var(--primary));
  --editu-primary-foreground: hsl(var(--primary-foreground));
  --editu-background: hsl(var(--background));
  --editu-foreground: hsl(var(--foreground));
  --editu-border: hsl(var(--border));
  --editu-muted: hsl(var(--muted));
  --editu-muted-foreground: hsl(var(--muted-foreground));
  --editu-accent: hsl(var(--accent));
  --editu-accent-foreground: hsl(var(--accent-foreground));
  --editu-destructive: hsl(var(--destructive));
  
  /* Map radius */
  --editu-radius-sm: calc(var(--radius) - 4px);
  --editu-radius-md: calc(var(--radius) - 2px);
  --editu-radius-lg: var(--radius);
}

For detailed integration instructions, see the CSS Variables Reference.

---

Preventing Flash of Unstyled Content

Add the theme init script to your HTML <head> to prevent a flash of unstyled content:

import { getEdituThemeInitScript } from '@editu/core';

// In your HTML head
const script = getEdituThemeInitScript('my-theme-key');
// <script>{script}</script>

Or manually:

<script>
  (function() {
    const stored = localStorage.getItem('my-theme-key');
    const theme = stored || 'system';
    const resolved = theme === 'system'
      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
      : theme;
    document.documentElement.setAttribute('data-editu-theme', resolved);
  })();
</script>

---

Next Steps

• CSS Variables Reference
• Auto-Save - Persist content automatically
• API Reference