Adjusting Colors & Deleting Default Colors
-
How do I delete the “Default” colors that WordPress includes with my website and how do I adjust the order of the colors I created for my theme?
I’ve been exploring building my design system with WordPress and there’s a lot of cool features, but the colors are one of the things confusing me. I want to be able to adjust them visually and not the JSON or other developer tools. Currently the colors I made are showing up in the order I created them and I wasn’t able to adjust the order while creating them and still can’t. I also haven’t been able to find a way to delete the default colors shown and I don’t want them. Here’s an image showing both.
The blog I need help with is: (visible only to logged in users)
-
Adjusting Colors & Deleting Default Colors
What I understand, and as far as I kno,w deleting default colors: There is no built-in visual option to remove the theme’s default colors. This usually requires editing the theme’s JSON settings or advanced customization not available in the standard editor.
-
Aw man, well for now how do I delete them with JSON then? When I go into theme.json all I see are the gradient colors and my custom theme colors. The default ones don’t seem to show up.
-
Hi @onequestmagic,
This WPBeginner article explains how the
theme.jsonfile works and how it can be used to customize theme colors and other settings:
What is theme.json in WordPress and How to Use ItHowever, since you’re using a free WordPress.com plan, you won’t be able to edit
theme.jsondirectly. That level of customization is only available on Business or higher plans. For now, your best option on a free plan is to add custom colors in the Site Editor and ignore the default colors — you won’t be able to delete or reorder them visually.As far as I know, WP.com doesn’t allow this yet.
-
I’m not using a free WordPress.com plan, I have the business plan. Where did you see that I’m using a free plan? 🤔 Since I do have that level of customization, how do I edit or remove the default colors?
The article you sent says:First, theme.json works hand-in-hand with the WordPress full site editor. This allows you to easily customize your theme’s styles and settings directly within the editor without needing to touch any code.
Since colors are part of styles, this to me means that I should be able to edit, remove, or adjust them as I please with the visual editor. But, if that’s not the case, I still don’t see the default colors in theme.json (like I shared previously) and don’t know how to remove them.
As far as I know, WP.com doesn’t allow this yet.
Doesn’t allow what yet?
-
Hi @onequestmagic,
Nice work digging into your theme’s files — that’s a practical step toward customizing your site the way you want!
In your theme’s
theme.jsonfile, the default colors are defined under thepalettesection (look for hex colors named “primary,” “secondary,” “tertiary,” etc.). You can adjust or remove those entries to control what appears in the Editor by default.Since you’re on the WordPress.com Business plan, you have two helpful options:
- Staging site + SFTP: You can connect with SFTP to view and edit your theme files directly, and use a staging site to safely test changes before syncing them live. Guide here.
- WordPress Studio: Another option is WordPress Studio, which lets you run WordPress locally on your computer, so you can experiment with your theme’s code before pushing changes to your WordPress.com site.
For broader theme development references, these resources may help:
If you’d prefer not to customize at code level, another route is using a premium theme where the developer has already built in variations and customization options, along with dedicated support.
Hope this gives you a clear path forward!
-
@staff-xantium thanks for the additional info and resources. I have a pretty unique setup and use an Android computer with a secondary display. It looks like both WordPress Studio and SFTP are for traditional computers like Windows, Mac, and Linux? Either way, I was able to edit theme.json in the web dashboard so I don’t think I need either of those, do I? I’m pretty tentative about all of this since I’m a designer, not a developer. But, I’ve done a little coding and I think I can safely remove all the colors in the gradient section so it looks like below? Then I could add my own gradients and they would show up in the visual editor?
"color": { "gradients": [ ],As far as the default colors go, this is what I see in the palette section and I only see the custom color tokens that I created. Is there a different spot for those default colors?
"palette": [ { "color": "#fff3e3", "name": "surface", "slug": "custom-surface" }, { "color": "#241700", "name": "on light surface", "slug": "custom-on-light-surface" }, { "color": "#fff1de", "name": "on dark surface ", "slug": "custom-on-dark-surface" }, { "color": "#fff9f0", "name": "surface container highest", "slug": "custom-surface-container-highest" }, { "color": "#ffeeda", "name": "surface container", "slug": "custom-surface-container" }, { "color": "#ffe3bf", "name": "surface container lowest", "slug": "custom-surface-container-lowest" }, { "color": "#ffb22e", "name": "primary", "slug": "custom-primary" }, { "color": "#ffcf98", "name": "primary container", "slug": "custom-primary-container" }, { "color": "#be92ff", "name": "secondary", "slug": "custom-secondary" }, { "color": "#d7c7f0", "name": "secondary container", "slug": "custom-secondary-container" }, { "color": "#fc86fe", "name": "tertiary", "slug": "custom-tertiary" }, { "color": "#f3b8f4", "name": "tertiary container", "slug": "custom-tertiary-container" }, { "color": "#ff6d48", "name": "error", "slug": "custom-error" }, { "color": "#fed4c0", "name": "error container", "slug": "custom-error-container" }, { "color": "#f0ec10", "name": "warning", "slug": "custom-warning" }, { "color": "#fffd9e", "name": "warning container", "slug": "custom-warning-container" }, { "color": "#b79f7a", "name": "outline", "slug": "custom-outline" }, { "color": "#593900", "name": "shadow", "slug": "custom-shadow" }, { "color": "#00d165", "name": "success", "slug": "custom-success" }, { "color": "#c7f2d7", "name": "success container", "slug": "custom-success-container" }, { "color": "#3f2800", "name": "on-primary", "slug": "custom-on-primary" }, { "color": "#562e00", "name": "on primary container", "slug": "custom-on-primary-container" }, { "color": "#18003d", "name": "on secondary", "slug": "custom-on-secondary-1" }, { "color": "#3a1576", "name": "on secondary container", "slug": "custom-on-secondary-container" }, { "color": "#380039", "name": "on tertiary", "slug": "custom-on-tertiary" }, { "color": "#6a006b", "name": "on tertiary container", "slug": "custom-on-tertiary-container" }, { "color": "#57482d", "name": "on surface dim", "slug": "custom-on-surface-dim" }, { "color": "#002c14", "name": "on success", "slug": "custom-on-success" }, { "color": "#004017", "name": "on success container", "slug": "custom-on-success-container" }, { "color": "#5706d1", "name": "secondary dark", "slug": "custom-secondary-dark" }, { "color": "#f6f2fe", "name": "on secondary dark", "slug": "custom-on-secondary-dark" }, { "color": "#98009b", "name": "tertiary dark", "slug": "custom-tertiary-dark-1" }, { "color": "#fff9ff", "name": "on tertiary dark", "slug": "custom-on-tertiary-dark-1" }, { "color": "#1a0400", "name": "on calamity", "slug": "custom-on-calamity" }, { "color": "#612103", "name": "on calamity container", "slug": "custom-on-calamity-container" }, { "color": "#484700", "name": "on warning", "slug": "custom-on-warning" }, { "color": "#515000", "name": "on warning container", "slug": "custom-on-warning-container" }, { "color": "#841a00", "name": "calamity dark", "slug": "custom-calamity-dark" } -
Hi @onequestmagic!
It looks like both WordPress Studio and SFTP are for traditional computers like Windows, Mac, and Linux?
That’s correct — for Mac and Windows for now, yes.
Either way, I was able to edit theme.json in the web dashboard so I don’t think I need either of those, do I?
That’s a handy feature — yes, you can edit your site’s files right in the dashboard if that works better for you.
I think I can safely remove all the colors in the gradient section so it looks like below? Then I could add my own gradients and they would show up in the visual editor?
That’s a keen observation. Just make sure to follow the same formatting patterns you see in the file already.
As far as the default colors go, this is what I see in the palette section and I only see the custom color tokens that I created. Is there a different spot for those default colors?
There isn’t an extra hidden set of defaults beyond what’s labeled as primary, secondary, etc. Since you created the theme yourself, those are the ones WordPress is exposing to the editor.
Since this all leans heavily into theme customization, if you’d like more detailed guidance you’ll also find a lot of help from the WordPress.org forums.
-
Hey again! Thanks for the patience, got tied up in a bunch of other details migrating my site to wordpress.com. But, cool, thanks for helping with so many questions! I’m a very curious person and I ask a lot of questions that might seem strange or unique.
As far as the default colors I’m still confused. Did you see the primary, secondary, and other default colors in the JSON I shared above? I can’t find them and I only see my custom colors. I’d really like to remove those default colors from my Styles, and if they’re not showing up in the JSON I’m very confused how they’re still showing up in Styles?
Also, I appreciate the heads up about the WordPress.org forums, unfortunately that community is one of the primary reasons I’m moving my site hosting to WordPress.com. They weren’t supportive or helpful and I don’t want to continue trying to have conversations with them.
-
I figured out how to do it through JSON for a temporary fix. Need to add this code snippet to the theme.json file underneath “color”: {
"defaultPalette": false,To remove any default duotone and/or gradient colors you can also add:
"defaultGradients": false, "defaultDuotone": false, -
Hi @onequestmagic!
This is fantastic to hear! Yay! I’m really proud of that evolution, Keep at it!
- The topic ‘Adjusting Colors & Deleting Default Colors’ is closed to new replies.
WordPress.com Forums 