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>
最新文章
- 谷歌强推安卓8.0系统：明年所有APP都必须支持
- OS X故障不断 苹果MAC被爆Wifi故障
- Windows 8—微软反击苹果的终极武器
- 80后回忆录 那些年我们折腾过的IT玩意
- selenium webdriver - Instagram "Post" button when sending Python comment - Stack Overflow
- flutter - App Name Not Updating in Android Recent Apps View Despite Manifest and Strings Configuration - Stack Overflow
- macos - Can't access UI "section" in AppleScript - Stack Overflow
- javascript - How to create perfect hash with ASCII symbols as input, where output hash is always the same for each ASCII sequenc
- linux - Unable to access devttyS0 as a regular user, despite having the right permissions - Stack Overflow
- google colaboratory - Load a Kaggle dataset into Colab notebook without extracting it - Stack Overflow
- circom - Pedersen Commitment Homomorphic Addition Issue - Stack Overflow
- The blender. How to combine multiple textures into one - Stack Overflow
- php - New default Moodle setup, no cssimages? - Stack Overflow
- python - Unet isn't working orand i'm not using it correctly - Stack Overflow
- python - NaN loss output when training DNN with Keras - Stack Overflow
- flash - Movie clip loading display problem in ActionScript 2 - Stack Overflow
- arkit - Detecting and Using 2 Different Vertical Planes - Stack Overflow
document-getElementById ('Background')– mplungjan Commented yesterday