Creating a New Theme

1. Duplicate themes/default/ → themes/my-theme/
2. Edit themes/my-theme/theme.json:

   {
     "name": "My Theme",
     "slug": "my-theme",
     "version": "1.0.0",
     "author": "Your Name",
     "description": "Custom theme for QAFlow",
     "supports_dark_mode": true
   }

3. Admin → Appearance → Theme → select "My Theme"

CSS Overrides

Edit themes/my-theme/assets/css/theme.css. Use CSS variables defined in core:

:root {
  --brand-color: #5b3df5;
  --accent-color: #22c4a3;
  --bg-color: #ffffff;
  --text-color: #1a1d29;
  --border-color: #e5e7ef;
}

[data-theme="dark"] {
  --bg-color: #0f1226;
  --text-color: #e7eaf6;
}

Page Template Overrides

To replace a specific page's markup:

1. Copy includes/templates/question.php → themes/my-theme/templates/question.php
2. Edit it — use variables like $question, $answers, $user already defined
3. QAFlow auto-loads your override when the theme is active

Override paths: themes/{theme-slug}/templates/{page-name}.php

Hooks & Filters

QAFlow has a simple hooks system in includes/hooks.php:

// In your theme's functions.php
add_action("after_question_save", function($question_id) {
    // Log to analytics, send webhook, etc.
});

add_filter("question_title", function($title, $question_id) {
    return "[Community] " . $title;
}, 10, 2);

Packaging for Distribution

If you want to sell or share your theme:

1. Zip the themes/my-theme/ folder
2. Include: theme.json, CSS, templates, screenshots, readme.txt
3. Recipients upload via Admin → Appearance → Upload Theme

Mobile Responsiveness

All core CSS uses a mobile-first approach. Breakpoints:

• @media (max-width: 600px) — phones
• @media (max-width: 900px) — tablets
• @media (max-width: 1100px) — small laptops

Test at each breakpoint using Chrome DevTools device toolbar.