ward/truyen-network-site
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: added theme switch

Browse Source
This commit is contained in:
Ward Truyen 2024-09-09 21:48:20 +02:00
parent efc3a9d730
commit d825546505
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/css/main.css
View File

@ -2,10 +2,6 @@
* Version: 1.0.0
*/
:root {
color-scheme: light dark;
}
html,
body {
margin: 0px;
@ -47,20 +43,24 @@ main a {
color: red;
}
@media(prefers-color-scheme: dark) {
html,
body {
html.theme-dark {
color-scheme: dark;
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
color: white;
}
main {
.theme-dark>body>main {
border: 1px solid darkgray;
background-color: black;
box-shadow: 3px 3px 5px #101010C0;
}
main h1 {
.theme-dark>body>main>h1 {
text-shadow: 0px 0px 3px blue, 2px 2px 6px;
}
@media(orientation: portrait){
main{
margin: 1em;
}
}

2
src/index.html
View File

@ -9,6 +9,7 @@
<body>
<main>
<button style="float: right; font-size:large;" title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
<h1>Truyen home</h1>
<h2>Status:</h2>
<p class="text-red">Under construction</p>
@ -19,6 +20,7 @@
<a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a>
</main>
<script src="js/theme.js"></script>
</body>
</html>