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

24
src/css/main.css
View File

@ -2,10 +2,6 @@
* Version: 1.0.0 * Version: 1.0.0
*/ */
:root {
color-scheme: light dark;
}
html, html,
body { body {
margin: 0px; margin: 0px;
@ -47,20 +43,24 @@ main a {
color: red; color: red;
} }
@media(prefers-color-scheme: dark) { html.theme-dark {
color-scheme: dark;
html,
body {
background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F); background-image: linear-gradient(-10deg, #1010206F 60%, #5050506F);
} color: white;
}
main { .theme-dark>body>main {
border: 1px solid darkgray; border: 1px solid darkgray;
background-color: black; background-color: black;
box-shadow: 3px 3px 5px #101010C0; box-shadow: 3px 3px 5px #101010C0;
} }
main h1 { .theme-dark>body>main>h1 {
text-shadow: 0px 0px 3px blue, 2px 2px 6px; 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> <body>
<main> <main>
<button style="float: right; font-size:large;" title="Dark theme on/off" onclick="toggleTheme();">&#9728;</button>
<h1>Truyen home</h1> <h1>Truyen home</h1>
<h2>Status:</h2> <h2>Status:</h2>
<p class="text-red">Under construction</p> <p class="text-red">Under construction</p>
@ -19,6 +20,7 @@
<a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a> <a href="https://tds.truyen.network" target="_blank">tds.truyen.network</a>
</main> </main>
<script src="js/theme.js"></script>
</body> </body>
</html> </html>