On my site I am using localStorage so when a User selects a theme it then applies said theme to the relevant pages.
now this works for each individual user, however if you logout of account 1 and login with account 2 on the same device it applies it to all other accounts logged into that device.
Furthermore when the theme has been applied if I was to login on a different device it still shows the default theme?
how would I have it only affect the specific account and have the theme choice shared across devices?
Down below is the Codepen and full code:
However Please go to Codepen to see the script I was unable to upload the code correctly parts of the formatting are being ignored.
Codepen: https://codepen.io/Elixble/pen/RwzZaWB
Follow this link to see the corresponding .php page: https://codepen.io/Elixble/pen/RNbxZvz?editors=1000
'<div id="homepage">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body id="Background">
<div id="homepage-row1">
<div class="sectiontext">Settings</div>
</div>
<div id="Settings-Menu-Bar">
<a href="/SettingsAccountInfo">
<button id="Account-Info-Button">Account Info</button>
</a>
<a href="/Privacy">
<button id="Privacy-Info-Button">Privacy</button>
</a>
<a href="/Notifications">
<button id="Notifications-Settings-Button">Notifications</button>
</a>
<a href="/Themes">
<button id="Theme-Settings-Button">Themes</button>
</a>
<a href="/DMSettings">
<button id="DirectMessage-Settings-Button">Direct Messages</button>
</a>
<div id="ComingSoon">Coming Soon</div>
<button id="VPN-Settings-Button">VPN</button>
<button id="Payment-Options">Payment Options</button>
</div>
<div class="Embers-Theme-Card" 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 class="CherryBlossom-Theme-Card" data-class="CherryBlossom-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>CherryBlossom</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="Mint-Theme-Card" data-class="Mint-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Mint</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="Sunrise-Theme-Card" data-class="Sunrise-Theme-Card-Gradient" onclick="myFunction(this)">
<h1>Sunrise</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>
</body>
Extra challenge: Just being a bit cheeky but the Aux theme is meant to be animated but I dont know how to get gifs to play in the background so feel free to see if you can.