Dawn theme text color is black but looks more grey

[DaandeLeur]

Hi there guys,

I have a bit of a weird issue. My text on my store looks more like grey instead of black. all color codes are correct but it still looks very weird. Is there anyone who maybe has css experience to help me fix this?

[dmwwebartisan]

@DaandeLeur

Please share your store URL.

[DaandeLeur]

Bailey's Boutique California

[dmwwebartisan]

@DaandeLeur

Please add the following code at the bottom of your css file.

body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5, .color-scheme-fe7621da-8146-440f-8889-0c4204a9230f, .color-scheme-f7a3fe79-c48b-4974-8e85-46e1666c273e, .color-scheme-1c94a8f7-94d7-4096-b415-88eb73bfa3b2, .color-scheme-9678d354-e817-47cb-b770-702791c7b994 {
    color: #000 !important;
}
.header__menu-item{
color: #000 !important;
}

Hope this works.

[DaandeLeur]

Still looks like grey, please check live store since i made the change

[dmwwebartisan]

@DaandeLeur

Could you please give me screenshot? How you put that because changes are not applied.

I just checked.

[websensepro]

Hello, @DaandeLeur

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

p {
    color: black !important;
}

Screenshot attached of Before and After applying css:

[kakao74]

The text still looks grey even after adding the CSS because something in the theme (likely a color-scheme variable or opacity setting) is overriding the color.

Instead of forcing many selectors, you can fix it with one clean rule:

body, p, span, li, .rte * {
  color: #000 !important;
}

If it still shows grey, it usually means the theme is applying reduced opacity instead of a color. In that case, add:

body, p, span, li, .rte * {
  opacity: 1 !important;
}

This removes the “washed-out” effect and makes the text pure black.

If you want, I can quickly check your live store and tell you exactly which selector is causing the grey color — it’s usually a 1-minute fix.

[suyash1]

@DaandeLeur to change color to black on the ENTIRE site, please add this css to the very end of your base.css file and check, should look like the screenshot below

.color-scheme-1{color: rgba(var(--color-foreground), 1) !important;}

[Coding-with-Jan]

Why your text looks grey even if the color code is black

This usually happens because something else in your theme is lowering opacity, for example:

• opacity: 0.8;

• color: rgba(0,0,0,0.7);

• A parent element has reduced opacity

• Your theme uses variable-based colors that are not true black
  (Example: --color-foreground: rgba(0,0,0,.75))

So even if you set color: #000000, it still looks faded.

Quick fix with CSS

Try adding this to theme.liquid before </head> or inside custom CSS:

body, p, span, a, li, h1, h2, h3, h4, h5, h6 {
color: #000 !important;
opacity: 1 !important;
}

This forces the text to true black with no transparency.

If it still looks grey

You may have a parent container with opacity like:

.opacity-80 {
opacity: 0.8;
}

Or something like:

body {
color: rgba(0,0,0,0.7);
}

Hope this helps! Happy to assist further if needed.

[donny_fitmiecom]

Hi @DaandeLeur
You can fix the color by edit in theme code, follow this image to know more detail:

[EFOLI-Syn]

Hello @DaandeLeur,

Please add this following CSS code into your theme’s base.css or theme.css file:

Go to Online Store → Themes → Edit code.
Open your theme edit code and paste the code at the very bottom:

p {
    color: black !important;
}