While themes come with their own predefined color sets that you can choose from, you may want to select some custom colors for your site. Check out the instructions below as we guide you on how to customize theme colors in Drupal 8.

How to customize theme colors in Drupal 8

  1. Log into your Drupal 8 administrative dashboard.
  2. click on the Menu itemSelect Menu from the top menu bar.
  3. select the Appearance optionNext, click on Appearance from the secondary menu that appears.
  4. the configuration screen for the moduleYou will now be on the main Appearance page where you will see a list of all the themes that are available. Find the theme you want to work with and click on the Settings link for that theme. In our example, we will be working with our active theme, Bartik.
  5. the configuration screen for the moduleFrom the theme settings page you will see a Color Scheme section at the top containing a color wheel and several fields that have hexadecimal codes in them for colors. These fields can be altered by either typing new codes or by using the color wheel to the right to select a color after clicking on the field you want to alter. There are also small lock icons that you can click. By 'locking' two fields together, they both will change as you alter the color, keeping them in proper contrast. In our example, we altered the Header background top for the Bartik theme from the original #0779bk to a more purplish #722cf5. You can see how your color change will look with the Preview section just below the fields.
  6. Once you have completed the color changes, click on the Save Configuration button at the bottom to save and activate your new settings. Below are before and after screenshots of the changes we made in our example.
    BeforeAfter
    the configuration screen for the modulethe configuration screen for the module
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2173
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5571

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!