Is it possible to create a document that allows switching themes using HTML and CSS without JavaScript?
I have created a simple HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
:root { --bg-color: lightgreen; }
* { background-color: var(--bg-color); }
/* Custom CSS styles can be added here. */
</style>
</head>
<body>
<div>
<h2 id="theme-1">Theme 1</h2>
<a href="#theme-1">Theme 1</a>
</div>
<div>
<h2 id="theme-2">Theme 2</h2>
<a href="#theme-2">Theme 2</a>
</div>
<div>
<h2 id="no-theme">No theme</h2>
<a href="#no-theme">No theme</a>
</div>
</body>
</html>
using the <style> tag.
I attempted to include this CSS code:
:has(#theme-1:target) { --bg-color: red; }
:has(#theme-2:target) { --bg-color: blue; }
however, the :has selector is not supported by any browser.
So, I tried this method:
#theme-1:target { --bg-color: red; }
#theme-2:target { --bg-color: blue; }
but it only changes the <h2> tags and not the background-color of the <body>.
Therefore, I am wondering if it is possible to switch between themes at all using just HTML and CSS.