To easily achieve this, it is recommended to utilize a database to store userSettingsTable colortheme information properties such as #000000 or #FFFFFF. This way, you can retrieve the information or update it whenever a user clicks on the color theme change, ensuring that the change is applied globally across all pages.
Below is an example of how you can implement this:
-------------Within HTML under the body tag---------
Firstly, declare the controller and app using ng-app="yourname" ng-controller="yourname"
<style ng-init=checkcolor()>
body{
background-color: {{colortheme}};
}
</style>
---------Within the Controller------
$scope.changeTheme = function (colortheme){
if(colortheme == '#000'){
$scope.colortheme = '#FFF';
$http({
method: "POST",
url: "fetch_data_user_colortheme.php",
data: {'user_profile':$scope.user_profile, 'color':$scope.colortheme,'action':'setcolor'}
}).then(function(response) {
console.log('changed to WHITE');
console.log($scope.user_profile);
console.log($scope.colortheme);
})
} else if (colortheme == '#FFF') {
$scope.colortheme = '#000';
$http({
method: "POST",
url: "fetch_data_user_colortheme.php",
data: {'user_profile':$scope.user_profile, 'color':$scope.colortheme,'action':'setcolor'}
}).then(function(response) {
console.log(response.data);
console.log('changed to DARK');
console.log($scope.user_profile);
console.log($scope.colortheme);
})
}
}
$scope.checkcolor = function (){
$http({
method: "POST",
url: "fetch_data_user_colortheme.php",
data: {'user_profile':$scope.user_profile, 'action':'getcolor'}
}).then(function(response) {
console.log(response.data);
$scope.colortheme = response.data.toString();
console.log($scope.colortheme.toString());
})
}
-----------Within the model/backend e.g., PHP--------------
<?php
//fetch_data_user_colortheme.php
$connect = new PDO("mysql:host=localhost;dbname=cinema_db", "root", "");
$form_data = json_decode(file_get_contents("php://input"));
if ($form_data->action == 'getcolor') {
$query = "SELECT colortheme FROM usersettingstable WHERE user_fk='".$form_data->user_profile."'";
$statement = $connect->prepare($query);
if ($statement->execute()) {
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row['colortheme'];
}
}
}
elseif ($form_data->action == 'setcolor') {
$query = "
UPDATE usersettingstable
SET user_fk='".$form_data->user_profile."', colortheme='".$form_data->color."'
";
$statement = $connect->prepare($query);
if($statement->execute())
{
}
$query = "SELECT colortheme FROM usersettingstable
WHERE user_fk='".$form_data->user_profile."'";
$statement = $connect->prepare($query);
if ($statement->execute()) {
while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row['colortheme'];
}
}
}
echo json_encode($data);
?>
Additionally, ensure to include the checkcolor() function in other pages as well by calling it within a controller using ng-init="checkcolor()". This will help maintain the color settings across all pages, and you may need to make adjustments accordingly.
$scope.checkcolor = function (){
$http({
method: "POST",
url: "fetch_data_user_colortheme.php",
data: {'user_profile':$scope.user_profile,
'action':'getcolor'}
}).then(function(response) {
console.log(response.data);
$scope.colortheme = response.data.toString();
console.log($scope.colortheme.toString());
document.body.style.background = $scope.colortheme;
})
}