Skip to content

Commit

Permalink
lightmode start
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheddZy
cheddZy committed Mar 5, 2024
1 parent a650e03 commit cfcc1a6
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 3 deletions.
4 changes: 2 additions & 2 deletions src/components/Content.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -536,10 +536,10 @@ import CardSubmit from "./ui/cardSubmit.astro";
} else if (filters.size === 0) {
showAll.classList.add('active');
showAllItems();
} else if (filters.size === 9) {
} else if (filters.size === 11) {
showAll.classList.add('implied');
showAllItems();
} else if (filters.size < 9) {
} else if (filters.size < 11) {
showAll.classList.remove('implied');
}
updateList();
Expand Down
118 changes: 118 additions & 0 deletions src/components/util/ThemeSwitch.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
---
---

<script>
const sun = document.getElementById('iconSun');
const moon = document.getElementById('iconMoon');
const state = document.getElementById('debugState');
const close = document.getElementById('closeB');
let checky = localStorage.getItem('theme');
const dataTheme = document.documentElement;

const button = document.getElementById('themeSwitcher');
// const theme = dataTheme.getAttribute('data-test');

const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";

// Check local storage for 'theme'
// if defined already, make sure that <html> data-theme corresponds with localStorage.
// If not defined, set a new entry in localStorage based on the system's Theme.
switch(localStorage.getItem('theme')) {
case 'dark':
document.documentElement.setAttribute('data-theme', 'dark')
break;
case 'light':
document.documentElement.setAttribute('data-theme', 'light')
break;
default:
console.warn('No theme set, creating & storing theme based on system preference: ', systemTheme);
localStorage.setItem('theme', systemTheme);
updateTheme(localStorage.getItem('theme'))
break;
}


function updateTheme(value) {
const theme = value === "system" ? systemTheme : value;
document.documentElement.setAttribute('data-theme', theme)
}

button.addEventListener('click', () => {
switch(localStorage.getItem('theme')) {
case 'dark':
console.log('dark')
localStorage.setItem('theme', 'light');
state.innerHTML = 'light';
moon.classList.add('hide');
sun.classList.remove('hide');
document.documentElement.setAttribute('data-theme', 'light')
break;
case 'light':
console.log('light')
localStorage.setItem('theme', 'dark');
state.innerHTML = 'dark';
sun.classList.add('hide');
moon.classList.remove('hide');
document.documentElement.setAttribute('data-theme', 'dark')
break;
}
})
let wrapper = document.querySelectorAll('.hideMe')


close.addEventListener('click', () => {
for(const item of wrapper) {
item.classList.add('hide');
}
})
</script>

<div class="hideMe">
<button id="themeSwitcher">
<svg id="iconSun" data-slot="icon" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"></path>
</svg>
<svg id="iconMoon" class="hide" data-slot="icon" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" fill-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="hideMe">
<span id="debugState">
light
</span>
<span id="closeB">
<br>debug
<br>[x]close
</span>
</div>

<style>
button {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
aspect-ratio: 1;
height: 3rem;

@apply rounded-full;
}

.hide {
display: none;
}

svg {
height: 2rem;
color: #1E1F22;
}
span {
font-size: 0.62rem !important;
font-family: monospace;
}

</style>
25 changes: 24 additions & 1 deletion src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,36 @@ import MainHeader from "../components/MainHeader.astro";
import Hero from "../components/Hero.astro";
import Content from "../components/Content.astro";
import MainFooter from "../components/MainFooter.astro";
import ThemeSwitch from "../components/util/ThemeSwitch.astro";
---

<Layout title="The Design Repo">
<main>
<div id="themeSwitch">
<div id="wrapThemes">
<ThemeSwitch />
</div>
</div>
<MainHeader/>
<Hero/>
<Content />
<MainFooter />
</main>
</Layout>
</Layout>


<style>
#themeSwitch {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
border: solid 1px cyan;
}
#wrapThemes {
position: absolute;
right: 2rem;
bottom: 2rem;
}
</style>
18 changes: 18 additions & 0 deletions src/styles/globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,24 @@
@tailwind utilities;
/* Font Imports */

:root {
--color: #96aee0;
}


[data-theme='dark'] {
--color: #1E1F22 !important;
}

[data-theme='light'] {
--color: #96aee0 !important;
}

#themeSwitcher svg, #debugState {
color: var(--color);
}


html {font-size: 100%;} /* 16px */

h1 {font-size: 4.210rem !important; /* 67.36px */}
Expand Down

0 comments on commit cfcc1a6

Please sign in to comment.