{"id":2902,"date":"2013-10-18T13:43:00","date_gmt":"2013-10-18T17:43:00","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/10\/18\/customize-colors\/"},"modified":"2021-08-16T23:10:41","modified_gmt":"2021-08-17T03:10:41","slug":"customize-colors","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/","title":{"rendered":"Customizing theme colors in Drupal 8"},"content":{"rendered":"

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.<\/p>\n

How to customize theme colors in Drupal 8<\/h2>\n
    \n
  1. Log into your Drupal 8 administrative dashboard<\/a>.\n
    <\/div>\n<\/li>\n
  2. \"select<\/a>\n
    <\/div>\n

    Select Menu<\/strong> from the top menu bar.<\/p>\n

    <\/div>\n<\/li>\n
  3. \"select<\/a>\n
    <\/div>\n

    Next, click on Appearance<\/strong> from the secondary menu that appears.<\/p>\n

    <\/div>\n<\/li>\n
  4. \"the<\/a>\n
    <\/div>\n

    You will now be on the main Appearance<\/em> 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<\/strong> link for that theme. In our example, we will be working with our active theme, Bartik<\/em>.<\/p>\n

    <\/div>\n<\/li>\n
  5. \"the<\/a>\n
    <\/div>\n

    From the theme settings page you will see a Color Scheme<\/em> 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 \u2018locking\u2019 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<\/em> for the Bartik<\/em> theme from the original #0779bk<\/em> to a more purplish #722cf5<\/em>. You can see how your color change will look with the Preview<\/em> section just below the fields.<\/p>\n

    <\/div>\n<\/li>\n
  6. Once you have completed the color changes, click on the Save Configuration<\/strong> 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.
    \n\n\n\n<\/tr>\n
    Before<\/th>\nAfter<\/th>\n<\/tr>
    \"the<\/a>\n
    <\/div>\n<\/td>\n
    		\"the<\/a>\n
    <\/div>\n<\/td>\n<\/tr>\n\n\n<\/table>\n
    <\/div>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    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 Log into your Drupal Read More ><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[372],"tags":[],"class_list":["post-2902","post","type-post","status-publish","format-standard","hentry","category-drupal"],"acf":[],"yoast_head":"\nCustomizing theme colors in Drupal 8 | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Looking to add your own flair with theme colors? Check out this article as we show you how to customize theme colors in Drupal 8.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizing theme colors in Drupal 8 | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Looking to add your own flair with theme colors? Check out this article as we show you how to customize theme colors in Drupal 8.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-18T17:43:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:10:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\" \/>\n<meta name=\"author\" content=\"Scott Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Scott Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/\"},\"author\":{\"name\":\"Scott Mitchell\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\"},\"headline\":\"Customizing theme colors in Drupal 8\",\"datePublished\":\"2013-10-18T17:43:00+00:00\",\"dateModified\":\"2021-08-17T03:10:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/\"},\"wordCount\":297,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\",\"articleSection\":[\"Drupal\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/\",\"name\":\"Customizing theme colors in Drupal 8 | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\",\"datePublished\":\"2013-10-18T17:43:00+00:00\",\"dateModified\":\"2021-08-17T03:10:41+00:00\",\"description\":\"Looking to add your own flair with theme colors? Check out this article as we show you how to customize theme colors in Drupal 8.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png\",\"width\":429,\"height\":49,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizing theme colors in Drupal 8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed\",\"name\":\"Scott Mitchell\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customizing theme colors in Drupal 8 | InMotion Hosting","description":"Looking to add your own flair with theme colors? Check out this article as we show you how to customize theme colors in Drupal 8.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/","og_locale":"en_US","og_type":"article","og_title":"Customizing theme colors in Drupal 8 | InMotion Hosting","og_description":"Looking to add your own flair with theme colors? Check out this article as we show you how to customize theme colors in Drupal 8.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-10-18T17:43:00+00:00","article_modified_time":"2021-08-17T03:10:41+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","type":"","width":"","height":""}],"author":"Scott Mitchell","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Scott Mitchell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/"},"author":{"name":"Scott Mitchell","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed"},"headline":"Customizing theme colors in Drupal 8","datePublished":"2013-10-18T17:43:00+00:00","dateModified":"2021-08-17T03:10:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/"},"wordCount":297,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","articleSection":["Drupal"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/","name":"Customizing theme colors in Drupal 8 | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","datePublished":"2013-10-18T17:43:00+00:00","dateModified":"2021-08-17T03:10:41+00:00","description":"Looking to add your own flair with theme colors? Check out this article as we show you how to customize theme colors in Drupal 8.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_Drupal-8__common-images_select-menu.png","width":429,"height":49,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/drupal\/customize-colors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Customizing theme colors in Drupal 8"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/d850efb28ef3573db7d24b0d8fa9eaed","name":"Scott Mitchell","url":"https:\/\/www.inmotionhosting.com\/support\/author\/scott\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=2902"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2902\/revisions"}],"predecessor-version":[{"id":84472,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2902\/revisions\/84472"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}