README

Night sky glass: frosted panels floating over a slow aurora, with a dawn variant for light mode.

Frosted glass floating over a night sky. Three blurred aurora curtains drift slowly behind the page while panels, menus and the header are translucent glass with a thin highlight along their top edge. The header is a floating pill that stays in reach while scrolling. Buttons are lit with a soft gradient glow.

Light mode is the same sky at dawn: peach, lilac and ice blue behind white glass. Stars only come out at night.

Headings use the wide Unbounded, body text is Manrope. Motion respects prefers-reduced-motion.

Screenshots

Light	Dark

Phone	Phone menu

How it is built

The theme only styles forumify's own CSS framework: box, card, the btn-* buttons, menus, form fields, tables, tabs, tags and alerts, plus the forum's own building blocks. It overrides no templates. Pages added by forumify updates or by plugins are built from the same classes, so they pick up the look without any extra work.

Every colour comes from a theme variable. forumify writes the light or dark set of variables depending on the visitor's preference, and the stylesheet never needs to know which one is active. forumify's own variables keep their meaning (the admin panel uses them too), only their defaults change.

Theme variables

On top of forumify's own colours, borders and font size, the theme adds these. All of them can be changed under Admin → Settings → Themes, separately for dark mode.

Requirements

• PHP 8.4 or newer
• Composer

What's in here

src/
  AuroraTheme.php   Theme class: name, author, stylesheets, variables
public/
  style.css               Loaded on every page while the theme is active
templates/                Overrides for forumify's and plugins' templates

Two things in composer.json make it a theme:

{
    "type": "forumify-theme",
    "extra": {
        "forumify-plugin-class": "Forumify\\AuroraTheme\\AuroraTheme"
    }
}

forumify discovers installed themes by that package type, and reads the class named in extra for the theme's name, stylesheets and variables.

Variables

Your theme class extends forumify's base theme, so it starts out with every variable forumify's own styles rely on: colours, elevations, borders and font size. Admins can change all of them under Admin → Settings → Themes, with separate values for dark mode.

Add your own by overriding getThemeConfig(), the docblock on your theme class shows how. Each variable becomes a CSS custom property:

.header {
    background-color: var(--c-header);
}

Stylesheets and other static files

Everything in public/ is linked into the forumify instance at public/themes/forumify/forumify-aurora-theme/ when the theme is installed or refreshed. Stylesheets listed in getStylesheets() are loaded on every page, anything else (images, fonts) can be referenced relative to them.

Using an asset builder for sass or similar? Keep the sources in assets/ and build into public/: only public/ reaches the forumify instance.

Overriding templates

Templates in templates/ replace forumify's own. The first directory is Forumify for core templates, or the plugin class name for a plugin's templates:

templates/Forumify/frontend/forum/list.html.twig
templates/AcmeCalendarPlugin/frontend/calendar.html.twig

Extend the original with the @! prefix and override only the blocks you need, so your theme keeps working when forumify updates the template:

{% extends '@!Forumify/frontend/forum/list.html.twig' %}

{% block body %}
    <div class="flex gap-4">
        {{ parent() }}
    </div>
{% endblock %}

Missing a block you need? Add it to the original template and open a pull request on the platform repository.

Developing against a forumify instance

Point a local forumify instance at your working copy with a path repository, so your changes are live without publishing anything:

cd /path/to/your/forumify-instance
composer config repositories.forumify-aurora-theme path /path/to/forumify-aurora-theme
composer require forumify/forumify-aurora-theme:@dev

The theme then shows up under Admin → Settings → Themes, where you can activate it. If it doesn't, refresh the plugin list:

php bin/console forumify:plugins:refresh

Code quality

make quality        # phpcs + phpstan
make quality-fix    # fix what phpcs can fix automatically

Publishing

1. Push the repository to GitHub.
2. Submit it to Packagist.
3. Tag a release. Users install it with composer require forumify/forumify-aurora-theme.

Documentation

• Theme guide
• Customization guides