Theme - ModernDark

DogmaDragon · October 15, 2026, 9:52pm

Theme-ModernDark: refresh for Stash v0.31 (2.0)

main ← nexalapp:theme-moderndark-refresh

opened 11:27PM - 03 Oct 26 UTC

A refresh of ModernDark for Stash v0.31, made inside the existing `Theme-ModernD…ark.css` (no new stylesheet). It keeps the theme's identity: neutral dark grey (not black) with cards a step lighter, amber for whatever is active (nav underline, active tab and view, left bar in Settings, toggles, buttons, scrubber arrows), bordered rectangular toolbar controls, covers fading into the card with white resolution and duration, centred bold counts, filled red Delete, and the existing phone layout block (untouched). **What changed** - **Colour and shape:** one radius scale (4 / 6 / 8) instead of 3–4px everywhere; card borders dropped, since the tonal step already separates them; dialogs, menus and detail headers use the card tone instead of the blue-grey Stash defaults. - **Contrast:** amber buttons take dark text (white on this amber is 2.3:1, below WCAG AA); meta greys lifted to pass AA on the card grey. - **Top nav:** bold words with a 3px amber underline under the active page and a hairline along the bottom. - **Toolbar (Stash v0.29+):** bordered segments share a 34px height; the active view is lit amber with an underline; the filter-sidebar toggle no longer hangs half off the page; the sidebar uses the card tone. - **Pagination:** centred, with the result count on the same row; the floating bottom pagination is kept, styled to match. - **Cards:** cover fades into the card; studio chip top-left; "1080P · 21:04" bottom right; counts centred under a hairline, pinned to the bottom so they line up across a row; hover lifts the card with an amber edge; selection is a 2px amber ring; the diagonal rating ribbon is hidden on cards (the rating stays on the scene page); studio and tag logos sit in a fixed 16:9 box so every card in a row is the same height. - **Performer page:** full-bleed portrait fading into the header, 40px name, tight field list; only Edit is amber. - **Scene page:** 32px title, amber tab underline, amber scrubber arrows, a soft circle behind the big play button. - **Settings:** card-tone sections without borders, 28px section titles, amber left bar on the active item. Version 1.3 → 2.0. README gains a short description and screenshots. **Since this PR was opened** - Fixes from a review across all the refreshed themes: home carousel arrows inside the page and centred on the cards, the card heart the same size as the select checkbox, two performers per row in the scene details panel. - Home page studio cards fill their carousel slot; the task queue and the last stock-blue leaks are themed. - Home carousels show whole cards only, spaced like the grid, and card shadows are no longer clipped into a band. - The active tab's underline sits on the tab bar line instead of floating above it. - The slim header Stash pins on scrolled detail pages has a solid background and slides in only once the full header has scrolled away (it used to overlap it). - Phones: the filter sidebar opens as a full-screen sheet with a full-width results button (side by side with a single column of cards on small tablets); long Stash IDs fit the performer header. - Dialogs such as Edit filter fill the screen on phones, with their buttons at the foot. - Phones: the ☰ menu is an even grid of tiles with small icons, and the list toolbar fits on two rows. - The ☰ button is the same colour as the nav icons beside it. - The Theme Switch menu is solid and on the theme's colours (it was see-through over the blurred bar, and on stock slate). ### Screenshots Taken on an empty Stash v0.31.1 with demo content: fictional titles and names, and openly licensed photos blurred heavily so no one is identifiable (credits on the [screenshots branch](https://github.com/nexalapp/CommunityScripts/tree/screenshots)). | Scenes | Scene | |---|---| | ![Scenes](https://raw.githubusercontent.com/nexalapp/CommunityScripts/5bc9cff474e54dc664717075d4534d4459852788/Theme-ModernDark/desktop-scenes.jpg) | ![Scene](https://raw.githubusercontent.com/nexalapp/CommunityScripts/5bc9cff474e54dc664717075d4534d4459852788/Theme-ModernDark/desktop-scene.jpg) | | ![Performer](https://raw.githubusercontent.com/nexalapp/CommunityScripts/5bc9cff474e54dc664717075d4534d4459852788/Theme-ModernDark/desktop-performer.jpg) | ![Studios](https://raw.githubusercontent.com/nexalapp/CommunityScripts/5bc9cff474e54dc664717075d4534d4459852788/Theme-ModernDark/desktop-studios.jpg) | <img src="https://raw.githubusercontent.com/nexalapp/CommunityScripts/5bc9cff474e54dc664717075d4534d4459852788/Theme-ModernDark/mobile-scenes.jpg" alt="Scenes on a phone" width="240"> <img src="https://raw.githubusercontent.com/nexalapp/CommunityScripts/5bc9cff474e54dc664717075d4534d4459852788/Theme-ModernDark/mobile-scene.jpg" alt="A scene on a phone" width="240"> ### Testing Tested on Stash v0.31.1 (Docker) in Chrome at 1440×900 and 390×844, on a real library of several thousand scenes and on an empty instance with demo content: scene, performer, studio and tag grids, the filter sidebar and selection toolbar, scene, performer and studio pages, settings and dialogs. Validated with `node validate.js --ci`. ### AI disclosure This change was written with Claude (Anthropic) in Claude Code, from a design mockup. I reviewed the code and tested it on my own Stash install before submitting. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

@CJ13 would you be interested in reviewing it?