Themes
GamesDownloader ships with a rich appearance system that lets every user restyle the whole interface for themselves. You choose a layout mode, a colour skin, and a set of display and card effects, and the interface repaints live. On top of the two built-in layouts, theme plugins can deliver complete custom Vue layouts installed straight from the Plugin Store.
Everything on this page lives under Settings → Appearance (plus a compact quick-panel at the bottom of the sidebar). Preferences are per-user, so each account keeps its own look.
- Layout modes: Modern and Classic
- Colour skins
- Glass UI and theme-aware accents
- Card and cover effects
- Ambient background and hero artwork
- Per-library view mode and sort
- Play rails on the home page
- Where your appearance settings are saved
- Theme plugins
- Installing themes from the Plugin Store
- The About dialog
| Modern | Classic |
 |
 |
Two layouts are built in. Pick one from the Layout cards at the top of Settings → Appearance (each card shows a live mini-preview).
-
Modern - a cover grid with 3D card effects, a list view with animated hero backgrounds, and an alphabet sidebar for fast jumping. This is the default (
gameyfin) layout and lands on the home page (/). -
Classic - a game-detail layout built around a left sidebar. It presents all three libraries (GOG, Custom Games and ROM / Emulation), a platform switcher, and SteamGridDB icons in the sidebar. It lands on the library page (
/library).
| Capability | Modern | Classic |
|---|---|---|
| Cover grid with tilt / shine / glow | + | |
| List view with Ken Burns hero art | + | |
| Alphabet quick-jump sidebar | + | |
| Game-detail sidebar layout | + | |
| Sidebar platform switcher (GOG / Custom / ROM) | + | |
| SteamGridDB icons in the sidebar | + | |
| Optional hero background on the detail view | + | + |
Colour skins, card effects and every display option hot-swap instantly with no page reload - the theme store writes
data-attributes onto the page root and every element re-reads its colours live. Switching between the two layout modes themselves is different: because Modern and Classic are structurally distinct views, choosing the other one reloads into that layout's landing page. The same applies when you switch to (or away from) a plugin layout.
A skin changes the colour palette without touching the layout. There are 14 skins in total: 7 solid and 7 dual-gradient, and both built-in layouts offer all of them.
- Solid (7): Purple (default), Blue, Teal, Pink, Green, Red, Orange.
- Dual-gradient (7): two distinct hues blended for a vivid dual-tone accent (Neon Dusk, Synthwave, Sunset, Aurora, Vulcan, Midnight, Cosmic).
Every accent colour, glow, active state and toggle highlight in the UI adapts to the active skin, so the whole interface stays visually consistent. Switch skins from the Skin swatches in Settings → Appearance or from the sidebar quick-panel.
The interface uses a unified "glass" style throughout: panels use a backdrop blur, borders and fills are derived from the active skin with color-mix accents, and glows are tinted to match the current palette. Buttons, toggles and chips all follow the same glass pattern rather than solid colour blocks, so a skin change ripples across the entire UI at once.
Additional Display Options (in Settings → Appearance, and mirrored in the sidebar quick-panel) let you toggle:
- Animations - global UI motion on or off.
- Ambient - glowing ambient background orbs, with an Orb Motion sub-toggle and per-theme orb size / count / speed controls.
- Grid - a subtle grid overlay pattern.
The Card Effects section controls how cover cards behave on hover in the Modern grid. Five independent toggles are available:
| Effect | What it does |
|---|---|
| 3D Tilt | Cards tilt in 3D towards the cursor |
| Specular Shine | A moving highlight sweeps across the cover |
| Zoom | The cover scales up on hover |
| Glow | A theme-coloured glow appears behind the card |
| Lift shadow | The card lifts with a drop shadow |
A counter shows how many of the five are active, and a Reset card effects to defaults button restores them in one click.
GamesDownloader uses a game's hero artwork as an ambient backdrop. On the game detail page the hero image becomes a soft, blurred background behind the content, and in the Modern list view hero art animates behind the currently focused title.
The Game Page Settings section tunes this effect:
- Hero Background (Classic layout) - toggle the blurred hero backdrop on or off.
- Hero blur - adjustable blur strength from 0 to 40 px.
- Hero animation - enable subtle motion on the backdrop, choosing a style of Ken Burns, Drift or Pulse, at Slow, Normal or Fast speed.
- Hero to body fade - the fade height where the hero blends into the page body.
A separate Emulation Library section adds a Platform Photo Header toggle for the ROM / emulation views.
Your chosen view mode and sort order are remembered per library type - Games, GOG, Collections and Emulation each keep their own setting in your browser. Set a type to grid or list, pick a sort, and GamesDownloader restores that choice the next time you open it. The preference is tied to the library type, not to each individual library: all of your own custom libraries are rendered by the Games view, so they share the single Games view-mode and sort setting rather than remembering one each.
If you emulate, two rows now live at the top of the home page instead of on a separate dashboard:
- Continue playing - ROMs you have a save for. Each cover carries its used save slots: hover a tile to see the slots, hover a slot to swap the cover for that save's screenshot, and click to resume. Clicking the cover resumes the newest save; clicking a slot resumes that one.
- Recently played - ROMs you opened recently. Clicking a cover just opens the ROM.
Both rows only appear once you have played something, and both are per-theme - the Modern, Classic, Neon Horizon and Vapor home pages each render them in their own style.
Go to Settings → Libraries and scroll to Home sections. Each home section has a checkbox (on/off) and a pair of up/down arrows. Use the checkbox to hide a rail you do not want, and the arrows to move it above or below the others. The choice is saved per user and per theme, so hiding "Continue playing" under one theme leaves it untouched under another.
Themes that add their own extra home sections (trailer shelves, genre tiles, top-rated rails) list them in the same place, so you toggle and reorder everything from one spot.
The same rails render per theme - here they are under Neon Horizon and Vapor:
Appearance choices are stored in two places. They persist in the browser's localStorage for instant application on load, and while you are signed in they are also synced to your account through /api/users/me/preferences (debounced so slider drags do not hammer the backend). Because the settings live on your user record, your theme, skin, effects and toggles follow you when you sign in on another device or browser.
| Neon Horizon (plugin) | Vapor (plugin) |
 |
 |
