Będziesz potrzebował w bazie oprócz zmiennych dla nazwy i hasła również zmiennej dla koloru. Po zalogowaniu ustawiasz kolor diva na ten z bazy.
co do samego ustawiania to przeanalizuj poniższy kod - trochę powinno pomoc, "zasymulowałem" w nim baze przy pomocy tablicy userów, ale generalnie zasada jest podobne:
loguje się -> z bazy ustawiany jest kolor użytkownika -> do przycisku przypisywany jest id użytkownika, którego kolor ma się ewentualnie zmienić -> po zmianie nowy kolor się ustawia i jest również podmieniany w bazie.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Logowanie</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div id='background'>
<select id='user-select' onchange='login();'>
<option value=0 selected >pierwszy</option>
<option value=1>drugi</option>
</select>
<h3>użytkownik</h3>
<h4 id='user-name'></h4>
<p>wybierz kolor:</p>
<input id='color-input' type='color' value='#FFFFFF'>
</div>
<script src='main.js'></script>
</body>
</html>
main.js
function User(id, color, name) {
this.id = id;
this.color = color;
this.name = name;
}
const firstUser = new User(0,'#FFFFFF', 'uzytkownik_1');
const secondUser = new User(1,'#FFFFFF', 'uzytkownik_2');
const users = [];
users.push(firstUser);
users.push(secondUser);
const background = document.querySelector('#background');
const userName = document.querySelector('#user-name');
const colorInput = document.querySelector('#color-input');
userName.innerHTML = users[0].name;
colorInput.value = users[0].color;
colorInput.onchange = function() { changeColor(0); };
function login() {
let whichUser = parseInt(document.querySelector('#user-select').value);
userName.innerHTML = users[whichUser].name;
background.style.backgroundColor = users[whichUser].color;
colorInput.value = users[whichUser].color;
colorInput.onchange = function() { changeColor(whichUser); };
}
function changeColor(user) {
let i = user;
users[i].color = colorInput.value;
background.style.backgroundColor = colorInput.value;
}
Jeżeli chodzi o dane z bazy do js i na odwrót to obejrzyj:
https://www.youtube.com/watch?v=82hnvUYY6QA
przyda Ci się również:
https://miroslawzelent.pl/kurs-php/logowanie-do-strony-sesja-wstrzykiwanie-sql/