PHPackages                             maispace/theme - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. maispace/theme

ActiveTypo3-cms-extension

maispace/theme
==============

Theme extension for TYPO3 CMS

v13.0.0(2mo ago)02[1 PRs](https://github.com/mai-space-de/typo3-extension-theme/pulls)GPL-2.0-or-laterSCSSCI failing

Since Feb 27Pushed 1mo agoCompare

[ Source](https://github.com/mai-space-de/typo3-extension-theme)[ Packagist](https://packagist.org/packages/maispace/theme)[ Docs](https://www.maispace.de)[ RSS](/packages/maispace-theme/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (8)Versions (11)Used By (0)

maispace/theme — TYPO3 Theme Loader
===================================

[](#maispacetheme--typo3-theme-loader)

[![CI](https://github.com/mai-space-de/typo3-extension-theme/actions/workflows/ci.yml/badge.svg)](https://github.com/mai-space-de/typo3-extension-theme/actions/workflows/ci.yml)[![PHP](https://camo.githubusercontent.com/187240af044d09d5b14a1d9d9ebdf3f7a993e4c7bc09bdb46b4ba661a891bf5b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532422d626c7565)](https://www.php.net/)[![TYPO3](https://camo.githubusercontent.com/21d80c870513a277becf6f1adeec9900e1914d8d6e4fa0859e62a1d24900802e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31332e302532422d6f72616e6765)](https://typo3.org/)[![License: GPL v2](https://camo.githubusercontent.com/77e900ae34f8da9ccccc42662fce61a94ab07ddbfe3f7d066178e824f3673dbd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d47504c25323076322d626c75652e737667)](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)

This extension provides five things:

1. **A site set** — `maispace/theme-base` exposes all theme options (colors, logos, typography, layout, backend theming) as TYPO3 site settings, editable in the backend with no code changes required.
2. **An ITCSS stylesheet bundle** — compiled server-side via [`maispace/assets`](https://github.com/mai-space-de/typo3-extension-assets) using ``, no Node.js required. Site settings inject CSS custom property overrides at runtime, so color changes take effect without recompiling SCSS.
3. **A loader mechanism** — auto-discovers `StyleSheets.php`, `JavaScripts.php`, `BackendTheme.php`, and `RecordModules.php` from all active TYPO3 packages and registers their assets/modules automatically.
4. **Fluid Components** — a set of reusable `sitegeist/fluid-components` components (Button, Link, Card, Navigation, SiteHeader, SiteFooter) ready to use or override in any site package.
5. **Record Modules** — register dedicated backend modules for specific TCA record types via `Configuration/RecordModules.php`, giving editors direct sidebar access to filtered record lists.

Features
--------

[](#features)

- **Site set (`maispace/theme-base`)** — add one line to your site's `config.yaml` to unlock a full settings editor for colors, logos, typography, layout, and backend theming; no TypoScript or PHP knowledge needed
- **CSS custom property injection** — site settings are rendered as an inline `` block at `page.headerData.100`, overriding design tokens at runtime so cache-flush is all that is required after a color change
- **Backend theming via site settings** — logos, favicon, login background, accent color and footnote are all configurable through the settings editor and applied via a PSR-15 middleware
- **ITCSS stylesheet bundle** — 22 SCSS partials across 8 layers (settings → utilities), derived from [minimal-stylesheet-maximum-impact](https://github.com/mai-space/minimal-stylesheet-maximum-impact)
- **Full CSS Layers support** — the bundle and all partials are wrapped in `@layer` blocks for predictable specificity
- **CSS custom properties throughout** — every design token is overridable without touching source files
- **Automatic dark mode** — built-in `prefers-color-scheme: dark` overrides for all base tokens; works out of the box
- **Atomic Design structure** — atoms, molecules, organisms, templates, and utilities
- **Fluid Components** — six pre-built components (Atom/Button, Atom/Link, Molecule/Card, Organism/Navigation, Organism/SiteHeader, Organism/SiteFooter) backed by `sitegeist/fluid-components`
- **Base Fluid page templates** — layout, templates, and partials ready to override in your site package
- **Server-side SCSS compilation** — delegated to `maispace/assets` (`` ViewHelper, powered by `scssphp`)
- **Automated asset inclusion** — auto-registers stylesheets and JavaScripts from any active extension
- **Backend theme management** — logos, favicon, and login-page customisation via configuration files
- **Record Modules** — register dedicated backend modules for specific record types via `Configuration/RecordModules.php`
- **Configuration merging** — merges configuration files from all active packages for modular theme development

Installation
------------

[](#installation)

```
composer require maispace/theme
```

Import TypoScript in your site package's setup file:

```
@import 'EXT:maispace_assets/Configuration/TypoScript/setup.typoscript'
@import 'EXT:theme/Configuration/TypoScript/setup.typoscript'

```

### Site set (recommended)

[](#site-set-recommended)

Add the site set to your site configuration to enable the settings editor:

```
# config/sites/my-site/config.yaml
sets:
  - maispace/theme-base
```

Then open **Site Management > Sites > <your site> > Settings** in the TYPO3 backend to configure logos, colors, typography, layout, and backend theme. All changes take effect after clearing the page cache.

### Critical CSS & Layers

[](#critical-css--layers)

The theme is pre-configured to work with `maispace/assets`'s critical CSS extraction. It defines a dedicated CSS layer `theme-critical` in its TypoScript setup:

```
plugin.tx_maispace_assets.criticalCss.layer = theme-critical

```

This ensures that any inlined critical CSS (extracted via `maispace:assets:critical:extract`) is wrapped in `@layer theme-critical { ... }`, providing predictable specificity when used alongside the theme's main SCSS bundle.

Site settings
-------------

[](#site-settings)

When the `maispace/theme-base` site set is active, the following settings are available in the TYPO3 backend settings editor:

CategorySettingTypeDescriptionSite Identity`maispace.theme.site.name`stringSite name (titles, footer copyright)Site Identity`maispace.theme.site.logoSrc`stringFrontend logo path (`EXT:` or `fileadmin`)Color Scheme`maispace.theme.colors.primary`colorPrimary brand color (`--color-primary`)Color Scheme`maispace.theme.colors.primaryHover`colorPrimary hover (`--color-primary-hover`)Color Scheme`maispace.theme.colors.secondary`colorSecondary color (`--color-secondary`)Color Scheme`maispace.theme.colors.secondaryHover`colorSecondary hover (`--color-secondary-hover`)Color Scheme`maispace.theme.colors.accent`colorAccent color (`--color-accent`)Color Scheme`maispace.theme.colors.text`colorBody text (`--color-text`)Color Scheme`maispace.theme.colors.background`colorPage background (`--color-background`)Color Scheme`maispace.theme.colors.surface`colorCard/panel background (`--color-surface`)Color Scheme`maispace.theme.colors.border`colorBorders and dividers (`--color-border`)Typography`maispace.theme.typography.fontFamilyBase`stringCSS font-family stackLayout`maispace.theme.layout.rootPageUid`intRoot page UID for logo linkLayout`maispace.theme.layout.borderRadius`stringCorner radius (`--layout-radius`)Layout`maispace.theme.layout.maxWidth`stringMax page width (`--layout-width-max`)Layout`maispace.theme.layout.sidebar`boolEnable sidebar layoutLayout`maispace.theme.layout.showHeaderActions`boolShow header actions slotLayout`maispace.theme.layout.showFooterNav`boolShow footer navigation slotLayout`maispace.theme.layout.footerColumns`boolShow footer columns slotBackend Theme`maispace.theme.backend.logo`stringBackend toolbar logoBackend Theme`maispace.theme.backend.favicon`stringBackend faviconBackend Theme`maispace.theme.backend.loginLogo`stringLogin page logoBackend Theme`maispace.theme.backend.loginLogoAlt`stringLogin logo alt textBackend Theme`maispace.theme.backend.loginBackground`stringLogin background imageBackend Theme`maispace.theme.backend.loginHighlightColor`colorLogin accent colorBackend Theme`maispace.theme.backend.loginFootnote`stringLogin page footnoteColor settings are injected as CSS custom properties on `:root` via `page.headerData.100`, overriding the SCSS bundle defaults without recompilation. All `{$maispace.theme.*}` constants are also available in your own TypoScript setup.

Stylesheet customisation
------------------------

[](#stylesheet-customisation)

Override any CSS custom property in `:root` to customise the design system:

```
/* your_extension/Resources/Public/StyleSheet/overrides.css */
:root {
    --color-primary:      #7c3aed;
    --font-family-accent: 'Playfair Display', serif;
    --layout-radius:      0rem;
}
```

Register overrides via `Configuration/StyleSheets.php` in your extension — they are picked up automatically.

Usage
-----

[](#usage)

Create configuration files in your extension's `Configuration/` directory:

### StyleSheets.php

[](#stylesheetsphp)

```