Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/hxmz-axfn07/qr-printing-sfw/llms.txt

Use this file to discover all available pages before exploring further.

The customer-facing UI — the home page, upload form, and order success page — uses CSS custom properties for all color values. These custom properties are injected server-side on every request so colors stay in sync with your configuration without requiring a build step or cache bust. You can change your brand colors in config.yml or, for the primary accent, directly through the database settings table.

​
How theming works

Every time the server renders an HTML page it calls html_response() in server/app.py. This function reads the active theme configuration, builds a <style> block containing the three CSS custom property values, and injects it into the <head> of the page: 
style = "\n".join(
    [
        ":root {",
        f"  --accent: {theme.get('accent', '#166a5b')};",
        f"  --accent-2: {theme.get('accent_2', '#e2b23c')};",
        f"  --bg: {theme.get('background', '#f6f7f2')};",
        "}",
    ]
)
The injected block overrides the static defaults declared at the top of client/styles.css, ensuring that whatever values are in your configuration are the ones browsers use.

​
CSS custom properties

client/styles.css references three theming custom properties. All other colors used by the stylesheet (ink, muted text, borders, panels, danger red) are fixed and are not affected by theme configuration.
VariableDefaultDescription
--accent#166a5bPrimary action color — used on primary buttons, active states, links, the eyebrow text on the home page, and the file-drop border on the upload form.
--accent-2#e2b23cSecondary accent color — used for highlights and badges throughout the interface.
--bg#f6f7f2Page background color applied to the <body> element.

​
Configuring colors

There are two ways to set theme colors. Use config.yml for all three variables; use the database only when you want to change the primary accent at runtime without editing files.

​
Option 1 — Edit config.yml

Add or update the theme section in the project-root config.yml: 
theme:
  accent: "#1a73e8"
  accent_2: "#fbbc04"
  background: "#ffffff"
All three variables can be set here. Values are read on every request so the change takes effect immediately — no restart required.

​
Option 2 — Override accent via the database

For the primary accent color only, you can set the theme_accent key in the MySQL settings table: 
UPDATE settings SET setting_value = '#1a73e8' WHERE setting_key = 'theme_accent';
If the row does not exist yet, insert it: 
INSERT INTO settings (setting_key, setting_value)
VALUES ('theme_accent', '#1a73e8');
The database value is applied by apply_db_settings() after config.yml is loaded, so it takes precedence over any accent value set in the file.
Only theme_accent (--accent) can be overridden through the database. The secondary accent (accent_2) and background (background) can only be changed via config.yml.

​
Color recommendations

For the best customer experience, choose a dark, saturated color for --accent so that white button labels remain readable at WCAG AA contrast ratios (minimum 4.5:1 against white). For --bg, light or off-white values (#ffffff, #f5f5f5, #f6f7f2) work well with the default ink color (#20231f). Avoid using a very light accent color — it will reduce legibility on primary buttons and the eyebrow text on the home page.

Default palette

--accent: #166a5b (dark teal)--accent-2: #e2b23c (amber)--bg: #f6f7f2 (warm off-white)

Example light palette

--accent: #1a73e8 (Google blue)--accent-2: #fbbc04 (Google yellow)--bg: #ffffff (pure white)
The admin dashboard (/admin/<token>) has its own stylesheet (server/admin/) and is not affected by any theme settings in config.yml or the settings table. Theme changes only apply to the customer-facing pages: the home page (/), the upload form (/upload), and the success page (/success).

Build docs developers (and LLMs) love

Get started for freeTalk to us