A standalone, dependency-injected theme engine for the Community Solid Server (CSS) v7.x+.
Replace the default CSS EJS templates with a modern, responsive Tailwind CSS-based UI that supports full runtime theming through a simple theme.json file.
Templates contain no hardcoded colours or fonts. Instead, a runtime TypeScript loader (ThemeConfigLoader) reads a developer-provided theme.json file and generates a <style> block that maps theme values to CSS custom properties (e.g. var(--theme-bg)). Pre-compiled Tailwind utility classes then consume those variables.
solid-nodezero-auth-ui/
├── package.json
├── tsconfig.json
├── tailwind.config.js
├── components.jsonld ← Linked Components.js descriptor for CSS DI
├── src/
│ ├── index.ts ← Public API re-exports
│ ├── ThemeConfigLoader.ts ← Runtime theme loader + CSS-variable builder
│ └── input.css ← Tailwind CSS entry (compiled → assets/)
├── templates/
│ ├── main.html.ejs ← Master layout (injects CSS vars + stylesheet)
│ └── identity/
│ ├── login.html.ejs
│ ├── register.html.ejs
│ └── forgot-password.html.ejs
├── examples/
│ └── nodezero-dark/
│ └── theme.json ← Built-in dark theme example
└── assets/
└── base-tailwind.css ← Generated (do not edit manually)
npm install @nodezero/solid-nodezero-auth-uiPeer dependency:
@solid/community-server ^7.0.0must be present in your project.
npm run buildThis runs two steps:
build:css— compilessrc/input.cssthrough Tailwind CLI →assets/base-tailwind.cssbuild:ts— compiles TypeScript sources →dist/
Copy the built-in example or write your own:
{
"bg": "#0f172a",
"text": "#f1f5f9",
"accent": "#6366f1",
"accentHover": "#4f46e5",
"border": "#334155",
"card": "#1e293b",
"error": "#ef4444",
"success": "#22c55e",
"font": "Inter",
"radius": "0.5rem"
}All keys are optional; missing keys fall back to the built-in nodezero-dark defaults.
import { loadThemeConfig, buildThemeCssVars } from '@nodezero/solid-nodezero-auth-ui';
const theme = loadThemeConfig('./path/to/theme.json');
const cssVarsBlock = buildThemeCssVars(theme);
// Pass `cssVarsBlock` as the `themeCssVars` local when rendering main.html.ejs| CSS Variable | theme.json key |
Purpose |
|---|---|---|
--theme-bg |
bg |
Page / body background |
--theme-text |
text |
Primary text colour |
--theme-accent |
accent |
Brand / CTA colour |
--theme-accent-hover |
accentHover |
Hover state of accent |
--theme-border |
border |
Input & card border colour |
--theme-card |
card |
Card / surface background |
--theme-error |
error |
Error state colour |
--theme-success |
success |
Success state colour |
--theme-font |
font |
Font family name |
--theme-radius |
radius |
Global border-radius value |
The tailwind.config.js maps each CSS variable to a named colour usable as a Tailwind class:
| Tailwind class prefix | CSS variable |
|---|---|
bg-themeBg |
var(--theme-bg) |
text-themeText |
var(--theme-text) |
bg-themeAccent |
var(--theme-accent) |
bg-themeCard |
var(--theme-card) |
border-themeBorder |
var(--theme-border) |
text-themeError |
var(--theme-error) |
text-themeSuccess |
var(--theme-success) |
font-theme |
var(--theme-font) |
rounded-theme |
var(--theme-radius) |
| Local | Type | Description |
|---|---|---|
themeCssVars |
string |
Output of buildThemeCssVars() – injected into <head> |
title |
string |
Page <title> text |
assetsBase |
string |
Base URL prefix for base-tailwind.css |
body |
string |
Rendered child template content |
header |
string |
Optional HTML for the page header |
footer |
string |
Optional HTML for the page footer |
extraHead |
string |
Optional extra <head> markup (e.g. custom fonts) |
extraScripts |
string |
Optional <script> tags injected before </body> |
| Local | Type | Description |
|---|---|---|
errorMessage |
string |
Authentication / validation error |
webId |
string |
Pre-filled WebID or email |
returnTo |
string |
Post-login redirect URL |
csrfToken |
string |
CSRF protection hidden field value |
| Local | Type | Description |
|---|---|---|
errorMessage |
string |
Validation error |
email |
string |
Pre-filled email |
csrfToken |
string |
CSRF protection hidden field value |
| Local | Type | Description |
|---|---|---|
errorMessage |
string |
Error text |
successMessage |
string |
Confirmation shown after form submit |
email |
string |
Pre-filled email |
csrfToken |
string |
CSRF protection hidden field value |
MIT © Lockb0x LLC and contributors