On the home page, I want to change the color scheme so that it is consistent across all pages. The user should be able to choose a color from a list on the home page and have it apply to every page. Currently, the color selection only applies to the home page, but I need it to carry over to other pages as well.
I have already implemented a dropdown menu for selecting colors on the home page. However, when I navigate to another page like home1.html using a hyperlink, I want the same color to be displayed there too. How can I achieve this functionality?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
<h4>
<small>color box</small>
</h4>
<select ng-model="color">
<option value="">--- Select a color ---</option>
<option value="{{c}}" style="background-color:{{c}}"
ng-repeat="c in colors">
{{c}}
</option>
</select>
<p>Selected color: <b style="color:{{color}}">{{color}}</b></p>
<div style="background-color:{{color}}">
<div class="square" style="background-color:{{color}}">
<a href="home1.html">Visit our page </a>
</div>
</div>
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.colors = ['Blue', 'Cyan', 'Green', 'Orange', 'Pink', 'Purple', 'Red'];
$scope.objects = [
{id: 1, color: 'Blue'},
{id: 2, color: 'Cyan'},
{id: 3, color: 'Green'},
{id: 4, color: 'Orange'},
{id: 5, color: 'Pink'},
{id: 6, color: 'Purple'},
{id: 7, color: 'Red'}
];
});
</script>
<style>
p { background-color: LightGray; }
.blue { background-color: Blue; }
.cyan { background-color: Cyan; }
.green { background-color: Green; }
.orange { background-color: Orange; }
.pink { background-color: Pink; }
.purple { background-color: Purple; }
.red { background-color: Red; }
.square {
background: #000;
width: 20vw;
height: 10vw;
}
.square h1 {
color: #fff;
}
</style>