The way themes handle styles varies, which may lead to style issues in Greyd Blocks when using the Greyd Plugin together with external themes. If you are not using the Greyd Theme but decide to work with another theme, Greyd Blocks might not look like perfectly matching. However, with the Theme Adaptor we offer you a feature to ensure consistent styling for essential CSS elements like accordions, buttons, and tabs, even when the Greyd Theme isn’t active. You can customize styles by copying stylesheets into your theme. The Theme Adaptor will make sure that the relevant CSS files (root.css, button.css, inputs.css and optionally editor.css) are auto-loaded.
Download example files
We’ve made it easy for you! Download the files to get started quickly. You can also find these files in the Greyd plugin under: greyd-plugin/src/features/theme-adaptor/assets/
The zip file contains all files from this folder, which includes the files for the Ollie, Twenty Twenty-Four and Twenty Twenty-Five themes, as well as the individual files root.css, buttons.css, editor.css and input.css in the root folder.
Instructions
To implement custom Greyd Styles in your own theme, follow these steps:
Create the folder
In your theme (or child theme), create the following directory structure: /greyd/css/
Add a root.css file
Inside /greyd/css/, copy the root.css file from the downloaded zip file or create a file with that name.
Adjust the variables to match your theme
Start updating the CSS variables in the root.css file to match with your current theme. If your file is empty, copy the CSS variable definitions from down below into root.css and adjust them to fit your theme’s color scheme, font sizes, and spacing needs.
1. Colors: aligning your palette
Using Greyd’s color variables, you can map your theme’s colors to Greyd styles. For example:
CSS
--wp--preset--color--primary: #4D34FA;
--wp--preset--color--secondary: #E4E1FE;
--wp--preset--color--tertiary: #F6F6FC;Effect:
- Buttons, tabs, and other Greyd components automatically pick up these colors.
- Primary buttons might appear purple, secondary highlights could have a lavender accent, and your content areas feel light and clean.
- Mapping your colors ensures consistency across all patterns and blocks.
Example with Tabs and the Ollie Theme:
2. Spacing: matching theme layouts
Themes like Twenty Twenty-Four define spacing in a numerical system. Map these to Greyd variables for seamless integration:
CSS
--wp--preset--spacing--tiny: var(--wp--preset--spacing--10);
--wp--preset--spacing--small: var(--wp--preset--spacing--20);
--wp--preset--spacing--medium: var(--wp--preset--spacing--30);
--wp--preset--spacing--large: var(--wp--preset--spacing--40);
--wp--preset--spacing--x-large: var(--wp--preset--spacing--50);Effect:
- Adjusting these variables aligns Greyd’s spacing to your theme’s design system.
- Tiny padding areas feel cohesive with your theme’s tight margins, while larger spaces maintain consistent layouts for headings and sections.
3. Buttons: blending styles
Buttons are critical for interactions, so Greyd buttons need to match your theme’s look. For example, to blend Greyd buttons with the Ollie theme:
CSS
/* primary button */
--wp--custom--greyd--button--prim--border--color: var(--wp--preset--color--contrast);
--wp--custom--greyd--button--prim--border--radius: 9999px;
--wp--custom--greyd--button--prim--border--style: solid;
--wp--custom--greyd--button--prim--border--width: 1px;
--wp--custom--greyd--button--prim--color--background: var(--wp--preset--color--contrast);
--wp--custom--greyd--button--prim--color--text: var(--wp--preset--color--lightest);
--wp--custom--greyd--button--prim--shadow: none;Effect:
- Buttons inherit your theme’s color contrast for borders and backgrounds.
- Rounded corners and soft designs make buttons visually appealing.
- This consistency ensures Greyd buttons feel like they belong natively to your theme.
Example with Twenty Twenty-Five Buttons:
Optional – Customize buttons and inputs
For more detailed customization, you can also include buttons.css and inputs.css files. Copy both files from greyd-plugin/src/features/theme-adaptor/assets into /greyd/css/ within your theme.
These files offer additional control over button and form styles, allowing you to match the look and feel of Greyd components to your theme’s specific design.
Optional – Customize the editor experience
You can also use the editor.css if you want to fine-tune the appearance of buttons and selects in the editor. Just follow the instructions from the previous step.
References
For reference on how other themes were adapted, check the theme-specific examples inside greyd-plugin/src/features/theme-adaptor/assets . These provide a guide on customizing for themes like Ollie and Twenty Twenty-Four.
CSS
:where(:root) {
/**
* ====================================================================
* Presets
* ====================================================================
*/
/**
* Colors
*/
--wp--preset--color--primary: #4F309E;
--wp--preset--color--secondary: #F9DD61;
--wp--preset--color--tertiary: #9B82D9;
--wp--preset--color--foreground: #0e1111;
--wp--preset--color--dark: #3d3549;
--wp--preset--color--mediumdark: #9992a3;
--wp--preset--color--mediumlight: #cbc6d1;
--wp--preset--color--base: #e9e6ed;
--wp--preset--color--background: #f9f7ff;
--wp--preset--color--darkest: #000000;
--wp--preset--color--lightest: #ffffff;
--wp--preset--color--transparent: rgb(255, 255, 255, 0);
/**
* Font sizes
*/
--wp--preset--font-size--tiny: clamp(.9rem, 0.9rem +((1vw - 0.2rem)* 0.125), 1rem);
--wp--preset--font-size--small: clamp(1rem, 1rem +((1vw - 0.2rem)* 0.25), 1.2rem);
--wp--preset--font-size--base: clamp(1.13rem, 1.13rem +((1vw - 0.2rem)* 0.213), 1.3rem);
--wp--preset--font-size--medium: clamp(1.3rem, 1.3rem +((1vw - 0.2rem)* 0.375), 1.6rem);
--wp--preset--font-size--large: clamp(1.5rem, 1.5rem +((1vw - 0.2rem)* 0.625), 2rem);
--wp--preset--font-size--x-large: clamp(2rem, 2rem +((1vw - 0.2rem)* 1), 2.8rem);
--wp--preset--font-size--xx-large: clamp(2.6rem, 2.6rem +((1vw - 0.2rem)* 1.438), 3.75rem);
/**
* Font families
*/
--wp--preset--font-family--body: inherit;
--wp--preset--font-family--heading: inherit;
--wp--preset--font-family--highlight: inherit;
/**
* Spacings
*/
--wp--preset--spacing--tiny: clamp(10px, 1.5vw, 0.5rem);
--wp--preset--spacing--small: clamp(.5rem, 2.5vw, 1rem);
--wp--preset--spacing--medium: clamp(1.5rem, 4vw, 2rem);
--wp--preset--spacing--large: clamp(2rem, 5vw, 3rem);
--wp--preset--spacing--x-large: clamp(3rem, 7vw, 5rem);
/**
* ====================================================================
* Buttons
* ====================================================================
*/
/* spacing */
--wp--custom--greyd--button--spacing--padding--top: 0.66em;
--wp--custom--greyd--button--spacing--padding--right: 1.33em;
--wp--custom--greyd--button--spacing--padding--bottom: 0.66em;
--wp--custom--greyd--button--spacing--padding--left: 1.33em;
/* typography */
--wp--custom--greyd--button--typography--font-size: var(--wp--preset--font-size--base);
--wp--custom--greyd--button--typography--font-family: var(--wp--preset--font-family--body);
--wp--custom--greyd--button--typography--font-weight: var(--wp--custom--font-weight--semi-bold);
--wp--custom--greyd--button--typography--line-height: var(--wp--custom--line-height-normal);
--wp--custom--greyd--button--typography--letter-spacing: 0px;
--wp--custom--greyd--button--typography--text-transform: none;
/* small button */
--wp--custom--greyd--button--small--typography--font-size: var(--wp--preset--font-size--small);
--wp--custom--greyd--button--small--spacing--padding--top: 0.33em;
--wp--custom--greyd--button--small--spacing--padding--right: 1em;
--wp--custom--greyd--button--small--spacing--padding--bottom: 0.33em;
--wp--custom--greyd--button--small--spacing--padding--left: 1em;
/* big button */
--wp--custom--greyd--button--big--typography--font-size: var(--wp--preset--font-size--medium);
--wp--custom--greyd--button--big--spacing--padding--top: 1em;
--wp--custom--greyd--button--big--spacing--padding--right: 1.5em;
--wp--custom--greyd--button--big--spacing--padding--bottom: 1em;
--wp--custom--greyd--button--big--spacing--padding--left: 1.5em;
/* primary button */
--wp--custom--greyd--button--prim--color--background: var(--wp--preset--color--primary);
--wp--custom--greyd--button--prim--color--text: var(--wp--preset--color--lightest);
--wp--custom--greyd--button--prim--border--color: var(--wp--preset--color--primary);
--wp--custom--greyd--button--prim--border--radius: 4px;
--wp--custom--greyd--button--prim--border--style: solid;
--wp--custom--greyd--button--prim--border--width: 2px;
--wp--custom--greyd--button--prim--shadow: none;
/* hover */
--wp--custom--greyd--button--prim--hover--color--background: var(--wp--preset--color--foreground);
--wp--custom--greyd--button--prim--hover--color--text: var(--wp--preset--color--lightest);
--wp--custom--greyd--button--prim--hover--border--color: var(--wp--preset--color--foreground);
--wp--custom--greyd--button--prim--hover--border--style: var(--wp--custom--greyd--button--prim--border--style);
--wp--custom--greyd--button--prim--hover--border--width: var(--wp--custom--greyd--button--prim--border--width);
--wp--custom--greyd--button--prim--hover--shadow: var(--wp--custom--greyd--button--prim--shadow);
/* secondary button */
--wp--custom--greyd--button--sec--border--color: var(--wp--preset--color--foreground);
--wp--custom--greyd--button--sec--border--radius: 4px;
--wp--custom--greyd--button--sec--border--style: solid;
--wp--custom--greyd--button--sec--border--width: 2px;
--wp--custom--greyd--button--sec--color--background: var(--wp--preset--color--transparent);
--wp--custom--greyd--button--sec--color--text: var(--wp--preset--color--foreground);
--wp--custom--greyd--button--sec--shadow: none;
/* hover */
--wp--custom--greyd--button--sec--hover--color--background: var(--wp--preset--color--foreground);
--wp--custom--greyd--button--sec--hover--color--text: var(--wp--preset--color--lightest);
--wp--custom--greyd--button--sec--hover--border--color: var(--wp--preset--color--foreground);
--wp--custom--greyd--button--sec--hover--border--style: var(--wp--custom--greyd--button--sec--border--style);
--wp--custom--greyd--button--sec--hover--border--width: var(--wp--custom--greyd--button--sec--border--width);
--wp--custom--greyd--button--sec--hover--shadow: var(--wp--custom--greyd--button--sec--shadow);
/* tertiary button */
--wp--custom--greyd--button--trd--color--background: var(--wp--preset--color--secondary);
--wp--custom--greyd--button--trd--color--text: var(--wp--preset--color--foreground);
--wp--custom--greyd--button--trd--border--color: var(--wp--preset--color--secondary);
--wp--custom--greyd--button--trd--border--radius: 4px;
--wp--custom--greyd--button--trd--border--style: solid;
--wp--custom--greyd--button--trd--border--width: 2px;
--wp--custom--greyd--button--trd--shadow: none;
/* hover */
--wp--custom--greyd--button--trd--hover--color--background: var(--wp--preset--color--foreground);
--wp--custom--greyd--button--trd--hover--color--text: var(--wp--preset--color--lightest);
--wp--custom--greyd--button--trd--hover--border--color: var(--wp--preset--color--foreground);
--wp--custom--greyd--button--trd--hover--border--style: var(--wp--custom--greyd--button--trd--border--style);
--wp--custom--greyd--button--trd--hover--border--width: var(--wp--custom--greyd--button--trd--border--width);
--wp--custom--greyd--button--trd--hover--shadow: var(--wp--custom--greyd--button--trd--shadow);
/**
* ====================================================================
* Inputs
* ====================================================================
*/
/* spacing */
--wp--custom--greyd--input--spacing--padding--top: 0.66em;
--wp--custom--greyd--input--spacing--padding--right: 1.33em;
--wp--custom--greyd--input--spacing--padding--bottom: 0.66em;
--wp--custom--greyd--input--spacing--padding--left: 1.33em;
/* typography */
--wp--custom--greyd--input--typography--font-family: var(--wp--preset--font-family--body);
--wp--custom--greyd--input--typography--font-size: var(--wp--preset--font-size--base);
--wp--custom--greyd--input--typography--font-weight: 400;
--wp--custom--greyd--input--typography--letter-spacing: 0px;
--wp--custom--greyd--input--typography--line-height: 1.6;
--wp--custom--greyd--input--typography--text-transform: none;
/* label */
--wp--custom--greyd--input--label--color--background: var(--wp--preset--color--transparent);
--wp--custom--greyd--input--label--color--text: var(--wp--preset--color--foreground);
--wp--custom--greyd--input--label--typography--font-family: var(--wp--preset--font-family--body);
--wp--custom--greyd--input--label--typography--font-size: var(--wp--preset--font-size--base);
--wp--custom--greyd--input--label--typography--font-weight: var(--wp--custom--font-weigth-regular);
--wp--custom--greyd--input--label--typography--line-height: var(--wp--custom--line-height--normal);
/* primary input */
--wp--custom--greyd--input--prim--border--color: var(--wp--preset--color--mediumlight);
--wp--custom--greyd--input--prim--border--radius: 4px;
--wp--custom--greyd--input--prim--border--style: solid;
--wp--custom--greyd--input--prim--border--width: 1px;
--wp--custom--greyd--input--prim--color--background: var(--wp--preset--color--base);
--wp--custom--greyd--input--prim--color--placeholder: var(--wp--preset--color--mediumdark);
--wp--custom--greyd--input--prim--color--text: var(--wp--preset--color--foreground);
--wp--custom--greyd--input--prim--shadow: none;
/* hover */
--wp--custom--greyd--input--prim--hover--border--color: var(--wp--preset--color--mediumlight);
--wp--custom--greyd--input--prim--hover--border--style: var(--wp--custom--greyd--input--prim--border--style);
--wp--custom--greyd--input--prim--hover--border--width: var(--wp--custom--greyd--input--prim--border--width);
--wp--custom--greyd--input--prim--hover--color--background: var(--wp--preset--color--base);
--wp--custom--greyd--input--prim--hover--color--placeholder: var(--wp--preset--color--mediumdark);
--wp--custom--greyd--input--prim--hover--color--text: var(--wp--preset--color--foreground);
--wp--custom--greyd--input--prim--hover--shadow: var(--wp--custom--greyd--input--prim--shadow);
/* secondary input */
--wp--custom--greyd--input--sec--border--color: var(--wp--preset--color--mediumdark);
--wp--custom--greyd--input--sec--border--radius: 4px;
--wp--custom--greyd--input--sec--border--style: solid;
--wp--custom--greyd--input--sec--border--width: 1px;
--wp--custom--greyd--input--sec--color--background: var(--wp--preset--color--transparent);
--wp--custom--greyd--input--sec--color--placeholder: var(--wp--preset--color--mediumdark);
--wp--custom--greyd--input--sec--color--text: var(--wp--preset--color--foreground);
--wp--custom--greyd--input--sec--shadow: none;
/* hover */
--wp--custom--greyd--input--sec--hover--border--color: var(--wp--preset--color--foreground);
--wp--custom--greyd--input--sec--hover--border--style: var(--wp--custom--greyd--input--sec--border--style);
--wp--custom--greyd--input--sec--hover--border--width: var(--wp--custom--greyd--input--sec--border--width);
--wp--custom--greyd--input--sec--hover--color--background: var(--wp--preset--color--transparent);
--wp--custom--greyd--input--sec--hover--color--placeholder: var(--wp--preset--color--dark);
--wp--custom--greyd--input--sec--hover--color--text: var(--wp--preset--color--foreground);
--wp--custom--greyd--input--sec--hover--shadow: var(--wp--custom--greyd--input--sec--shadow);
}