App Themes & Visual Customization in Qödiak

Qödiak’s theming engine lets you shape the entire visual identity of your app without writing a line of CSS. From core brand colors to sophisticated gradients and dark‑mode support, every visual element can be tuned to match your audience and industry.

Why Themes Matter

Consistent visual styling builds trust, reinforces brand personality, and improves usability. In Qödiak, a theme is a single source of truth that drives colors, typography, spacing, shadows, and more across all components. Changing a theme instantly updates every button, form, and page, ensuring a cohesive look and feel.

Theme Properties

Core Colors (Required)

Every theme must define five core colors. These are the foundation for all UI elements:

• Primary Color – Used for main brand actions such as buttons, links, and active states.
• Secondary Color – Applies to secondary elements and dark sections.
• Background Color – Sets the page background.
• Text Color – Default color for body copy.
• Accent Color – Highlights, badges, and special UI pieces.

Typography

Qödiak lets you choose a primary font for body text and an optional heading font for titles. Additional typographic controls include weight, letter spacing, and line height.

• Font Family – Examples: Inter, Nunito, JetBrains Mono.
• Heading Font Family – Optional; e.g., Playfair Display for elegant headings.
• Heading Weight – Ranges from 300 (thin) to 700 (bold).
• Body Weight – Choose 300, 400, or 500.
• Letter Spacing – Options: tight, normal, or wide.

Visual Depth

Depth cues such as shadows, border radius, and spacing help users perceive hierarchy and interactivity.

• Shadow Intensity – none, subtle, moderate, or strong.
• Border Radius – Controls corner roundness (0 px = sharp, 24 px = very rounded).
• Spacing Scale – Choose compact, comfortable, spacious, or luxurious to affect padding and margins globally.

Gradients

Animated gradient backgrounds are defined by a start and end color. These can be applied to page sections, hero banners, or form containers for a modern, dynamic look.

Form Backgrounds

Forms can inherit the app’s background or have a dedicated style:

• Form Background Type – none, solid, gradient, or image.
• When using an image, you can add a blur effect and an overlay color to keep input fields readable.
• Background Position – center, top, or bottom.

Dark Mode

Each theme includes a Mode setting (light or dark). Qödiak automatically derives appropriate contrast colors for dark mode, so you only need to define the light palette; the system generates the dark counterpart.

12 Industry Theme Presets

Qödiak ships with twelve curated presets that match common app categories. Selecting a preset gives you a ready‑made visual foundation that you can further tweak.

1. Wedding & Romance – Champagne gold primary, blush pink secondary, Playfair Display serif headings, luxurious spacing.
2. SaaS & Technology – Purple‑cyan gradient, tight letter spacing, modern rounded corners.
3. Luxury & Premium – Dark background, gold accents, Cormorant Garamond headings, strong shadows.
4. Health & Wellness – Emerald green primary, mint‑white background, spacious layout for a calming feel.
5. Food & Restaurant – Appetite‑stimulating red, warm cream background, Playfair Display headings.
6. Kids & Playful – Pink/violet gradient, Nunito font, very rounded corners (24 px).
7. Portfolio & Creative – Black/white minimal palette, orange accent, sharp 0 px corners, no shadows.
8. E‑commerce & Retail – Sky blue primary, amber CTAs for sales, moderate shadows for trust.
9. Corporate & Enterprise – Professional blue, emerald accent, subtle shadows.
10. Real Estate – Teal primary, gold‑ish accent, Playfair Display headings, spacious layout.
11. Education & Learning – Indigo primary, amber accent, rounded corners, approachable vibe.
12. Dark Mode Tech – Cyan/violet on dark slate, JetBrains Mono font, strong shadows.

How Themes Work in Qödiak

• AI‑Driven Selection – When you start a new project, Qödiak’s AI analyses the app’s purpose and target audience, then suggests the most suitable preset.
• CSS Custom Properties – Themes are compiled into --variable definitions (e.g., --primary-color, --border-radius) that are injected into the global stylesheet.
• Component Responsiveness – All built‑in components read these variables, so a change to --primary-color instantly updates every button, link, and badge.
• Visual Editor Overrides – The visual editor lets you edit any property. Overrides are stored as additional CSS variables that take precedence over the preset values.
• Computed Values – Hover states, light variants, and shadow calculations are generated automatically based on the core colors you define.