The library, rendered by each theme plugin:
| Neon Horizon | Vapor |
 |
 |
Beyond the two built-in layouts, theme plugins can supply an entire custom Vue layout - their own navbar, home page, detail views and styling - not just a colour skin. The example themes NEON HORIZON (a Netflix-style layout with a hero banner, library tabs and particle effects) and Vapor (a Steam / Epic-style storefront layout) are full plugin themes.
How theme plugins work:
- A theme plugin ships
.vuesingle-file components. These are compiled by Vite on container startup; the compiled bundles are then loaded by the app from a plugin layout manifest (with cache-busting on each rebuild). - Once registered, a plugin theme appears as another card in the Layout picker alongside Modern and Classic, with its own preview.
- Plugin code reaches the running app through the
window.__GD__bridge, which exposes the Vue runtime, the Pinia stores and the API so a custom layout can render real library data, react to theme changes, and drive navigation.
Because plugin
.vuelayouts are compiled at container startup, installing or updating a theme plugin needs a container restart before the new layout is available. The Plugin Store provides a restart button for exactly this.
For a full walkthrough of building a theme (the Theme object, registerTheme, custom layouts and the __GD__ API surface), see Plugin Development. Note that plugins run with real access to the app, so review Plugin Trust Model before installing third-party themes.
Browsing themes and plugins in the Plugin Store
Theme plugins are installed like any other plugin, from Settings → Plugins:
- Open the Store tab to browse configured store sources. Each listing includes a screenshot gallery with a fullscreen lightbox.
- Click install. Dependencies are handled automatically, and updates are detected later with a changelog preview and version transition display.
- For a theme plugin, use the container restart button so its Vue layout compiles.
- Open Settings → Appearance and pick the new theme from the Layout cards.
You can also install a plugin directly by uploading its ZIP in Settings → Plugins. When updates are available, a badge appears on your avatar in the user menu.
An About entry is available from the user menu (click your avatar). It opens the About dialog with project and community information. Plugins can also open this dialog programmatically through the __GD__ UI bridge, which is how themes such as NEON HORIZON surface it from their own menus.
Next: Plugin Development - build your own theme; or Library to see the views these layouts render.