javascript - Save andor Apply Background Image on click - Stack Overflow
This question is not how to add Background Images, it is how to have it save the setting once the option has been selected, so after the page is refreshed or page is changed it remembers the choice.
I have made it so my background changes on click, however it does not save the theme and actually apply change after leaving the page or refreshing.
1.Is there anyway to apply it to the original code? if so I would really like help on how to do so.
if not
2.What changes would I need to make to have the NEW JS work with what I have now?
Extra Challenge:
(I only want it to affect the profile page and settings page and not the full website)
I Would really appreciate the help I don't mean to sound terrible.
Down below are links to the Codepens.
1.This is my original code I used to be able to change background:
2.This is the code I've tried to implement but have gotten confused/lost on how to get it to work with what I have:
I will also show the code below.
1.Working code but DOES NOT save
(HTML)
<script src=".7.1/jquery.min.js"></script>
<body id="Background">
<div id="SettingsBox">
<div>
<div class="Embers" data-class="Embers-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Embers</h1>
<div class="mouse-position-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="Darkmode-Theme-Card" data-class="Darkmode-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Darkmode</h1>
<div class="mouse-position-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</body>
JS
function myFunction(obj) {
$('body#Background').removeClass().addClass($(obj).data('class'));
}
CSS
body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url(".png");
position: absolute;
margin: auto;
}
.Embers-Theme-Card-Gradient{
background-image: url(".png");
position:relative;
}
.Darkmode-Theme-Card-Gradient{
(".png");
position:relative;
}
.Coffee-Theme-Card-Gradient{
(".png");
position:relative;
}
.Embers {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 6.5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url(".png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 29%;
bottom: 80%;
}
.Embers> :where(h1,
p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker>div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker>div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker>div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker>div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Embers {
cursor: pointer;
}
.Darkmode-Theme-Card {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url(".png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 10%;
bottom: 80%;
}
.Darkmode-Theme-Card > :where(h1, p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker > div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker > div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker > div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker > div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Darkmode-Theme-Card
{
cursor:pointer;
}
#SettingsBox
{
position:relative;
height:850px;
width:1400px;
background-color:rgba(0, 0, 0, 0.25);
border-radius:20px;
box-shadow: -5px 5px 15px #111a;
margin:auto;
top:10%;
}
2.NOT Working (Same HTML and CSS) (HTML)
<script src=".7.1/jquery.min.js"></script>
<body id="Background">
<div id="SettingsBox">
<div>
<div class="Embers" data-class="Embers-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Embers</h1>
<div class="mouse-position-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="Darkmode-Theme-Card" data-class="Darkmode-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Darkmode</h1>
<div class="mouse-position-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</body>
JS
let Embers = localStorage.getItem( 'Embers' )
const themeSwitch = document-getElementById ('Background')
const enableEmbers = () =› {
document.body.classList.add ('Embers')
localStorage setItem( 'Embers', 'active')
}
const disableEmbers = () => {
document. body. classList. remove( 'Embers')
localStorage setItem( 'Embers', null)
}
themeSwitch. addEventListener ("click", () => {
Embers !== "active" ? enableDarkmode() : disableDarkmode()
({
CSS
body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url(".png");
position: absolute;
margin: auto;
}
.Embers-Theme-Card-Gradient{
background-image: url(".png");
position:relative;
}
.Darkmode-Theme-Card-Gradient{
(".png");
position:relative;
}
.Coffee-Theme-Card-Gradient{
(".png");
position:relative;
}
.Embers {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 6.5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url(".png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 29%;
bottom: 80%;
}
.Embers> :where(h1,
p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker>div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker>div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker>div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker>div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Embers {
cursor: pointer;
}
.Darkmode-Theme-Card {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url(".png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 10%;
bottom: 80%;
}
.Darkmode-Theme-Card > :where(h1, p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker > div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker > div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker > div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker > div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Darkmode-Theme-Card
{
cursor:pointer;
}
#SettingsBox
{
position:relative;
height:850px;
width:1400px;
background-color:rgba(0, 0, 0, 0.25);
border-radius:20px;
box-shadow: -5px 5px 15px #111a;
margin:auto;
top:10%;
}
This question is not how to add Background Images, it is how to have it save the setting once the option has been selected, so after the page is refreshed or page is changed it remembers the choice.
I have made it so my background changes on click, however it does not save the theme and actually apply change after leaving the page or refreshing.
1.Is there anyway to apply it to the original code? if so I would really like help on how to do so.
if not
2.What changes would I need to make to have the NEW JS work with what I have now?
Extra Challenge:
(I only want it to affect the profile page and settings page and not the full website)
I Would really appreciate the help I don't mean to sound terrible.
Down below are links to the Codepens.
1.This is my original code I used to be able to change background:https://codepen.io/Elixble/pen/RwzZaWB
2.This is the code I've tried to implement but have gotten confused/lost on how to get it to work with what I have:https://codepen.io/Elixble/pen/KwPyyVY
I will also show the code below.
1.Working code but DOES NOT save
(HTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body id="Background">
<div id="SettingsBox">
<div>
<div class="Embers" data-class="Embers-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Embers</h1>
<div class="mouse-position-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="Darkmode-Theme-Card" data-class="Darkmode-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Darkmode</h1>
<div class="mouse-position-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</body>
JS
function myFunction(obj) {
$('body#Background').removeClass().addClass($(obj).data('class'));
}
CSS
body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position: absolute;
margin: auto;
}
.Embers-Theme-Card-Gradient{
background-image: url("https://i.postimg.cc/RFdn3tYZ/Embers-Background.png");
position:relative;
}
.Darkmode-Theme-Card-Gradient{
("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position:relative;
}
.Coffee-Theme-Card-Gradient{
("https://i.postimg.cc/Njxp1Q0J/Coffee.png");
position:relative;
}
.Embers {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 6.5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 29%;
bottom: 80%;
}
.Embers> :where(h1,
p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker>div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker>div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker>div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker>div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Embers {
cursor: pointer;
}
.Darkmode-Theme-Card {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 10%;
bottom: 80%;
}
.Darkmode-Theme-Card > :where(h1, p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker > div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker > div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker > div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker > div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Darkmode-Theme-Card
{
cursor:pointer;
}
#SettingsBox
{
position:relative;
height:850px;
width:1400px;
background-color:rgba(0, 0, 0, 0.25);
border-radius:20px;
box-shadow: -5px 5px 15px #111a;
margin:auto;
top:10%;
}
2.NOT Working (Same HTML and CSS) (HTML)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body id="Background">
<div id="SettingsBox">
<div>
<div class="Embers" data-class="Embers-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Embers</h1>
<div class="mouse-position-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="Darkmode-Theme-Card" data-class="Darkmode-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Darkmode</h1>
<div class="mouse-position-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</body>
JS
let Embers = localStorage.getItem( 'Embers' )
const themeSwitch = document-getElementById ('Background')
const enableEmbers = () =› {
document.body.classList.add ('Embers')
localStorage setItem( 'Embers', 'active')
}
const disableEmbers = () => {
document. body. classList. remove( 'Embers')
localStorage setItem( 'Embers', null)
}
themeSwitch. addEventListener ("click", () => {
Embers !== "active" ? enableDarkmode() : disableDarkmode()
({
CSS
body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position: absolute;
margin: auto;
}
.Embers-Theme-Card-Gradient{
background-image: url("https://i.postimg.cc/RFdn3tYZ/Embers-Background.png");
position:relative;
}
.Darkmode-Theme-Card-Gradient{
("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position:relative;
}
.Coffee-Theme-Card-Gradient{
("https://i.postimg.cc/Njxp1Q0J/Coffee.png");
position:relative;
}
.Embers {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 6.5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 29%;
bottom: 80%;
}
.Embers> :where(h1,
p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker>div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker>div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker>div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker>div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Embers {
cursor: pointer;
}
.Darkmode-Theme-Card {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 10%;
bottom: 80%;
}
.Darkmode-Theme-Card > :where(h1, p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker > div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker > div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker > div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker > div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Darkmode-Theme-Card
{
cursor:pointer;
}
#SettingsBox
{
position:relative;
height:850px;
width:1400px;
background-color:rgba(0, 0, 0, 0.25);
border-radius:20px;
box-shadow: -5px 5px 15px #111a;
margin:auto;
top:10%;
}
Share Improve this question edited yesterday Eliable asked yesterday EliableEliable 351 silver badge4 bronze badges 4 |
1 Answer
Reset to default 2There are several issues with invalid JS and selectors
Add card
to the classes and change data-class to data-theme
<div class="card Embers" data-theme="Embers-Theme-Card-Gradient"
<div class="card Darkmode-Theme-Card" data-theme="Darkmode-Theme-Card-Gradient"
jsfiddle because Stackoverflow does not allow localStorage
window.addEventListener("load", () => {
let settingsBox = document.getElementById("SettingsBox")
let themes = Array.from(settingsBox.querySelectorAll(".card")).map(card => card.dataset.theme);
let theme = themes[0]; // remove this and uncomment the next line
//localStorage.getItem("theme") || themes[0] // First theme is default
const bodyClassList = document.body.classList
// Apply the initial theme
bodyClassList.add(theme)
// Add event listener to SettingsBox
settingsBox.addEventListener("click", (e) => {
const tgt = e.target.closest("div.card");
if (!tgt) return; // not a card
const clickedTheme = tgt.dataset.theme
// Remove all theme classes from the body
bodyClassList.remove(...themes);
bodyClassList.add(clickedTheme);
// Save the selected theme to localStorage uncomment on your server
// localStorage.setItem("theme", clickedTheme);
})
})
body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position: absolute;
margin: auto;
}
.Embers-Theme-Card-Gradient{
background-image: url("https://i.postimg.cc/RFdn3tYZ/Embers-Background.png");
position:relative;
}
.Darkmode-Theme-Card-Gradient{
("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
position:relative;
}
.Coffee-Theme-Card-Gradient{
("https://i.postimg.cc/Njxp1Q0J/Coffee.png");
position:relative;
}
.Embers {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 6.5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 29%;
bottom: 80%;
}
.Embers> :where(h1,
p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker>div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker>div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker>div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker>div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Embers {
cursor: pointer;
}
.Darkmode-Theme-Card {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 5deg;
position: absolute;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left: 10%;
bottom: 80%;
}
.Darkmode-Theme-Card > :where(h1, p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker > div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker > div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker > div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker > div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Darkmode-Theme-Card
{
cursor:pointer;
}
#SettingsBox
{
position:relative;
height:850px;
width:1400px;
background-color:rgba(0, 0, 0, 0.25);
border-radius:20px;
box-shadow: -5px 5px 15px #111a;
margin:auto;
top:10%;
}
<div id="SettingsBox">
<div>
<div class="card Embers" data-theme="Embers-Theme-Card-Gradient">
<h1>Embers</h1>
<div class="mouse-position-tracker">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
</div>
<div class="card Darkmode-Theme-Card" data-theme="Darkmode-Theme-Card-Gradient">
<h1>Darkmode</h1>
<div class="mouse-position-tracker">
<div></div><div></div><div></div>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</div>
</div>
</div>
</div>
- 死忠安卓粉看iPhone 6S:根本没创新!
- 苹果WWDC2014:iOS 8新功能都有哪些?
- 手机防盗软件拍下“嫌疑人”可当呈堂证供
- visual studio code - Azure Functions HTTPTrigger running locally with VSCode weird bug but API still works .NET - Stack Overflow
- python - Arcpy seems to not carry out my SQL clause - Stack Overflow
- c# - Unity new input system generating multiple events - Stack Overflow
- filename has 'netboxlabs-diode-netbox-plugin', but metadata has 'unknown' - Stack Overflow
- node.js - Mongoose schema worked with the main db but not with test db - Stack Overflow
- performance testing - How to retrieve the dynamic value from the JMeter - Stack Overflow
- javascript - In Quill, how to add one button to the toolbar to add some text? - Stack Overflow
- batch file - Command segment in .omp.json Oh-my-posh theme - Stack Overflow
- azure managed identity - Durable Function error "This request is not authorized to perform this operation" - S
- python - testing the output of seaborn figure level plots - Stack Overflow
- excel - Add a rule to the VBA to remove filters - Stack Overflow
- javascript - How to Retrieve Logs from %temp%OfficeAddins.log.txt and Display Them in an Excale Add-in Side Panel - Stack Overfl
- python - Galaga game not running due to an empty range - Stack Overflow
- flutter - Exported Excel File is Blank When Using excel Package - Stack Overflow
document-getElementById ('Background')
– mplungjan Commented yesterday