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
- Arranging a Vapor page (Customize)
- 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.
Under Modern, Classic, Neon Horizon - and under any theme that does not bring its own editor - go to Settings → Libraries and scroll to Home sections. Each section has a checkbox (on/off) and, on most themes, 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. A section can also pin itself so that it never moves, in which case it shows its checkbox but no arrows.
A theme that arranges its pages in place removes this block from Settings entirely and gives you the controls on the page instead. Vapor does exactly that: under Vapor there is no Home sections block in Settings → Libraries at all - no checkboxes, no arrows, no per-section switches - because you arrange its pages on the pages themselves (see Arranging a Vapor page (Customize)). Only that one block goes: Library visibility and Recently added are still there under Vapor, in their usual place.
The same rails render per theme - here they are under Neon Horizon and Vapor:
In Vapor the two rails are split by design: Recently played sits on the home page (above), while Continue playing moves to the Retro page - the storefront is for browsing, Retro is where you go back into a game:
Vapor is arranged on the page itself rather than from Settings. Click the grid-with-a-plus icon in the Vapor navbar (its tooltip reads Customize) and the page enters arrange mode. The same button becomes a checkmark (Done) to leave again, and a second button - a circular arrow, Reset layout - appears beside it for as long as you are arranging.
The Customize button appears on the home page, Retro, Store, the Games library and each of your own libraries, and a single platform's page. Search results and the game, ROM and collection detail pages have nothing arrangeable, so no button appears there. If you navigate to one of them, Vapor leaves arrange mode by itself, so the mode is never left switched on somewhere it does nothing. A library of the collections kind builds no shelves at all, so its Customize button appears with nothing underneath it.
In arrange mode every section on the page grows a dashed accent bar above it:
| Control | What it does |
|---|---|
| Grip | The whole bar is a drag handle - see below |
| Section name | Which section the bar belongs to |
| Move up / Move down | Steps the section one place up or down |
| Big card on the left / right | Which side the section's big card sits on. Only on sections that have one |
| Eye | Hides or shows the section |
Arrow presses step over sections that have nothing to show, so an empty one never swallows a press. A section you have switched off still counts, because it stays on the page while you arrange, so moving past it takes one press. A section with nothing in it shows no bar at all.
The whole bar is the handle. Pick one up and drop it on another section's bar, and the dragged section moves to that position, the rest closing up behind it - the two do not swap places. The bar under the cursor takes a solid accent border, so you can see where the section will land before you let go.
The eye hides a section, but hidden sections stay on the page while you are arranging, dimmed: if a hidden section disappeared at once, the control needed to bring it back would go with it. They drop out the moment you press Done.
Arranging never reshuffles the big cards. Every press writes a setting, and Vapor skips its banner-rotation restart while you are arranging, so the cards do not jump to a different game under your hands.
Sections built as a block of tiles plus one big showcase card carry an extra button for the side that card sits on. Both its icon and its tooltip name where the press will put the card, not where the card is now - so the tooltip reads Big card on the right while the card is on the left, and Big card on the left while it is on the right.
These are the sides the shelves ship with:
| Big card on the left | Big card on the right |
|---|---|
| Top rated (home) | Recently added (home) |
| Recently played (home) | |
| Recently played (Retro) | Continue playing (Retro) |
| Top rated (Retro) | Recently added (Retro) |
| Top rated (Store) | New in store (Store) |
| Top rated (your libraries) | Recently added (your libraries) |
| Recently added (platform) | Top rated (platform) |
On the home page, Browse by category, Popular, Trailers, the ROM rail and the collection rails carry no such button. The ROM rail does draw a big card once it has six ROMs or more, but its side is fixed rather than being yours to set. On Retro, Store, your own libraries and a platform's page, every section has the button.
This is the arrangement a fresh account sees, and the one Reset layout returns you to:
| View | Sections, top to bottom |
|---|---|
| Home | Browse by category, Recently added, Top rated, Popular, then one rail per collection (each labelled with the collection's own title), Recently played, Recently added (the ROM rail), Trailers |
| Retro | Continue playing, Recently played, Recently added, Top rated |
| Store | New in store, Top rated |
| Your own libraries | Recently added, Top rated |
| A platform's page | Recently added, Top rated |
Some parts of a Vapor page never move: they cannot be dragged, cannot be hidden, and always sit at the top or the bottom of the view. Each view opens on its hero, and where a view has a grid, the grid is the library:
- The home carousel, and the Store, Retro and platform heroes.
- The platform grid on Retro.
- The ROM grid on a platform's page, and the game grid in each of your libraries.
None of these grows an edit bar, which is why the bars stop where they do.
Reset layout reaches further than its position in the navbar suggests, and there is no confirmation prompt - one click and your arrangement is gone.
It clears the order, the hidden sections and the per-section options for the whole of the active theme: every Vapor view at once - home, Retro, Store, all of your own libraries and the platform view - not only the page in front of you. All of them return to the arrangement above.
It leaves the theme's other settings alone: your skin, Vapor's other display settings and the choice of which libraries feed Recently added all survive. It never touches another theme's layout.
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.
An arranged layout rides along with them. It is kept under three keys of the theme's own settings - which sections are hidden, the order you put them in, and the per-section options - and, like everything else here, it is stored per user and per theme. So an arrangement you make in one browser follows you to another device, and arranging Vapor never disturbs Modern, Classic or Neon Horizon. On a fresh account all three keys are unset, which is why a new user sees exactly the arrangement the theme ships with.
Sections you have never arranged keep the theme's own order, at the end of the list. That is why a collection or a library created after you arranged a page turns up without disturbing the layout you saved, and why one that is deleted just drops out of it.
| 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.