Updated description for CSS switch system.
This commit is contained in:
parent
44db4f1d8e
commit
baa436460b
1 changed files with 11 additions and 30 deletions
|
@ -150,19 +150,20 @@ an interactive theme selector without any javascript involved.
|
||||||
That theme switcher is really the limit I can concede to modern standards
|
That theme switcher is really the limit I can concede to modern standards
|
||||||
because it is CSS only.
|
because it is CSS only.
|
||||||
|
|
||||||
The trick is to provide one checkbox per theme at the beginning of the body
|
The trick is to provide one top-level element per theme at the beginning of
|
||||||
of the HTML.
|
the body of the HTML.
|
||||||
Then hide those checkbox and have label for each check box.
|
Then hide those elements (I chose inputs).
|
||||||
|
Finally provide a set of anchor links.
|
||||||
|
|
||||||
#+begin_src html
|
#+begin_src html
|
||||||
...
|
...
|
||||||
<body>
|
<body>
|
||||||
<input type="radio" id="light" name="theme"/>
|
<input id="light"/>
|
||||||
<input type="radio" id="dark" name="theme"/>
|
<input id="dark"/>
|
||||||
<div id="labels">
|
<div id="labels">
|
||||||
Change theme:
|
Change theme:
|
||||||
<label for="light">Light</label>
|
<a href="#light">Light</a>
|
||||||
<label for="dark">Dark</label>
|
<a href="#dark">Dark</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
ALL YOUR CONTENT HERE
|
ALL YOUR CONTENT HERE
|
||||||
|
@ -170,7 +171,6 @@ Then hide those checkbox and have label for each check box.
|
||||||
</body>
|
</body>
|
||||||
#+end_src
|
#+end_src
|
||||||
|
|
||||||
|
|
||||||
Then use the /sibling/ CSS selector =~=.
|
Then use the /sibling/ CSS selector =~=.
|
||||||
Then put all your content in a div of class =.main= for example.
|
Then put all your content in a div of class =.main= for example.
|
||||||
Finally in the CSS you can write things like:
|
Finally in the CSS you can write things like:
|
||||||
|
@ -184,36 +184,17 @@ Finally in the CSS you can write things like:
|
||||||
--light-color: #fff;
|
--light-color: #fff;
|
||||||
--dark-color: #000;
|
--dark-color: #000;
|
||||||
}
|
}
|
||||||
input#light:checked ~ .main {
|
input#light:target ~ .main {
|
||||||
background-color: var(--light-color);
|
background-color: var(--light-color);
|
||||||
color: var(--dark-color);
|
color: var(--dark-color);
|
||||||
}
|
}
|
||||||
input#dark:checked ~ .main {
|
input#dark:target ~ .main {
|
||||||
background-color: var(--dark-color);
|
background-color: var(--dark-color);
|
||||||
color: var(--light-color);
|
color: var(--light-color);
|
||||||
}
|
}
|
||||||
#+end_src
|
#+end_src
|
||||||
|
|
||||||
I also added a system to support theme using fragment in the URL.
|
I previously used checkbox inputs but using URL fragment feels better.
|
||||||
|
|
||||||
#+begin_src css
|
|
||||||
input#light:target ~ .main,
|
|
||||||
input#light:checked ~ .main {
|
|
||||||
background-color: var(--light-color);
|
|
||||||
color: var(--dark-color);
|
|
||||||
}
|
|
||||||
input#dark:target ~ .main,
|
|
||||||
input#dark:checked ~ .main {
|
|
||||||
background-color: var(--dark-color);
|
|
||||||
color: var(--light-color);
|
|
||||||
}
|
|
||||||
#+end_src
|
|
||||||
|
|
||||||
Unfortunately, for now the fragment system take full priority other the
|
|
||||||
checkbox mechanism.
|
|
||||||
|
|
||||||
Regarding selecting the user preferred theme, there are plenty of tutorial
|
|
||||||
on the internet, you could also simply steal my CSS.
|
|
||||||
|
|
||||||
** Blog Engine - org-mode with org-publish
|
** Blog Engine - org-mode with org-publish
|
||||||
:PROPERTIES:
|
:PROPERTIES:
|
||||||
|
|
Loading…
Reference in a new issue