Log in Sign up

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.


2 years ago, 4 replies   developers   CSS   Edit 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 2 years ago · Edit 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 2 years ago · Edit 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 2 years ago · Edit 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 2 years ago · Edit answer