Customizing Your Manga Theme: CSS Variables & Design Tips

The Power of CSS Variables

MangaReader Pro uses CSS custom properties (variables) extensively, making it incredibly easy to customize your site's appearance without touching component code.

Core Color Variables

Here are the main variables you can override:

:root {
--color-primary: #6C3CE1;
--color-secondary: #FF6B6B;
--color-accent: #4ECDC4;
--color-dark: #1A1A2E;
--color-surface: #F8F9FC;
--color-border: #E2E8F0;
}

Changing Your Color Scheme

Dark Theme

For a dark manga reader, override the surface and background colors:

:root {
--color-dark: #0D0D0D;
--color-surface: #1A1A1A;
--color-border: #333333;
}

Warm Theme

For a cozy, warm feel:

:root {
--color-primary: #D4A373;
--color-surface: #FEFAE0;
--color-border: #DDA15E;
}

Typography Customization

Change the heading and body fonts to match your brand:

:root {
--font-heading: 'Poppins', sans-serif;
--font-body: 'Inter', sans-serif;
}

Popular font pairings for manga sites:

• Poppins + Inter — Modern and clean
• Outfit + DM Sans — Friendly and approachable
• Space Grotesk + Work Sans — Technical and sharp

Reader Mode Customization

Customize the reading experience with these variables:

.reader-container {
--reader-bg: #1a1a1a;
--reader-max-width: 800px;
--reader-gap: 0px; /* For long-strip mode */
--reader-padding: 0;
}

Tips for Great Design

• Contrast is key — Ensure text is readable against backgrounds
• Limit your palette — 2-3 colors maximum for a professional look
• Whitespace matters — Don't crowd elements together
• Test on mobile — Always preview changes on a phone

Conclusion

CSS variables make theming fast and reversible. Experiment freely — you can always reset to defaults!