Skip to content

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

Open
nexalapp wants to merge 1 commit into
stashapp:mainfrom
nexalapp:theme-moderndark-refresh
Open

nexalapp wants to merge 1 commit into
stashapp:mainfrom
nexalapp:theme-moderndark-refresh

Conversation

@nexalapp

@nexalapp nexalapp commented Oct 3, 2026

Copy link
Copy Markdown

A refresh of ModernDark for Stash v0.31, made inside the existing Theme-ModernDark.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.

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).

Scenes Scene
Scenes Scene
Performer Studios

Scenes on a phone A scene on a phone

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

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant