This post is created 2 years ago, the content may be outdated.
Example page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html > <html > <head > <title > Your Title Here</title > </head > <body > <hr > <a href ="http://somegreatsite.com" > Link Name</a > is a link to another nifty site <h1 > This is a Header</h1 > <h2 > This is a Medium Header</h2 > Send me mail at <a href ="mailto:[email protected] " > [email protected] </a > . <p > This is a new paragraph! </p > <b > This is a new paragraph!</b > <br > <b > <i > This is a new sentence without a paragraph break, in bold italics.</i > </b > <hr > </body > </html >
1 2 3 4 5 6 7 8 9 body { background-color : #eea ; color : #333 ; }a { text-decoration : none; color : orange; }
Implementation Several method can be used to implement a switchable theme on the webpage.
A: Replace old CSS with new 1 2 3 <head > <link id ="style-light" rel ="stylesheet" href ="./style-light.css" > </head >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 let toggle = false ;const toggleStyle = () => { if (toggle) { document .getElementById("style-dark" ).remove(); const link = document .createElement('link' ); link.id = "style-light" ; link.rel = "stylesheet" ; link.href = "./style-light.css" ; document .head.appendChild(link); toggle = false ; } else { document .getElementById("style-light" ).remove(); const link = document .createElement('link' ); link.id = "style-dark" ; link.rel = "stylesheet" ; link.href = "./style-dark.css" ; document .head.appendChild(link); toggle = true ; } }
Demo:
1 2 3 4 <head > <link id ="style-light" rel ="stylesheet" href ="./style-light.css" media ="all" > <link id ="style-dark" rel ="stylesheet" href ="./style-dark.css" media ="none" > </head >
1 2 3 4 5 6 7 8 9 10 11 12 13 let toggle = false ;const toggleStyle = () => { if (toggle) { document .getElementById("style-light" ).setAttribute("media" , "all" ); document .getElementById("style-dark" ).setAttribute("media" , "none" ); toggle = false ; } else { document .getElementById("style-light" ).setAttribute("media" , "none" ); document .getElementById("style-dark" ).setAttribute("media" , "all" ); toggle = true ; } }
Demo:
C: Class attributes 1 2 3 <body class ="style-light" > </body >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .style-light { background-color : #eea ; color : #333 ; }.style-light a { text-decoration : none; color : orange; }.style-dark { background-color : #333 ; color : #ddd ; }.style-dark a { text-decoration : none; color : cyan; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 let toggle = false ;const toggleTheme = () => { if (toggle) { Array .from(document .getElementsByClassName("style-dark" )).forEach(e => { e.classList.remove("style-dark" ); e.classList.add("style-light" ); }); toggle = false ; } else { Array .from(document .getElementsByClassName("style-light" )).forEach(e => { e.classList.remove("style-light" ); e.classList.add("style-dark" ); }); toggle = true ; } }
Demo:
D: Custom data attributes 1 2 3 <html data-style ="theme-dark" > </html >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 :root [data-style="light" ] body { background-color : #eea ; color : #333 ; }:root [data-style="light" ] a { text-decoration : none; color : orange; }:root [data-style="dark" ] body { background-color : #333 ; color : #ddd ; }:root [data-style="dark" ] a { text-decoration : none; color : cyan; }
1 2 3 4 5 6 7 8 9 10 11 let toggle = false ;const toggleTheme = () => { if (toggle) { document .documentElement.setAttribute("data-style" , "light" ); toggle = false ; } else { document .documentElement.setAttribute("data-style" , "dark" ); toggle = true ; } }
Demo:
Adaptive style & save settings 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 const toggleStyle = (style ) => { switch (style) { case "light" : break ; case "dark" : break ; } sessionStorage.setItem("style" , style); };const savedTheme = sessionStorage.getItem("style" );if (savedTheme) { toggleStyle(savedTheme); } else { const theme = (window .matchMedia && window .matchMedia("(prefers-color-scheme: dark)" ).matches) ? "dark" : "light" ; toggleStyle(theme); window .matchMedia("(prefers-color-scheme: dark)" ).addEventListener("change" , e => { const newTheme = e.matches ? "dark" : "light" ; toggleStyle(newTheme); }); }
Nested Anchor Tag
Publish Python Package to PyPi
Please enable JavaScript to view the comments powered by
Disqus.