Skip to content

Theme handbook: color naming best practices #563

@mikachan

Description

@mikachan

What is the new page you are requesting?

It may not require an entirely new page, but it would be great to include a section which encourages the use of a standardized naming convention for theme colors.

It could work well in a new section here, on the theme.json page: https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#css-custom-properties-presets-custom

Or perhaps on this page: https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-color-palettes

How will this new page help you?

This has been brought up as part of the development of the Twenty Twenty-Three default theme: WordPress/twentytwentythree#36 (comment)

If the new default theme uses base and contrast, IMO this naming convention should be written in the theme handbook to promote its use throughout the theming community. And from now on, the default themes (2024, 2025...) should stick to it. It would also be helpful for plugins.

Twenty Twenty-Three uses the names 'base' and 'contrast' for its main contrasting colors, and as preferrable alternatives to 'background' and 'foreground'. There is more information for the reasoning in this discussion, but to summarise:

  • These names do not conflict with element names. For example, 'background' is an element, but a color named 'background' may not always be used for the background element, which can lead to confusion.
  • These names result in readable generated slugs for CSS class names.

Note that it's probably best to update the handbook with these changes only once Twenty Twenty-Three has been released.

Metadata

Metadata

Assignees

Labels

new documentRequests for new page/article.themesIssues for Theme Developer Handbook

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions