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

done Adding dark mode and improved UI #347 , added code in index.html , style.css and added two png in docs/icons

Browse source 
done  Adding dark mode and improved UI #347 , added code in index.html , style.css and added two png in docs/icons
This commit is contained in:
suman 2024-10-01 18:34:55 +05:30
parent d950cbc9f8
commit fa81838993
7 changed files with 71 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

33
docs/index.html
View file

@ -71,11 +71,38 @@
{ 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.

26
docs/style.css
View file

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