fujin/gruvbox-wallpapers
1
0
Fork 0
mirror of https://github.com/AngelJumbo/gruvbox-wallpapers.git synced 2026-08-05 13:42:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

switch theme and github buttons

Browse Source
This commit is contained in:
AngelJumbo
2024-06-03 13:39:21 -05:00
parent 0a3cdc17f2
commit 5992f48512
3 changed files with 78 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+15
View File
@@ -35,3 +35,18 @@ function hideAll() {
s.style.display = "none";
});
}
function switchTheme(){
let currTheme = document.documentElement.style.getPropertyValue('color-scheme');
console.log(currTheme);
if (currTheme == "dark") {
document.getElementsByClassName("fa-sun")[0].style.display = "none";
document.getElementsByClassName("fa-moon")[0].style.display = "block";
document.documentElement.style.setProperty('color-scheme', 'light');
} else {
document.getElementsByClassName("fa-moon")[0].style.display = "none";
document.getElementsByClassName("fa-sun")[0].style.display = "block";
document.documentElement.style.setProperty('color-scheme', 'dark');
}
}
build.sh
+38 -22
View File
@@ -20,21 +20,6 @@
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
# SOFTWARE.
write_header(){
echo "<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
<title>Gruvbox wallpapers</title>
<script src='app.js'></script>
</head>
<body>
<h1>Gruvbox Wallpapers</h1>" > $1
}
write_section_header(){
echo "<h2 class=\"clickable s$1\" onclick=\"activeSection('$2')\" >" >> $3
@@ -47,15 +32,40 @@ write_img(){
<img loading=\"lazy\" src=\"$1\" alt=\"$1\" width=\"200\"></a>" >> $2
}
write_footer(){
echo "<p> Contributions!! <a href=\"https://github.com/AngelJumbo/gruvbox-wallpapers\">here</a>.</p>
</body>
</html>" >> $1
}
rm *.html
touch ./index.html
write_header ./index.html
echo "<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
<title>Gruvbox wallpapers</title>
<script src='app.js'></script>
<script src="https://kit.fontawesome.com/13865d7982.js" crossorigin="anonymous"></script>
</head>
<body>
<div class=\"float-btns\">
<button onclick=\"location.href='https://github.com/AngelJumbo/gruvbox-wallpapers'\" class=\"float-btn clickable\" >
<span>
<i class=\"fa-brands fa-github\"></i>
</span>
</button>
<br />
<button onclick=switchTheme() class=\"float-btn clickable\">
<span>
<i class=\"fa-solid fa-sun\" ></i>
<i class=\"fa-solid fa-moon\" style=\"display:none\"></i>
</span>
</button>
</div>
<h1>Gruvbox Wallpapers</h1>" > ./index.html
color=1
@@ -124,9 +134,15 @@ done
echo "
activeSection(\"${sections[0]}\");
if(!window.matchMedia(\"(prefers-color-scheme: dark)\").matches){
document.getElementsByClassName(\"fa-sun\")[0].style.display = \"none\";
document.getElementsByClassName(\"fa-moon\")[0].style.display = \"block\";
}
}
</script>" >> ./index.html
write_footer ./index.html
echo "
</body>
</html>" >> ./index.html
style.css
+25 -1
View File
@@ -19,7 +19,7 @@ body {
font-family: "Curier New", monospace;
}
* {
*:not( i ) {
color: var(--fg-color);
}
@@ -124,3 +124,27 @@ img:hover {
.section {
display: none;
}
.float-btns{
position: fixed;
/*top: 80%;*/
bottom: 10px;
right: 35px;
}
.float-btn{
background-color: var(--bg-color-reverse);
border: none;
color: var(--fg-color-reverse);
text-align: center;
text-decoration: none;
display: inline-block;
height: 2.5rem;
width: 2.5rem;
margin-bottom: 10px;
}
.float-btn span{
font-size: 1.5rem;
color: var(--fg-color-reverse);
}