smokephil/water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2026-01-19 19:45:43 +01:00
Code Issues Projects Releases Packages Wiki Activity

Merge 792f9253a0 into d950cbc9f8

Browse source
This commit is contained in:
MAxX 2024-10-02 07:33:02 +00:00 • committed by GitHub
commit 040f5d245b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 78 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.changeset/curvy-carrots-nail.md Normal file
View file

@ -0,0 +1,5 @@
---
"water.css": patch
---
updated the ui of toggle dark theme

5
.changeset/lemon-ways-buy.md Normal file
View file

@ -0,0 +1,5 @@
---
"water.css": minor
---
done Adding dark mode and improved UI #347 , added code in index.html `// Toggle between dark and light themesthemeToggl`

5
.changeset/lucky-carrots-tell.md Normal file
View file

@ -0,0 +1,5 @@
---
"water.css": minor
---
done Adding dark mode and improved UI #347 , added code in index.html , style.css and added two png in docs/icons

5
.changeset/neat-boats-watch.md Normal file
View file

@ -0,0 +1,5 @@
---
"water.css": minor
---
done Adding dark mode and improved UI #347 , added code in index.html , style.css and added two png in docs/icons

BIN
docs/icons/moon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/icons/sun.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

31
docs/index.html
View file

@ -71,11 +71,34 @@
{ element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
])
</script>
</head>
<body>
<h1>Water.css</h1>
</head>
<body>
<h1>Water.css</h1>
<!-- toggle dark-mode -->
<div id="theme-container" aria-label="Toggle dark mode">
<button id="theme-toggle">
<img id="themeIcon" class="" src="./icons/sun.png" alt="Toggle dark mode icon" />
</button>
</div>
<script>
const themeToggleButton = document.getElementById('theme-toggle')
const themeStylesheet = document.getElementById('js-stylesheet')
const themeIcon = document.getElementById('themeIcon')
// Toggle between dark and light themes
themeToggleButton.addEventListener('click', () => {
const currentTheme = themeStylesheet.getAttribute('href')
if (currentTheme.includes('light.min.css')) {
// Switch to dark theme
themeStylesheet.setAttribute('href', './water.css/dark.min.css')
themeIcon.setAttribute('src', './icons/sun.png') // Path to light mode icon
} else {
// Switch to light theme
themeStylesheet.setAttribute('href', './water.css/light.min.css')
themeIcon.setAttribute('src', './icons/moon.png') // Path to dark mode icon
}
})
</script>
<p>
Water.css is a drop-in collection of CSS styles to make simple websites like this just a
little bit nicer.

31
docs/style.css
View file

@ -63,3 +63,34 @@ body > footer {
align-items: center;
justify-content: space-between;
}
/* toggle dark theme */
#theme-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
#theme-toggle {
width: 50px;
height: 50px;
padding: 0;
background-color: #dddbdb;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 5px #0003;
color: #000;
}
#theme-toggle:hover {
color: #fff;
}
#themeIcon {
height: 25px;
width: 25px;
display: block;
margin: 0 auto;
}