Add OpenCentauri Fluidd theme by pdscomp · Pull Request #183 · OpenCentauri/cosmos

pdscomp · 2026-05-13T17:42:23Z

Summary

Adds an OpenCentauri-branded Fluidd theme to the Yocto Fluidd recipe, including a complete dark-theme CSS overhaul, toolbar/wordmark/watermark branding, and a grayscale favicon.

Changes

Adds OpenCentauri Fluidd theme assets under the Fluidd recipe files.
Adds an install-time theme patcher that updates Fluidd metadata, app icons, manifest values, theme preset configuration, and the generated frontend bundle icon behavior.
Updates fluidd_1.37.0.bb to include the theme directory in SRC_URI and install all assets into /var/www/fluidd.
Runs the theme patcher during do_install using BitBake's native ${PYTHON} from python3native.

Detailed changelog (this PR)

CSS (`opencentauri-theme.css`)

Expanded from logo-only styling to a complete dark OpenCentauri theme.
Defined grayscale CSS variables (--oc-bg, --oc-surface, --oc-primary, etc.) on .theme--dark.v-application.
Drove app background to near-black (#050505) with dark gray cards/sheets/dialogs/menus/lists/tables.
Applied subtle white-alpha borders and muted text colors for secondary/disabled states.
Set primary/action tones to neutral gray/white (#D8DADC) with related muted variants.
Toned down semantic colors (success/info/warning/error) to fit the grayscale palette.
Overrode core Vuetify/Fluidd surfaces: app bar, toolbar, nav drawer, cards, dialogs, inputs, selects, sliders, progress bars, tabs, buttons, chips, alerts, snackbars, collapsible card headings, and file-system hover/action surfaces.
Left filament/material-type colors untouched so they still represent real printer data.
Forced the top-left toolbar logo to logo_opencentauri.svg via CSS background-image with grayscale(1) invert(1) brightness(0.82) filter for readability on black.
Added the wide OpenCentauri wordmark banner in the top header via opencentauri-logo-small.png.
Sized and filtered the bottom-right background watermark (.background-logo): width: min(38vw, 560px), opacity: 0.3, grayscale(1) invert(1) brightness(1.15) contrast(1.05).

Patcher (`apply-opencentauri-fluidd-theme.py`)

Bumped PRIMARY_COLOR from #9EA2A6 to #D8DADC for a brighter neutral primary.
Fixed logoSrc getter patching to replace all occurrences in the minified bundle (not just the first). This ensures both the toolbar logo component and the app-level inline-svg.background-logo watermark render logo_opencentauri.svg instead of falling back to the Fluidd default logo.
Switched favicon/icon source from opencentauri-icon.webp to the new opencentauri-icon-gray.webp grayscale variant.

New asset

opencentauri-icon-gray.webp: grayscale + brightened version of the original colored icon, used as the favicon / apple-touch-icon / msapplication-TileImage.

Recipe (`fluidd_1.37.0.bb`)

Added opencentauri-icon-gray.webp to the do_install file copy step so it is deployed alongside the other theme assets.

Validation

Manually ran the theme patcher against fluidd-v1.37.0.zip.
Confirmed generated Fluidd files reference:
- OpenCentauri
- opencentauri-theme.css
- opencentauri-icon-gray.webp
- logo_opencentauri.svg

pdscomp · 2026-05-13T17:42:59Z

Current version!

github-actions · 2026-05-13T17:51:40Z

✅ Build Artifacts

Branch: paul/opencentauri-fluidd-theme
Build: 937ab53 (merge into main)

Artifact	Size
CC1 Firmware	91.30 MB

View workflow run

pdscomp · 2026-05-13T18:18:06Z

Latest version of OpenCentauri theme! It's blacker than black 👀

CSS (opencentauri-theme.css): - Expand from logo-only styling to a complete dark OpenCentauri theme. - Define grayscale CSS variables (--oc-bg, --oc-surface, --oc-primary, etc.) on .theme--dark.v-application. - Drive app background to near-black (#050505) with dark gray cards/sheets/dialogs/menus/lists/tables. - Apply subtle white-alpha borders and muted text colors for secondary/disabled states. - Set primary/action tones to neutral gray/white (#D8DADC) with related muted variants. - Tone down semantic colors (success/info/warning/error) to fit the grayscale palette. - Override core Vuetify/Fluidd surfaces: app bar, toolbar, nav drawer, cards, dialogs, inputs, selects, sliders, progress bars, tabs, buttons, chips, alerts, snackbars, collapsible card headings, and file-system hover/action surfaces. - Leave filament/material-type colors untouched so they still represent real printer data. - Force the top-left toolbar logo to logo_opencentauri.svg via CSS background-image with grayscale(1) invert(1) brightness(0.82) filter for readability on black. - Add the wide OpenCentauri wordmark banner in the top header via opencentauri-logo-small.png. - Size and filter the bottom-right background watermark (.background-logo): width: min(38vw, 560px), opacity: 0.3, grayscale(1) invert(1) brightness(1.15) contrast(1.05). Patcher (apply-opencentauri-fluidd-theme.py): - Bump PRIMARY_COLOR from #9EA2A6 to #D8DADC for a brighter neutral primary. - Fix logoSrc getter patching to replace ALL occurrences in the minified bundle (not just the first). This ensures both the toolbar logo component and the app-level inline-svg.background-logo watermark render logo_opencentauri.svg instead of falling back to the Fluidd default logo. - Switch favicon/icon source from opencentauri-icon.webp to the new opencentauri-icon-gray.webp grayscale variant. New asset: - opencentauri-icon-gray.webp: grayscale + brightened version of the original colored icon, used as the favicon/apple-touch-icon/msapplication-TileImage. Recipe (fluidd_1.37.0.bb): - Add opencentauri-icon-gray.webp to the do_install file copy step so it is deployed alongside the other theme assets. Closes the TBD in PR #183 for deeper custom CSS branding.

github-actions · 2026-05-13T18:24:22Z

✅ Build Artifacts

Branch: paul/opencentauri-fluidd-theme
Build: 9340c45 (merge into main)

Artifact	Size
CC1 Firmware	91.30 MB

View workflow run

pdscomp · 2026-05-13T18:31:08Z

Latest build!

Adds .v-badge__badge styling to opencentauri-theme.css so the notification count bubble on the bell icon uses a dark gray (#333333) background with white text and a white circular border, making it readable against the dark theme instead of the default light/saturated Vuetify badge colors.

github-actions · 2026-05-13T18:37:05Z

✅ Build Artifacts

Branch: paul/opencentauri-fluidd-theme
Build: ad3a29a (merge into main)

Artifact	Size
CC1 Firmware	91.30 MB

View workflow run

github-actions · 2026-05-14T02:24:43Z

✅ Build Artifacts

Branch: paul/opencentauri-fluidd-theme
Build: 543b503 (merge into main)

Artifact	Size
CC1 Firmware	91.31 MB

View workflow run

Previously the CSS globally overrode all dark themes. Now it is properly scoped so it only applies when the OpenCentauri theme is active. CSS changes: - All selectors scoped under [data-fluidd-theme="OpenCentauri"] - The theme only applies when selected, allowing users to switch Patcher changes: - Add data-fluidd-theme="OpenCentauri" to <html> tag (prevents FOUC) - Patch onThemeChange() to update data-fluidd-theme when theme changes - Patch initial Vuex state to default to OpenCentauri theme - Set config.json default theme to OpenCentauri Users can now select any theme from the dropdown. OpenCentauri is the default, but Fluidd, Annex, and other presets work normally.

… use logo-src theme detection

github-actions · 2026-05-14T02:54:03Z

✅ Build Artifacts

Branch: paul/opencentauri-fluidd-theme
Build: c077c10 (merge into main)

Artifact	Size
CC1 Firmware	91.31 MB

View workflow run

Copilot

Pull request overview

Adds an OpenCentauri-branded dark theme to the Fluidd web UI shipped via the Yocto recipe. Theme assets (CSS, logos, grayscale favicon) are installed into the Fluidd webroot, and a Python patcher rewrites Fluidd's index.html, manifest, config, and minified bundle so OpenCentauri is the default theme and rebrands favicon/title/wordmark/watermark.

Changes:

New opencentauri-theme.css: full dark grayscale Vuetify/Fluidd surface overrides plus toolbar logo, wordmark, and background watermark styling.
New apply-opencentauri-fluidd-theme.py: rewrites Fluidd metadata, manifest, themePresets/active theme, default Vuex theme chunk, and patches the minified bundle's onThemeChange and defaultIconDataUrl.
Updates fluidd_1.37.0.bb to inherit python3native, pull in the theme directory, install the assets into /var/www/fluidd, and run the patcher in do_install.

Reviewed changes

Copilot reviewed 3 out of 7 changed files in this pull request and generated 3 comments.

File	Description
meta-opencentauri/recipes-apps/fluidd/fluidd_1.37.0.bb	Adds theme dir to `SRC_URI`, installs theme assets, runs the patcher under `${PYTHON}` from `python3native`.
meta-opencentauri/recipes-apps/fluidd/files/opencentauri-fluidd-theme/opencentauri-theme.css	Complete dark OpenCentauri theme scoped via `[data-fluidd-theme="OpenCentauri"]`.
meta-opencentauri/recipes-apps/fluidd/files/opencentauri-fluidd-theme/apply-opencentauri-fluidd-theme.py	Install-time patcher for Fluidd's HTML/manifest/config/bundle to enable and default-select the theme.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

    cp -r ${S}/* ${D}/var/www/fluidd/
+    install -m 0644 \
+        ${WORKDIR}/opencentauri-fluidd-theme/logo_opencentauri.svg \
+        ${WORKDIR}/opencentauri-fluidd-theme/opencentauri-icon.webp \


+    text = path.read_text()
+    text = re.sub(r"<title>.*?</title>", f"<title>{APP_NAME}</title>", text, count=1)
+    # Add data-fluidd-theme to html tag for immediate CSS scoping (prevents FOUC)
+    text = text.replace("<html lang=\"en\">", f'<html lang="en" data-fluidd-theme="{APP_NAME}">')


+def patch_index_html(webroot):
+    path = webroot / "index.html"
+    text = path.read_text()
+    text = re.sub(r"<title>.*?</title>", f"<title>{APP_NAME}</title>", text, count=1)
+    # Add data-fluidd-theme to html tag for immediate CSS scoping (prevents FOUC)
+    text = text.replace("<html lang=\"en\">", f'<html lang="en" data-fluidd-theme="{APP_NAME}">')
+    text = re.sub(
+        r'<meta name="description" content="[^"]*" />',
+        f'<meta name="description" content="{DESCRIPTION}" />',
+        text,
+        count=1,
+    )
+    text = re.sub(
+        r'<link rel="icon" type="image/png" sizes="32x32" href="[^"]+" />',
+        f'<link rel="icon" type="image/webp" sizes="128x128" href="./{ICON_SRC}" />',
+        text,
+        count=1,
+    )
+    text = re.sub(
+        r'\s*<link rel="icon" type="image/png" sizes="16x16" href="[^"]+" />\n',
+        "\n",
+        text,
+        count=1,
+    )
+    text = re.sub(
+        r'<meta name="theme-color" content="[^"]*" />',
+        f'<meta name="theme-color" content="{PRIMARY_COLOR}" />',
+        text,
+        count=1,
+    )
+    text = re.sub(
+        r'<meta name="apple-mobile-web-app-title" content="[^"]*" />',
+        f'<meta name="apple-mobile-web-app-title" content="{APP_NAME}" />',
+        text,
+        count=1,
+    )
+    text = re.sub(
+        r'<link rel="apple-touch-icon" sizes="180x180" href="[^"]+" />',
+        f'<link rel="apple-touch-icon" sizes="128x128" href="./{ICON_SRC}" />',
+        text,
+        count=1,
+    )
+    text = re.sub(
+        r'<meta name="msapplication-TileImage" content="[^"]+" />',
+        f'<meta name="msapplication-TileImage" content="./{ICON_SRC}" />',
+        text,
+        count=1,


github-actions · 2026-05-14T04:01:46Z

✅ Build Artifacts

Branch: paul/opencentauri-fluidd-theme
Build: 56c3f1a (merge into main)

Artifact	Size
CC1 Firmware	91.30 MB

View workflow run

Add OpenCentauri Fluidd theme

937ab53

pdscomp temporarily deployed to approval-given May 13, 2026 17:42 — with GitHub Actions Inactive

pdscomp temporarily deployed to approval-given May 13, 2026 18:16 — with GitHub Actions Inactive

pdscomp temporarily deployed to approval-given May 13, 2026 18:29 — with GitHub Actions Inactive

pdscomp temporarily deployed to approval-given May 14, 2026 02:18 — with GitHub Actions Inactive

pdscomp temporarily deployed to approval-given May 14, 2026 02:44 — with GitHub Actions Inactive

Refine patcher: add favicon override, remove stale logo/icon patches,…

c077c10

… use logo-src theme detection

pdscomp marked this pull request as ready for review May 14, 2026 03:26

Copilot AI review requested due to automatic review settings May 14, 2026 03:26

Copilot started reviewing on behalf of pdscomp May 14, 2026 03:26 View session

Copilot AI reviewed May 14, 2026

View reviewed changes

pdscomp temporarily deployed to approval-given May 14, 2026 03:41 — with GitHub Actions Inactive

Switch favicon to carbon-logo-red.webp

9a78a3f

pdscomp temporarily deployed to approval-given May 14, 2026 03:54 — with GitHub Actions Inactive

Fix recipe: install carbon-logo-red.webp instead of old gray icon

56c3f1a

Atomique13 approved these changes May 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add OpenCentauri Fluidd theme#183

Add OpenCentauri Fluidd theme#183
pdscomp wants to merge 7 commits into
mainfrom
paul/opencentauri-fluidd-theme

pdscomp commented May 13, 2026 •

edited

Loading

Uh oh!

pdscomp commented May 13, 2026

Uh oh!

github-actions Bot commented May 13, 2026

Uh oh!

pdscomp commented May 13, 2026

Uh oh!

github-actions Bot commented May 13, 2026

Uh oh!

pdscomp commented May 13, 2026

Uh oh!

github-actions Bot commented May 13, 2026

Uh oh!

github-actions Bot commented May 14, 2026

Uh oh!

github-actions Bot commented May 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions Bot commented May 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

pdscomp commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Detailed changelog (this PR)

CSS (opencentauri-theme.css)

Patcher (apply-opencentauri-fluidd-theme.py)

New asset

Recipe (fluidd_1.37.0.bb)

Validation

Uh oh!

pdscomp commented May 13, 2026

Uh oh!

github-actions Bot commented May 13, 2026

✅ Build Artifacts

Uh oh!

pdscomp commented May 13, 2026

Uh oh!

github-actions Bot commented May 13, 2026

✅ Build Artifacts

Uh oh!

pdscomp commented May 13, 2026

Uh oh!

github-actions Bot commented May 13, 2026

✅ Build Artifacts

Uh oh!

github-actions Bot commented May 14, 2026

✅ Build Artifacts

Uh oh!

github-actions Bot commented May 14, 2026

✅ Build Artifacts

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

github-actions Bot commented May 14, 2026

✅ Build Artifacts

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pdscomp commented May 13, 2026 •

edited

Loading

CSS (`opencentauri-theme.css`)

Patcher (`apply-opencentauri-fluidd-theme.py`)

Recipe (`fluidd_1.37.0.bb`)