ArcBlock is excited to introduce Theming, our new visual theme editor that puts the power of professional color and typography design at your fingertips. Whether you want to match your brand colors, enhance readability, or create a more engaging visual experience, Theming allows you to customize your website's appearance without requiring any technical knowledge.
Note: Theming functionality requires administrator privileges.
What is Theming?#
Theming is a visual editor focused on what matters most for your website's appearance: colors and typography. It's designed to help you build cohesive, professional color schemes and choose fonts that enhance readability and define your brand's voice.
The interface is divided into three intuitive areas:
- Top Header: Save your changes, switch between themes, and access other quick actions.
- Left Panel: This is your control center for customizing colors, fonts, and styles.
- Right Panel: Your live preview, where you see every change come to life instantly.
A Complete Transformation: Discuss Kit Forum#
Let's see Theming in action. We'll take the standard Discuss Kit forum and transform its colors and typography from its default appearance into something truly special—a vibrant, engaging design that reflects a modern community.
Step 1: Getting Started#
Access Theming from your admin dashboard by navigating to Dashboard → Website → Theming. The editor will load with your current website in the live preview panel. For the Discuss Kit, you'll see the forum with its default white background, black text, and standard green accents.
Step 2: The Color Transformation#
The first section in the left panel is Color. Instead of confusing hex codes, you’ll find intuitive color blocks representing different elements of your website: primary colors for buttons and links, secondary colors for accents, and neutral colors for text and backgrounds.
Let's create a more engaging color scheme for the Discuss Kit. Click the primary color block to open a powerful color picker. You can choose from predefined palettes, use a color wheel, or input your specific brand colors. As you select colors, the preview panel updates in real-time. You can also toggle between light and dark modes to ensure your theme looks perfect in any environment.
As you select colors, the preview panel updates instantly. You can also switch between light and dark modes to see how your theme looks in different environments.
Step 3: Typography That Speaks#
Next, let's perfect the typography. The Typography section gives you access to thousands of Google Fonts, complete with live previews that show you exactly how they'll look on your site.
For a forum like the Discuss Kit, you'll want fonts that are modern and highly readable. Select a clean, sans-serif font for headings to grab attention and a complementary, easy-to-read font for body text. The preview immediately shows how these choices impact readability across your entire site.
Step 4: The Finishing Touches#
For a final touch of polish, adjust the border radius. This simple slider allows you to give buttons, cards, and containers a modern, slightly rounded appearance. The live preview helps you find the perfect balance between sharp and soft corners instantly
Step 5: The Big Reveal#
Once you're happy with your color and typography adjustments, just click the Save button. Your new theme is applied to your live website instantly. No waiting, no deployment queues, and no technical hurdles.
Why Theming Works for Everyone#
What makes Theming so powerful is its simplicity. It's built for everyone, not just designers and developers. Here’s why it works so well:
- Real-Time Preview: Every change is instantly visible. What you see is what you get.
- Visual Controls: You work with intuitive visual elements, not complex code or settings.
- Smart Defaults: The system provides intelligent starting points, so you're never building from scratch.
- No Code Required: You don't need to understand CSS, color theory, or web development to create a beautiful and professional website.
Go Further with Theming#
While this example covers the basics, Theming offers even more for power users. You can create and save multiple themes for different seasons or campaigns and use advanced features like keyboard shortcuts to speed up your workflow.
Ready to get started?
- Explore the Docs: For detailed technical information and advanced features, check out our comprehensive Theming Documentation.
- Share Your Feedback: Have suggestions or questions? Visit the ArcBlock Community to share your thoughts. We're here to help!
- Help Us Improve: Join our Bug Bounty program to help us find issues and enhance Theming for everyone.