yogsototh/her.esy.fun
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Updated description for CSS switch system.

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2019-08-25 00:38:50 +02:00
parent 44db4f1d8e
commit baa436460b
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
1 changed files with 11 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/posts/new-blog.org
View file

@ -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: