How to create a Naked CSS theme without removing CSS
CSS Naked Day is celebrated each year on 9 April. The point is that navigating a website without CSS applied is a powerful way of doing accessibility testing and adhering to Web Standards. How many accessibility flaws is your CSS hiding for you? Just as much as JS might not always be loaded/executed your CSS might not load as well and that’s equally problematic. The official site suggests ways to remove all CSS, but sometimes that’s not practical. Maybe you’re working in a locked-down CMS, or dealing with a complex build setup (hi Vite and SvelteKit). But adding CSS? That’s usually pretty easy.
So this post shows you how to make your website look naked in just 7 lines of code!
[data-theme="naked"] {
color-scheme: dark light !important;
&,
& :is(*, *::before, *::after) {
all: revert !important;
}
& [aria-hidden='true'] {
display: none !important;
}
}
Code breakdown
Select the document and all elements inside it. For me the
data-theme="naked"
is applied to the<html>
element:<html data-theme="naked">
[data-theme="naked"] { /* ... */ }
Revert everything
Modern CSS gives us
all: revert
and when applying that in my website’s CSS it basically means that it ‘removes’ all of my styles without deleting my CSS.[data-theme="naked"] { /* ... */ &, & :is(*, *::before, *::after) { all: revert !important; } /* ... */ }
Set color scheme (optional)
Wallace has a dark theme by default so here I tell the browser that removing all styles makes the website still dark by default but also respond to a light preference.
[data-theme="naked"] { color-scheme: dark light !important; /* ... */ }
Bonus: hide inaccessible content
I’m hiding all elements that have
aria-hidden="true"
because they are only useful visually, not for assisitve technology. So that’s why it makes sense for me to hide these elements just to check how I navigate the website without them.[data-theme="naked"] { /* ... */ & [aria-hidden='true'] { display: none !important; } }
There is no automation on this site to automatically apply the naked theme on April 9th. That seems a bit drastic for me. You can choose it in the theme picker in the header, though. I do it myself from time to time and it’s really helpful.
Popular posts
Making Analyze CSS render 6 times faster
A deep-dive in how the Analyze CSS page renders 6 times faster by applying 2 basic principles.
CSS complexity: it's complicated
There's lots of places in CSS to have complexity, but we tend to focus on selectors most of the time. Let's have a look at other places too.