deadvey/javalsais-website
1
0
Fork 0
forked from javalsai/website
Code Pull Requests Activity

dark/light mode toggle

Browse Source
This commit is contained in:
deadvey 2024-10-08 23:12:34 +01:00
parent cb7060b5f2
commit 4f6cdf31d4
7 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md Normal file
View File

@ -0,0 +1 @@
Javalsai's website https://javalsai.dynv6.net/

0
README.md~ Normal file
View File

BIN
assets/moon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
assets/sun.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

23
components/header.html
View File

@ -1,10 +1,17 @@
<header> <header>
<nav> <nav>
<ul class="row-ul"> <ul class="row-ul">
<li><a href="/">home</a></li> <li><a href="/">home</a></li>
<li><a href="https://git.javalsai.dynv6.net/">gitea</a></li> <li><a href="https://git.javalsai.dynv6.net/">gitea</a></li>
<li><a href="/tools">tools</a></li> <li><a href="/tools">tools</a></li>
<li><a href="/notes">notes</a></li> <li><a href="/notes">notes</a></li>
</ul> <button class="theme-toggle-button" onclick="light_mode()"><img class="theme-toggle-image" height="12px" margin="0px" /></button>
</nav> </ul>
</nav>
<script>
function light_mode() {
var element = document.body;
element.classList.toggle("light-mode");
}
</script>
</header> </header>

3
index.html
View File

@ -27,7 +27,7 @@
</head> </head>
<body class="flex column"> <body class="flex column">
<!--# include virtual="/components/header.html" --> <!--# include virtual="/components/header.html" -->
<main> <main>
<div class="intro-container flex row wrappable"> <div class="intro-container flex row wrappable">
<div> <div>
@ -96,6 +96,7 @@
and no, no <i>light</i> mode, I have enough with this and no, no <i>light</i> mode, I have enough with this
</p> </p>
</footer> </footer>
</body> </body>
</html> </html>

20
style.css
View File

@ -21,6 +21,26 @@ body {
color: var(--text); color: var(--text);
caret-color: var(--primary); caret-color: var(--primary);
} }
.light-mode {
background-color: white;
color: black;
.theme-toggle-image {
content:url("/assets/moon.png");
}
button {
background-color: white;
border: 0px;
margin: 0px
}
}
.theme-toggle-image {
content:url("/assets/sun.png");
}
button {
background-color: black;
border: 0px;
margin: 0px
}
*, *::before, *::after { *, *::before, *::after {
transition: all .3s ease-out; transition: all .3s ease-out;