Customization 8 min read

Customizing Your Template's Theme

Learn how to change colors, fonts, logos, and layout in your DrupalReady template theme.

Theme File Structure

Each template theme is located at web/themes/custom/drupalready_{template}/. The structure includes:

css/base/variables.css — Colors, fonts, spacing
css/components/ — Individual component styles
css/layout/ — Page layout rules
templates/ — Twig template overrides
js/ — JavaScript behaviors

Changing Colors

Open css/base/variables.css and modify the CSS custom properties:

css
:root {
  --color-primary: #your-brand-color;
  --color-primary-dark: #darker-shade;
  --color-primary-light: #lighter-shade;
}

All components use these variables, so one change updates everything.

Changing Fonts

Update the --font-sans and --font-serif variables in variables.css. If using Google Fonts, add the font import to your theme's .libraries.yml file.

Updating the Logo

Go to Appearance > Settings in the Drupal admin. Upload your logo file. For code-level changes, replace the logo.svg file in your theme's root directory.

Overriding Templates

To customize markup, copy any Twig template from Drupal core or a module into your theme's templates/ directory with the same filename. Enable Twig debug in development to see which templates are in use.