Advanced Heading not using var theme colors
-
I made a night mode button as per your tutorial. This website is not using BlockPress(yet) but the theme does have foreground and background color variable presets.
Here’s a wp heading
color: var(--wp--preset--color--foreground) !important;
All the WP blocks and all the Gutenify theme blocks swap foreground and background colors just fine but the GS Advanced Heading block doesn’t output the color variable css.
On the above page, you’ll see two sets of four of the Advanced Heading block with a WP Heading block below those and I stuck a nightmode button(light bulb) right there handy for you.
Text of the blocks are as per their colors chosen in the block editor.
#3 is a theme preset/variable but like the rest, it shows up in the Inspector as a hard coded, inline #777 which the theme calls Boulder.
#2 is the background var so you won’t see it until you click the light bulb icon/button.
#1 is not quite being invisible in dark mode because I’m tweaking the dark mode colors from something other than black/white background/foreground. As per below.
body.nightmode{--wp--preset--color--white: #1A1A1D; --wp--preset--color--black: #ffffff;} body.nightmode{--wp--preset--color--background: #1A1A1D; --wp--preset--color--foreground: white!important;} body.nightmode{--wp--preset--color--background-secondary: #0B1112 !important;}
I’m working on “somewhat” duplicating the home page layout and blocks which is a Gutenify Template and uses their blocks plugin as well. I want to use BlockPress and Greenshift instead.
On a side note, it sure would be nice to swap the circled number out for an icon.
- This topic was modified 1 year, 11 months ago by .
- This topic was modified 1 year, 11 months ago by .
- This topic was modified 1 year, 11 months ago by .
The page I need help with: [log in to see the link]
- The topic ‘Advanced Heading not using var theme colors’ is closed to new replies.