4.6. Configuring the Theme for Drupal 8, Drupal 9

Last updated January 7, 2022


Edit the settings of the default core Bartik theme to change the color scheme and to add a logo.

Prerequisite knowledge

Section 1.3, “Concept: Themes”


Configuring the Theme

  1. In the Manage administrative menu, navigate to Appearance (admin/appearance).
  2. Under Installed themes, you will find Bartik listed as your default theme. Under Bartik (default theme), click Settings.

    Default theme, Bartik

  3. Under Color scheme, click inside each color build box and type the proper color codes you would like to add. For example, use the following colors:

    Area Color

    Header background top

    #7db84a (green)

    Header background bottom

    #2a3524 (dark green)

    Main background

    #ffffff (white)

    Sidebar background

    #f8bc65 (light orange)

    Sidebar borders

    #e96b3c (orange)

    Footer background

    #2a3524 (dark green)

    Title and slogan

    #ffffff (white)

    Text color

    #000000 (black)

    Link color

    #2a3524 (dark green)

    Note: You can also use the color wheel on the right to select colors of your choice. The web color codes will be added for you.

    Updated color specifications in the core Bartik theme

  4. Under Logo image, uncheck Use the logo supplied by the theme.

    New logo in core Bartik theme settings

  5. Under Upload logo image, locate a logo file and upload it to your site. Note: You can also set a universal logo for all themes under Appearance > Settings (admin/appearance/settings). A custom logo for your theme will override the universal logo.

    Once you have selected the file you would like to upload, you will see its filename next to the Choose File or Browse button in your browser.

  6. In order to save your changes and see the updated colors and logo on your site, click Save configuration at the bottom of the page.

    Note: Under Color scheme, there is a Preview section that displays a sample of how your website will look with the new settings.

    core Bartik theme settings preview

  7. Click Return to site or Home in the toolbar to verify that you have updated the core Bartik theme settings for your website.

    Final result of editing the core Bartik theme settings - colors and logo

Expand your understanding