Repository navigation
feat: add themes (.orskin) category with live color swatches and preview #18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| -- Migration 0006 — register the first official theme: Cyberpunk Neon 1.0.0. | ||
| -- | ||
| -- A theme is an ordinary `plugins` row with `category = 'Themes'`; there is no | ||
| -- separate table. The columns that normally describe conversion tooling carry the | ||
| -- theme's payload instead: | ||
| -- | ||
| -- routes_json -> the colour palette, an array of hex strings. The storefront | ||
| -- reads it positionally (Background, Surface, Accent, Text) | ||
| -- and validates every value before it reaches a `style`. | ||
| -- platforms_json -> ["All Platforms"], because a theme is not OS-specific. | ||
| -- | ||
| -- The file it points at ships with this repository at public/themes/cyberpunk-neon.orskin, | ||
| -- and the `sha256` below is the digest of that exact file. The download URL is | ||
| -- root-relative on purpose: the file is served by this same site, so a relative | ||
| -- Location works on the production domain, on every Cloudflare Pages preview | ||
| -- deployment, and in local `wrangler pages dev` without hardcoding a hostname. | ||
| -- | ||
| -- Re-running is safe and never resets a live download counter: the upsert updates | ||
| -- every column *except* `downloads`. | ||
| -- | ||
| -- `publisher_id` is what the storefront joins on (see PLUGIN_SOURCE in | ||
| -- src/lib/db.ts). The M5 Dev publisher row is created by migration 0005, so | ||
| -- INSERT OR IGNORE here is a no-op when that has already run. | ||
|
|
||
| INSERT OR IGNORE INTO publishers (id, name, owner_github_id, verified) VALUES | ||
| ('m5dev', 'M5 Dev', '193546948', 1); | ||
|
|
||
| INSERT INTO plugins | ||
| (id, name, version, min_core_version, publisher_id, publisher_name, publisher_verified, | ||
| category, description, readme_markdown, routes_json, platforms_json, | ||
| download_url, sha256, icon, downloads) | ||
| VALUES | ||
| ( | ||
| 'cyberpunk-neon', | ||
| 'Cyberpunk Neon', | ||
| '1.0.0', | ||
| '3.9.0', | ||
| 'm5dev', | ||
| 'M5 Dev', | ||
| 1, | ||
| 'Themes', | ||
| 'Official high-contrast glowing neon cyan and hot pink retro-futuristic theme for OpenROM.', | ||
| '### Cyberpunk Neon | ||
|
|
||
| A high-contrast, glow-forward skin for OpenROM. Deep near-black panels, a lifted | ||
| slate surface, and hot pink / cyan accents that carry the retro-futuristic look | ||
| without washing out long sessions. | ||
|
|
||
| - **Background** — near-black for low glare on OLED and CRT-adjacent setups | ||
| - **Surface** — lifted slate so panels and cards stay legible | ||
| - **Accent** — hot pink primary with a cyan highlight for focus rings and links | ||
| - **Text** — pure white on dark for maximum contrast | ||
|
|
||
| #### Applying | ||
|
|
||
| Apply straight from the store with the **Apply in OpenROM** deep link, or download | ||
| the `.orskin` file and import it from *Settings → Appearance → Import…*.', | ||
| '["#0d0e15", "#161926", "#e94560", "#00f0ff", "#ffffff"]', | ||
| '["All Platforms"]', | ||
| '/themes/cyberpunk-neon.orskin', | ||
| 'ebe9e4056af600bfb6a2337b3114523d17924acb5196ff60bb1e5d0f0aa1d77a', | ||
| 'palette', | ||
| 0 | ||
| ) | ||
| ON CONFLICT (id) DO UPDATE SET | ||
| name = excluded.name, | ||
| version = excluded.version, | ||
| min_core_version = excluded.min_core_version, | ||
| publisher_id = excluded.publisher_id, | ||
| publisher_name = excluded.publisher_name, | ||
| publisher_verified = excluded.publisher_verified, | ||
| category = excluded.category, | ||
| description = excluded.description, | ||
| readme_markdown = excluded.readme_markdown, | ||
| routes_json = excluded.routes_json, | ||
| platforms_json = excluded.platforms_json, | ||
| download_url = excluded.download_url, | ||
| sha256 = excluded.sha256, | ||
| icon = excluded.icon; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "format": "openrom.theme", | ||
| "version": 1, | ||
| "id": "cyberpunk-neon", | ||
| "name": "Cyberpunk Neon", | ||
| "author": "M5 Dev", | ||
| "description": "Official high-contrast glowing neon cyan and hot pink retro-futuristic theme for OpenROM.", | ||
| "palette": { | ||
| "background": "#0d0e15", | ||
| "surface": "#161926", | ||
| "accent": "#e94560", | ||
| "text": "#ffffff" | ||
| }, | ||
| "swatches": ["#0d0e15", "#161926", "#e94560", "#00f0ff", "#ffffff"], | ||
| "highlights": { | ||
| "primary": "#00f0ff", | ||
| "secondary": "#e94560" | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| /** | ||
| * Themes are OpenROM UI skins. They are ordinary `plugins` rows whose | ||
| * `category` is `Themes`; the `.orskin` payload is a JSON palette, so the | ||
| * columns that normally describe conversion tooling are reused: | ||
| * | ||
| * routes_json -> the theme's colour palette, an array of hex strings | ||
| * platforms_json -> ["All Platforms"] | ||
| * | ||
| * Palette values arrive from D1, so they are untrusted input. Every colour is | ||
| * validated before it reaches a template, otherwise a crafted palette could | ||
| * break out of a `style` attribute. | ||
| */ | ||
|
|
||
| export const THEME_CATEGORY = 'Themes'; | ||
|
|
||
| /** Themes are not tied to one OS. */ | ||
| export const THEME_PLATFORM = 'All Platforms'; | ||
|
|
||
| /** #rgb, #rgba, #rrggbb and #rrggbbaa. Nothing else may reach a style. */ | ||
| const HEX_COLOR = /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i; | ||
|
|
||
| export function isHexColor(value: unknown): value is string { | ||
| return typeof value === 'string' && HEX_COLOR.test(value.trim()); | ||
| } | ||
|
|
||
| export function isTheme(category: string | null | undefined): boolean { | ||
| return category === THEME_CATEGORY; | ||
| } | ||
|
|
||
| export interface ThemePaletteEntry { | ||
| role: string; | ||
| hex: string; | ||
| } | ||
|
|
||
| function parseHexToRgb(hex: string): [number, number, number] | null { | ||
| if (!isHexColor(hex)) return null; | ||
| let value = hex.trim().slice(1); | ||
| if (value.length === 3 || value.length === 4) { | ||
| value = value | ||
| .slice(0, 3) | ||
| .split('') | ||
| .map((c) => c + c) | ||
| .join(''); | ||
| } else { | ||
| value = value.slice(0, 6); | ||
| } | ||
| const num = Number.parseInt(value, 16); | ||
| return [(num >> 16) & 255, (num >> 8) & 255, num & 255]; | ||
| } | ||
|
|
||
| /** | ||
| * Map a palette onto named roles by position. Invalid entries are dropped, so | ||
| * the result is always safe to render; a palette shorter than the role list | ||
| * repeats its last valid colour rather than producing an empty swatch. | ||
| */ | ||
| export function themePalette(routes: string[] | null | undefined): ThemePaletteEntry[] { | ||
| const colors = (routes ?? []).filter(isHexColor); | ||
| if (colors.length === 0) return []; | ||
| const at = (index: number) => colors[index] ?? colors[colors.length - 1]; | ||
| return [ | ||
| { role: 'Background', hex: at(0) }, | ||
| { role: 'Surface', hex: at(1) }, | ||
| { role: 'Accent', hex: at(2) }, | ||
| { role: 'Text', hex: at(colors.length - 1) }, | ||
| ]; | ||
| } | ||
|
|
||
| /** The valid colours to show in the card swatch bar, in order. */ | ||
| export function themeSwatches(routes: string[] | null | undefined, limit = 5): string[] { | ||
| return (routes ?? []).filter(isHexColor).slice(0, limit); | ||
| } | ||
|
|
||
| /** | ||
| * Readable text colour for a background, by relative luminance. Used so the | ||
| * mockup preview stays legible whatever palette a theme ships. | ||
| */ | ||
| export function contrastText(hex: string): string { | ||
| const rgb = parseHexToRgb(hex); | ||
| if (!rgb) return '#ffffff'; | ||
| const [r, g, b] = rgb.map((channel) => { | ||
| const c = channel / 255; | ||
| return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; | ||
| }); | ||
| const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b; | ||
| return luminance > 0.45 ? '#0b0b0f' : '#ffffff'; | ||
| } | ||
|
|
||
| /** The deep link OpenROM uses to apply a theme. */ | ||
| export function themeApplyUri(id: string): string { | ||
| return `openrom://theme/${id}`; | ||
| } | ||
|
|
||
| /** The file name a theme downloads as. */ | ||
| export function orskinFileName(id: string): string { | ||
| return `${id}.orskin`; | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Script executed:
Repository: M5Devs/OpenROM-Plugins-Store
Length of output: 8860
Script executed:
Repository: M5Devs/OpenROM-Plugins-Store
Length of output: 5585
Include all-platform themes in platform filters
When a user selects Windows, Linux, or macOS, the exact-match filter hides Cyberpunk Neon. Treat
All Platformsas a match for each selected platform.Suggested fix
In
src/pages/index.astro: