Drupal 11 base theme (SDC).
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.
- Storybook is isolated by design to enforce clean, native, CMS-agnostic components.
This combination ensures:
- fast development
- predictable behavior
- long-term maintainability
- clear component ownership and structure
Install all dependencies
npm installStarts the Vite development server
npm run devBuild SDC components and main style.css
npm run buildThis 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 <wudo-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.
Fundamental building blocks that cannot be broken down further.
| Component | Status | Description |
|---|---|---|
| Button | stable | SDC - button |
| Link | experimental | SDC - link |
| Paragraph | stable | SDC - paragraph |
| Icon | stable | SDC - SVG icon component |
| Theme Toggler | stable | SDC + Web Component - manages Light/Dark mode for the entire site |
| Quantity Input | stable | SDC + Web Component - numerical input |
| Component | Status | Description |
|---|---|---|
| Accordion | stable | SDC - collapsible content sections |
| Tabs | experimental | SDC - accessible tabs |
| Pagination | stable | SDC - pager component |
| Countdown | experimental | SDC + Web Component - countdown |
| Stat Card | experimental | SDC + Web Component - card with animated number |
- UI Library / Storybook: Setup and Usage Guide
- Drupal / SDC: Using Single-Directory Components