Your sites Log in Sign up Menu

Are CSS variables supported?

I'm setting up a new theme and I'm trying to add some CSS variables (example below) but every time I try, it seems that blot isn't parsing them and is basically ignoring that CSS. Are CSS variables supported?

Example:

:root {
 --text: #333;
 --bg: #fafafa;
}

body {
    color: var(--text);
    background: var(--bg);
}

Apologies if this question has been answered before, but the search bar isn't working for me. I just get a faded screen with no results.


a year ago, 4 replies   developers   CSS   Improve this question

Further testing seems that this isn't a variable issue, but an @media query for dark mode.

My CSS files pulls the custom fonts (which are also failing for some reason), then sets the variables, then an @media query to update the variables if dark mode is on.

For some reason, the item right after the media query is being completely ignored, which was my body element. I move that to the top of the file for testing, and the next element (header) was then ignored.

I've never known anything like this, any idea what's going on here? This is basic CSS, so I'm surprised it's not working on Blot.

Thanks.

Answered a year ago · Improve this answer

I bet this is you, Kev. ; )

I don’t know enough to answer but I can say I’ve been using your simple.css on my AlongtheRay.com blog and it works great flipping between dark and light modes if that’s of any relevance to you.

Best of luck tinkering around! Ray

Answered a year ago · Improve this answer

Variables and media queries should be supported – I believe we sorted this out over email – the issue turned out to be one of incorrect syntax elsewhere in the file

Answered a year ago · Improve this answer

Lol, yes, Ray, it's me! :-)

David emailed me with the answer - TL;DR I am an idiot and there was a glaring mistake I didn't notice in my CSS. 🤦‍♂️

Answered a year ago · Improve this answer