Customizing App Themes in Qödiak: Quick Actionable Guide

Whether you’re launching a health‑clinic portal or an e‑commerce showcase, the look and feel of your Qödiak app can make or break first impressions. In this tutorial you’ll discover how to pick a preset theme, adjust colors and typography, inject brand assets, and verify responsiveness—all in under ten minutes. Follow the actionable steps, copy the example snippets, and watch your app transform from generic to uniquely yours.

1. Understanding Qödiak’s Theme System

Qödiak ships with 12 industry‑specific theme presets (Wedding, SaaS, Luxury, Health, Food, Kids, Portfolio, E‑commerce, Corporate, Real Estate, Education, Dark Tech). Each preset defines:

• Color palette – primary, secondary, accent, background, and text colors.
• Typography – font families, sizes, line‑height, and heading hierarchy.
• Breakpoint definitions – how components rearrange on mobile, tablet, and desktop.
• Component styling – default button shapes, card shadows, and navigation bar layouts.

Because the themes are built on Qödiak’s Puck visual page builder, any change you make is instantly reflected across all pages that use the same component type.

2. Selecting and Applying a Preset Theme

2.1 Open the Theme Picker

1. Log in to your Qödiak dashboard and open the app you want to style.
2. Click the Design tab on the left‑hand menu.
3. Under Theme Presets, browse the 12 options. Hover over each thumbnail to see a live preview.

Tip: Choose a preset that already matches your industry – it saves you from redefining dozens of component defaults.

2.2 Apply the Theme

1. Select the desired preset (e.g., Health for a clinic app).
2. Click Apply Theme. Qödiak instantly re‑renders every page with the new palette and typography.
3. Publish a quick preview (use the Deploy button) to see the changes in a live URL like https://clinic.qod.io.

At this point you have a fully functional, industry‑aligned UI without writing a line of code.

3. Fine‑Tuning Colors, Typography, and Layout

3.1 Override the Primary Palette

Most brands have a specific primary color. Qödiak lets you replace the preset color with your brand hex code:

• Navigate to Design → Colors.
• Find the Primary swatch and click it.
• Enter your hex value (e.g., #2A9D8F for a teal brand).
• Save – all buttons, links, and accent elements update automatically.

3.2 Adjust Typography for Brand Voice

Qödiak supports Google Fonts out of the box. To switch from the default “Inter” to a more formal “Merriweather”:

1. Open Design → Typography.
2. Select Heading Font and choose Merriweather from the dropdown.
3. Do the same for Body Font – you might prefer Open Sans for readability.
4. Preview the change on any page; heading sizes adjust proportionally.

3.3 Tweak Component Spacing

Sometimes the preset’s default padding feels too tight. Use the Spacing panel to adjust margin and padding for specific component categories:

• Cards – increase Padding from 12px to 20px for a more spacious look.
• Buttons – set Border‑Radius to 8px for a softer, modern feel.
• Navbar – raise the Height to 70px to accommodate a larger logo.

All adjustments are saved at the app level, so every page that uses a Card component inherits the new spacing.

4. Adding Custom Branding Assets

4.1 Upload a Logo and Favicon

Brand recognition starts with a logo. Qödiak’s Branding section lets you upload both a logo (for the navbar) and a favicon (browser tab icon):

1. Go to Design → Branding.
2. Click Upload Logo and choose a transparent PNG (recommended width ≈ 200 px).
3. Upload a 32 × 32 px favicon.
4. Save – the navbar updates instantly, and the favicon appears on every published page.

4.2 Insert a Background Image

For landing pages you may want a full‑width hero image. Use the Image component with the following settings:

• Set Width to 100% and Height to auto (or a fixed vh value like 80vh).
• Enable Overlay and choose a dark semi‑transparent shade (#00000080) to keep text readable.
• Place a Heading and Button component on top of the image using the Flex layout.

Because Qödiak’s layout engine is fluid, the hero image automatically scales on mobile devices.

4.3 Inject Custom CSS for Edge Cases

Occasionally a preset does not expose a specific style (e.g., a unique hover animation). Qödiak allows a small block of custom CSS at the app level:

<style>
  /* Add a subtle glow to primary buttons */
  .qod-button-primary:hover {
    box-shadow: 0 0 10px rgba(42, 157, 143, 0.6);
  }
</style>

Paste the snippet into Design → Custom CSS. The rule is sandboxed, so it only affects the current app and does not interfere with other Qödiak projects.

5. Testing Responsiveness and Publishing

5.1 Use the Built‑In Device Preview

Qödiak’s visual builder includes a device toggle (Desktop, Tablet, Mobile). Click each icon to see how your theme behaves. Pay attention to:

• Text truncation – ensure headings wrap instead of cutting off.
• Button tap targets – keep a minimum height of 44px for finger usability.
• Navigation – confirm the hamburger menu appears on screens narrower than 768px.

5.2 Run a Quick SEO Check

Even though theme changes are visual, they affect SEO signals like title hierarchy and image alt attributes. Verify that:

1. Every page has a unique <h1> (Qödiak lets you set the page title in Page Settings).
2. All hero images include descriptive alt text.
3. The generated sitemap.xml (e.g., https://clinic.qod.io/sitemap.xml) lists the updated URLs.

5.3 Publish to a Custom Domain

If you have a Pro plan, map your app to a branded domain with SSL:

1. Navigate to Settings → Custom Domain.
2. Enter your domain (e.g., app.myclinic.com) and follow the DNS instructions.
3. Click Enable SSL. Qödiak provisions a free certificate automatically.
4. Hit Deploy. Your freshly themed app is now live at the custom URL.

Because the theme lives in the app’s configuration, any future updates you make in the builder are reflected instantly on the custom domain.

Conclusion: Your Theme, Your Brand, In Minutes

Customizing an app theme in Qödiak is a three‑step loop: pick a close‑fit preset, overwrite the brand colors, typography, and assets, then validate responsiveness before publishing. The platform’s visual editor, built‑in color picker, and custom‑CSS slot let you achieve a professional look without touching code.

Start now: open a blank Qödiak app, apply the Corporate preset, replace the primary color with #1E3A8A, upload your logo, and hit Deploy. In under ten minutes you’ll have a branded, mobile‑ready web app ready for customers.

Ready to level up your no‑code projects? Explore Qödiak’s form components, add a chatbot for instant support, and connect external APIs for dynamic data. Your custom theme is just the first step toward a full‑featured, AI‑generated application.