Drupal 11 base theme (SDC, Web Components, Lit).
Wudo, derived from the Wunder and the Japanese Dō (Path).
- Single Directory Components (SDC) keep markup, styles, metadata, and logic together, making components clear, reusable, and Drupal-native.
- Vite is chosen for speed, simplicity, and modern ESM workflows.
- Lit provides a lightweight, reactive layer for Web Components. It ensures that complex UI logic remains fast and encapsulated, allowing for high interactivity with minimal overhead
- Storybook is isolated by design to enforce clean, native, CMS-agnostic components.
| Component | Status | SDC | Web Cmp | Lit |
|---|---|---|---|---|
| Button | stable | ✅ | ||
| Link | experimental | ✅ | ||
| Paragraph | stable | ✅ | ||
| Icon | stable | ✅ | ||
| Theme Toggler | stable | ✅ | ✅ | |
| Quantity Input | stable | ✅ | ✅ | |
| Back To Top | experimental | ✅ | ✅ |
| Component | Version | Status | SDC | Web Cmp | Lit |
|---|---|---|---|---|---|
| Accordion | stable | ✅ | |||
| Article card | experimental | ✅ | |||
| Tabs | experimental | ✅ | |||
| Pagination | stable | ✅ | |||
| Countdown | experimental | ✅ | ✅ | ||
| Stat Card | experimental | ✅ | ✅ | ||
| Toast Messages | experimental | ✅ | ✅ | ||
| Attribute List | stable | ✅ | |||
| Language switcher | v1.0.0 | experimental | ✅ | ✅ |
| Component | Version | Status | SDC | Web Cmp | Lit |
|---|---|---|---|---|---|
| Header | stable | ✅ | |||
| Drawer | v1.0.1 | experimental | ✅ | ✅ | |
| Carousel | experimental | ✅ | ✅ | ||
| Favorite | experimental | ✅ | ✅ | ✅ |
| Component | Version | Status | SDC | Web Cmp | Description |
|---|---|---|---|---|---|
| Link Manager | experimental | ✅ | ✅ | automatically manages external links | |
| Sticky Header | experimental | ✅ | ✅ | Sticky header | |
| Reveal | experimental | ✅ | ✅ | provides a "reveal on scroll" animation for its content | |
| Focus Trap | v1.0.0 | stable | JS only component used by Drawer, Menu toggle |
Install all dependencies
npm installDevelop common Drupal styles
npm run devDevelop SDC components
npm run dev:sdcBuild SDC components and main style.css
npm run buildRun Storybook
npm run storybookThis theme includes a migration script to safely change the theme's machine name. This is particularly useful when using this repository as a starter kit.
- Folder Migration: Moves all files to a new directory named after your new theme.
- File Renaming: Automatically renames core Drupal files (
.info.yml,.libraries.yml,.theme, etc.). - SDC Namespace Update: Updates all Single Directory Component (SDC) references (e.g., changing
old_theme:componenttonew_theme:component). - Path Correction: Replaces hardcoded theme paths in
.scss,.js, and.ymlfiles. - Safe Processing: Uses
:as a delimiter to safely handle file paths and ignoresnode_modules,dist, and.gitfolders.
Open your terminal and navigate to the scripts directory:
cd themes/custom/your_current_theme/scriptsMake sure the script is executable:
chmod +x rename.shRun the script:
./rename.shEnter your new theme machine name (e.g., my_awesome_theme) when prompted.
This project implements a flexible theme system with native Dark Mode support.
The theme is Auto-first by design. Even without the toggler component, the site automatically inherits the user's OS preference via prefers-color-scheme. Dark mode CSS variables are active by default to ensure a seamless experience from the first visit.
The Theme Toggler Web Component allows users to manually override system settings.
- Tri-state Logic: Cycles through Auto (System), Dark, and Light modes.
- Zero Flicker: Applies
data-themeto the<html>element instantly to prevent Layout Shift. - Fully Localized: All labels and ARIA attributes are passed from Drupal/Twig, making the component 100% translatable.
- UI Library / Storybook: Setup and Usage Guide
- Drupal / SDC: Using Single-Directory Components
- Lit: Setup and Usage Guide