Customizing a Theme – Step‑by‑Step Guide

1. Open the Visual Editor – From the Qödiak dashboard, select Design > Theme.
2. Choose a Starting Preset – Pick the industry preset that most closely matches your brand.
3. Set Core Colors
   1. Click the color swatch for Primary Color and enter your brand hex code.
   2. Repeat for Secondary, Background, Text, and Accent.
4. Adjust Typography
   1. Select a Font Family for body text (e.g., Inter).
   2. If desired, set a different Heading Font Family (e.g., Playfair Display).
   3. Choose Heading Weight and Body Weight to match your brand tone.
   4. Pick Letter Spacing – tight for tech, wide for luxury.
5. Define Visual Depth
   1. Set Shadow Intensity (e.g., moderate for corporate apps).
   2. Adjust Border Radius – 0 px for sharp, 24 px for playful.
   3. Choose a Spacing Scale that matches the content density you need.
6. Configure Gradients (Optional)
   1. Enter a Gradient Start and End color.
   2. Preview the animated background on the hero section.
7. Set Form Backgrounds
   1. Select Form Background Type – gradient works well for modern sign‑up forms.
   2. If using an image, upload it, then apply a blur (e.g., 8 px) and an overlay color for readability.
   3. Choose the Background Position that best frames the image.
8. Enable Dark Mode
   1. Toggle the Mode switch to dark.
   2. Review the automatically generated dark palette; adjust any core color if contrast needs fine‑tuning.
9. Save & Publish – Click Save Theme. All components on your live app will reflect the new styling instantly.

Tip: When customizing a theme, start with core colors and typography first. Visual depth and gradients are best adjusted after you see how text and buttons look together.

Practical Use Cases

Wedding Planning App

Using the Wedding & Romance preset, the designer kept the champagne gold primary color for CTA buttons, blush pink for secondary accents, and Playfair Display headings. By increasing the Spacing Scale to luxurious and setting Border Radius to 12 px, the app feels elegant yet approachable. Dark mode was disabled because the brand prefers a light, airy aesthetic.

SaaS Dashboard for a Tech Startup

The SaaS & Technology preset provided a purple‑cyan gradient background and tight letter spacing. The team changed the Primary Color to match their logo, set Shadow Intensity to subtle, and kept the default rounded corners (8 px). Enabling dark mode gave developers a comfortable night‑time view, with Qödiak automatically generating a dark palette that preserved contrast.

Kids Learning Game

Starting from the Kids & Playful preset, the creators switched the Primary Color to a brighter pink, kept the violet gradient, and set Border Radius to the maximum 24 px for a friendly, bubble‑like UI. They added a Form Background Type of image with a blurred cartoon backdrop, ensuring the input fields stayed legible.

Real Estate Listings Portal

For a property‑search platform, the Real Estate preset offered a teal primary with gold accents. The team opted for Heading Font Family Playfair Display to convey sophistication, and chose a Spacing Scale of spacious to give listings room to breathe. Dark mode was enabled for agents who work late hours, and the automatically derived dark palette kept the gold accent visible.

Best Practices for Consistent Branding

• Limit Color Variations – Stick to the five core colors; use shades generated by Qödiak for hover and disabled states.
• Maintain Typography Hierarchy – Use the same Heading Font Family across all pages; reserve the body font for paragraphs and form fields.
• Balance Visual Depth – Strong shadows pair well with dark backgrounds, while subtle shadows suit light, spacious layouts.
• Test Dark Mode Early – Verify contrast ratios for text and interactive elements before publishing.
• Leverage the Visual Editor – Small tweaks (e.g., increasing Border Radius by 2 px) can dramatically improve perceived friendliness without redesigning the whole theme.

Conclusion

Qödiak’s theming system empowers you to create a distinctive visual identity quickly, whether you start from an industry preset or build a custom palette from scratch. By mastering core colors, typography, visual depth, gradients, and dark‑mode handling, you can ensure every screen, component, and interaction feels intentional and on‑brand.