SMK Family style & branding kit: logo, palette, typography, per-app playbook

2026-08-15 21:37:48 +00:00
commit 7a31c7ed8d
20 changed files with 475 additions and 0 deletions
@@ -0,0 +1,16 @@
+# FreshRSS branding — SMK
+
+## What's supported
+- Themes: CSS themes in the FreshRSS `themes/` dir (user-selectable in Settings → Appearance).
+- SMK theme file: `smk-freshrss.css` in this folder.
+
+## Assets
+- `smk-freshrss.css` — dark SMK theme (drop into `themes/SMK/` on the FreshRSS instance).
+
+## Apply (cosmetic only)
+1. Copy `smk-freshrss.css` to FreshRSS `themes/SMK/smk-freshrss.css` (compose bind mount or copy into CT).
+2. Settings → Appearance → Theme → select "SMK" → Save.
+3. FreshRSS login page logo: if a custom logo field exists in config, point to
+   `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/icon.svg`.
+
+No feeds, users, or DB changes.
@@ -0,0 +1,19 @@
+/* SMK Family — FreshRSS dark theme
+   Drop into themes/SMK/smk-freshrss.css on the FreshRSS instance */
+:root {
+  --color-background: #14161B;
+  --color-panel: #1A1E28;
+  --color-card: #232838;
+  --color-border: #333A4A;
+  --color-text: #F5F0E6;
+  --color-text-dim: #B9B2A6;
+  --color-accent: #F2A65A;
+  --color-accent-2: #E8755D;
+  --color-success: #A3C585;
+  --color-danger: #D98A8A;
+}
+body { background: var(--color-background); color: var(--color-text); }
+.header, .nav_menu, .box, .post { background: var(--color-card); border-color: var(--color-border); }
+a { color: var(--color-accent); }
+a:hover { color: var(--color-accent-2); }
+input, textarea, select { background: var(--color-panel); color: var(--color-text); border-color: var(--color-border); }
@@ -0,0 +1,20 @@
+# Gitea branding — SMK
+
+## What's supported
+- Custom logo & favicon: Admin Panel → Configuration → Appearance → logo URL / favicon URL.
+- Dark theme: `ui.theme.DEFAULT = auto-dark` in `app.ini` (already standard in this homelab).
+
+## Assets
+- Logo: use `../../assets/logo.svg` (dark lockup) or `../../assets/icon.svg` (mark only) for the login logo.
+- Favicon: `../../assets/favicon.ico`.
+
+## Apply
+Option A (admin UI, zero risk): Admin → Configuration → Appearance →
+  - Logo URL: `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/logo.svg`
+  - Favicon URL: `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/favicon.ico`
+
+Option B (custom assets dir, GitOps): place `logo.svg`/`favicon.ico` in Gitea's `custom/public/img/`
+(custom files override defaults; survives UI edits).
+
+## Cosmetic-only check
+No auth sources, OAuth config, or security settings are touched by this.
@@ -0,0 +1,18 @@
+# Grafana branding — SMK
+
+## What's supported
+- Custom logo: Administration → General → Organization → "Logo" (image URL) — UI-set, cosmetic.
+- Dark theme is Grafana's default.
+
+## Assets
+- Logo: `../../assets/icon.svg` (mark) or `../../assets/logo-light.svg` (lockup for light areas).
+
+## Apply (cosmetic only)
+Administration → General → Organization → Logo:
+```
+https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/icon.svg
+```
+
+## Note
+Grafana 9.x may not expose org logo in the UI; in that case branding needs `custom.ini`
+(`[server] app_title` etc.) — flag back if this instance can't set it via UI.
@@ -0,0 +1,68 @@
+# SMK Home Assistant theme
+# Dark-first, warm amber accent. Drop into config/themes/smk/ as smk.yaml
+# Enable: Profile → Appearance → Theme → "SMK Family"
+
+SMK Family:
+  # Header / top bar
+  primary-color: "#F2A65A"
+  accent-color: "#E8755D"
+  dark-primary-color: "#B35A2E"
+  light-primary-color: "#F7C58C"
+
+  # Backgrounds
+  primary-background-color: "#14161B"
+  secondary-background-color: "#1A1E28"
+  app-header-background-color: "#1A1E28"
+  app-header-text-color: "#F5F0E6"
+  sidebar-background-color: "#1A1E28"
+  sidebar-text-color: "#F5F0E6"
+  sidebar-icon-color: "#F2A65A"
+
+  # Cards & surfaces
+  card-background-color: "#232838"
+  card-mod-background-color: "#232838"
+  ha-card-background: "#232838"
+  card-border-color: "#333A4A"
+  divider-color: "#333A4A"
+
+  # Text
+  text-primary-color: "#F5F0E6"
+  text-secondary-color: "#B9B2A6"
+  primary-text-color: "#F5F0E6"
+  secondary-text-color: "#B9B2A6"
+
+  # States
+  state-icon-color: "#F2A65A"
+  state-icon-active-color: "#F2A65A"
+  state-icon-unavailable-color: "#8A8579"
+  label-badge-background-color: "#232838"
+  label-badge-text-color: "#F2A65A"
+  switch-unchecked-color: "#333A4A"
+  switch-unchecked-track-color: "#2A3040"
+  switch-checked-color: "#F2A65A"
+  switch-checked-track-color: "#B35A2E"
+
+  # Buttons
+  button-background-color: "#F2A65A"
+  button-text-color: "#14161B"
+  paper-button-background-color: "#F2A65A"
+  paper-button-text-color: "#14161B"
+
+  # Inputs
+  input-fill-color: "#2A3040"
+  input-ink-color: "#F5F0E6"
+  input-dropdown-item-color: "#2A3040"
+  input-dropdown-item-text-color: "#F5F0E6"
+
+  # Chips & badges
+  chip-background-color: "#2A3040"
+  chip-text-color: "#F5F0E6"
+  chip-icon-color: "#F2A65A"
+
+  # Misc
+  markdown-code-background-color: "#1A1E28"
+  markdown-code-color: "#F2A65A"
+  table-row-background-color: "#1A1E28"
+  table-row-alternative-background-color: "#232838"
+  background-color: "#14161B"
+  card-mod-card-color: "#232838"
@@ -0,0 +1,18 @@
+# Immich branding — SMK
+
+## What's supported
+- Appearance/theme: Admin → Settings → Appearance. Dark theme is default.
+- Custom logo: server settings → branding (logo URL) in recent Immich versions.
+
+## Assets
+- Logo: `../../assets/icon.svg` or `../../assets/logo-light.svg` (light surfaces).
+
+## Apply (cosmetic only)
+Admin → Settings → Appearance:
+- Theme: Dark (default) — already matches SMK.
+- Logo: set to `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/icon.svg` if the
+  version exposes a branding/logo field.
+
+## Note
+If the running Immich version has no logo field in Settings, do NOT edit the DB or frontend bundles.
+Report back — the asset is ready and the playbook is documented.
@@ -0,0 +1,22 @@
+# Paperless-ngx branding — SMK
+
+## What's supported
+- Custom logo: `PAPERLESS_APP_LOGO` env var → path to a logo image served as static.
+- Paperless ships its own dark mode (matches SMK dark-first).
+
+## Assets
+- Logo: `../../assets/icon.svg` → serve as static file; reference in `PAPERLESS_APP_LOGO`.
+
+## Apply (cosmetic only)
+In the paperless compose `.env`:
+```
+PAPERLESS_APP_LOGO=/usr/src/paperless/static/logo/icon.svg
+```
+And bind-mount `assets/icon.svg` into the container's static dir.
+Then `docker compose up -d paperless-webserver` (env change → recreate container; no DB/auth changes).
+
+## Note
+Logo path must be inside the container. If mount friction, host via Gitea raw URL instead:
+```
+PAPERLESS_APP_LOGO=https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/icon.svg
+```
@@ -0,0 +1,15 @@
+# Uptime Kuma branding — SMK
+
+## What's supported
+- Custom theme CSS: Settings → Appearance → Custom CSS (or drop theme in `/app/data/themes/`).
+- Custom logo: replace `config/icon.svg` in the Uptime Kuma data dir.
+
+## Assets
+- `smk-kuma.css` — dark SMK theme CSS (paste into Settings → Appearance → Custom CSS).
+- Logo: `../../assets/icon.svg`.
+
+## Apply (cosmetic only)
+1. Settings → Appearance → check "Dark" theme, paste `smk-kuma.css` into Custom CSS box → Save.
+2. Replace logo: copy `assets/icon.svg` to Kuma's `config/icon.svg` (or via compose bind mount).
+
+No monitors, notifications, or auth configs are touched.
@@ -0,0 +1,18 @@
+/* SMK Family — Uptime Kuma dark theme
+   Paste into Settings → Appearance → Custom CSS */
+:root {
+  --color-background: #14161B;
+  --color-card: #232838;
+  --color-card-hover: #2A3040;
+  --color-text: #F5F0E6;
+  --color-text-secondary: #B9B2A6;
+  --color-border: #333A4A;
+  --color-primary: #F2A65A;
+  --color-primary-hover: #E8755D;
+  --color-success: #A3C585;
+  --color-danger: #D98A8A;
+}
+body {
+  background: var(--color-background) !important;
+  color: var(--color-text) !important;
+}