How To Use Our Switchable Color Scheme WordPress Themes

This article is designed to serve as a comprehensive tutorial for our innovative concept of switchable color schemes, which is a key feature of our WordPress themes. The feature provides the capability to website owners, allowing the application of accessible colour schemes to WordPress websites, using few customizers clicks. For a detailed description of this concept, please visit What is a Switchable Color Scheme WordPress Theme?

Objectives of the Tutorial

Upon digesting this article, you will have an understanding of:

• How to assign a colour scheme to your website, picking from an ample selection of over 500 color schemes in our switchable color scheme WordPress themes.
• How to implement a unique color scheme using your custom color palette.
• Advanced use cases for adapting any content on your website to use your active color scheme, including content from plugins and third-party developers.

Let’s get started!

Prerequisite Knowledge

• To select and publish one of our theme’s predefined color schemes, basic knowledge of administering WordPress customizers in your WordPress admin is assumed.
• Optionally, if implementing a unique custom color scheme, knowledge of combining colors to achieve an accessible color scheme would prove advantageous. The custom color scheme will be applied in WordPress customizers, as discussed below.
• Ultimately, if you intend to implement the steps in the Advanced customization sections below, basic knowledge of CSS, accessing and editing the CSS files of your WordPress theme is assumed.

Installation and Setup

This tutorial assumes you have one of our WordPress themes installed and activated on your website. Should you require assistance installing your theme, please locate the relevant documentation here.

How to Choose a Predefined Color Scheme

1. In the WordPress dashboard, navigate to Appearance > Customize.
2. Select Typography (theme options) from the customizers panel.
3. Then, select Switch Color Scheme.
4. In the Switch Color Schemes section, browse the available options.
5. Select a scheme that fits your site’s design and branding.
6. When satisfied, click Publish to apply your selection.

How to Apply a Custom Color Palette

1. In the WordPress dashboard, navigate to Appearance > Customize.
2. Select Typography (theme options) from the customizers panel.
3. Then, select Set Custom Color Palette.
4. In the Set Custom Color Palette section, set each color field.
5. The current page will reflect your changes simulataneously.
6. When satisfied, click Publish to apply your changes.

Tips for Choosing Color Combinations

• Provide adequate color contrast between text and background for readability.
• Consider color theory principles to ensure your colors are harmonious.
• Test your color scheme on different devices and lighting conditions.
• You could use tools like the WAVE Web Accessibility Evaluation Tool to verify your changes.

Limitations of the Custom Color Palette

• It can only be applied to the theme’s default color scheme. For example, if your theme is originally designed using say monochromatic color scheme, although you will successfully change the exact colors from say black monochromatic to blue monochromatic, you will not be able to change it to say a Triadic color scheme
• To overcome this limitation, utilize the color scheme switcher to select a predefined color scheme.

Advanced Customization

For users with CSS knowledge, further customization can be achieved. You can override relevant CSS selectors in your child theme or in the additional CSS customizer.

If implementing your solution in a the child theme, simply open your style.css file in your favourite editor and add your custom CSS code.

If utilizing the WordPress additional CSS customizer, please complete the following steps:

1. Navigate to Appearance > Customize > Additional CSS.
2. Add your custom CSS code to the provided box.
3. Publish your changes.

Consider using tools like CSS custom properties (variables) for more efficient and maintainable code.

Compatibility with Plugins

Our switchable color scheme feature is readily compatible with WooCommerce. But you may wonder how to adapt other plugins on your website. This section provides a guide for implementing CSS customization to achieve compatibility with any content on your website. First, you need to download, install, and activate a child theme. Your customizations should never be applied directly in your theme as it may be overwritten during upgrade.

Please download the relevant child theme, if you have not already done so.

• Open the style.css of your child theme in your IDE.
• Add your custom CSS codes.

Troubleshooting and Resolving Common Issues

If your chosen color scheme does not switch accordingly, try the following.

• Ensure you have published your changes in the customizer.
• Save any unsaved changes. Clear your browser cache and cookies for your website. Login again and refresh the page.
• Check for conflicts with other plugins or custom code.
• Disable the color scheme switcher and re-enable it.

Frequently Asked Questions

Does the switcher require any third-party plugin?

No, it is entirely integrated into the themes.

Do I need the knowledge of colour combinations to use it?

The heavy lifting has been done for you. You simply need to login into your WordPress admin and select relevant customizers to switch your site’s global color scheme.

Wrap Up

In this tutorial, we’ve covered the essential steps to install, configure, and customize our switchable color scheme WordPress themes. We discussed how to access and customize color scheme settings, implement custom color scheme on your website and troubleshoot common challenges.