diff --git a/src/scenarios/user-preferences/index.ejs b/src/scenarios/user-preferences/index.ejs
new file mode 100644
index 0000000..c6fc9c4
--- /dev/null
+++ b/src/scenarios/user-preferences/index.ejs
@@ -0,0 +1,20 @@
+<%- include(commonPath + '/header.ejs') %>
+
+ <%- include(commonPath + '/internal-page/header.ejs') %>
+
Here you can set you prefered theme.
+
+
+ <%- include(commonPath + '/internal-page/footer.ejs') %>
+
+
+
+
+<%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/user-preferences/routes.js b/src/scenarios/user-preferences/routes.js
new file mode 100644
index 0000000..607efc1
--- /dev/null
+++ b/src/scenarios/user-preferences/routes.js
@@ -0,0 +1,40 @@
+const express = require('express');
+const path = require('path');
+const router = express.Router();
+
+router.get('/', (req, res) => {
+ res.render(path.join(__dirname,'index'), {
+ title: 'User Preferences'
+ });
+});
+
+router.get( '/get-user-preference', ( req, res ) => {
+ const currentTheme = req.cookies.theme || 'light';
+ res.json( { theme: currentTheme });
+});
+
+router.post( '/set-user-preference', ( req, res ) => {
+ const { theme } = req.body;
+
+ if (!theme) {
+ res.status(400).send({ message: 'Invalid request' });
+
+ }
+
+ res.cookie('theme', theme, {
+ domain: res.locals.domainC,
+ maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
+ httpOnly: true,
+ sameSite: "none",
+ secure: true
+ });
+ res.status(200).send({ message: 'Success', theme : theme});
+});
+
+// Serve the user-preference.js file to the site
+router.get('/user-preference.js', (req, res) => {
+ res.set('Content-Type', 'application/javascript');
+ res.render(path.join(__dirname,'user-preference'));
+});
+
+module.exports = router;
diff --git a/src/scenarios/user-preferences/user-preference.ejs b/src/scenarios/user-preferences/user-preference.ejs
new file mode 100644
index 0000000..7fec842
--- /dev/null
+++ b/src/scenarios/user-preferences/user-preference.ejs
@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const baseURL = '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/user-preferences';
+ const pageContainer = document.getElementById('theme-container');
+ const themeSwitcher = document.getElementById('dark-mode-switch');
+
+ function updateUserPreference() {
+ fetch(`${baseURL}/get-user-preference`)
+ .then(response => {
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
+ }
+ return response.json();
+ })
+ .then(data => {
+ const theme = data.theme;
+ console.log(data.theme)
+ pageContainer.className = theme;
+ themeSwitcher.checked = theme === 'dark';
+ })
+ .catch(error => {
+ console.error('There has been a problem with your fetch operation:', error);
+ });
+ }
+
+ function toggleTheme() {
+ fetch( `${baseURL}/set-user-preference`, {
+ method: 'POST',
+ credentials: 'include',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ theme: themeSwitcher?.checked ? 'dark' : 'light' })
+ })
+ .then(response => response.json())
+ .then(data => {
+ pageContainer.className = data.theme;
+ });
+ }
+ window.toggleTheme = toggleTheme;
+ updateUserPreference();
+});
diff --git a/src/styles/input.css b/src/styles/input.css
index bd6213e..23fc465 100644
--- a/src/styles/input.css
+++ b/src/styles/input.css
@@ -1,3 +1,92 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+@layer base {
+
+ :root {
+ --bullet-toggle-size: 46px;
+ --toogle-width: 100px;
+ --toogle-height: 54px;
+ --light-mode-background: #f1c40f;
+ --dark-mode-background: #025BDF;
+ --dark-container-background: #3F3F3F;
+ --dark-container-text: #fff;
+ }
+
+ .dark-mode-toggle {
+ position: relative;
+ display: inline-block;
+ width: var(--toogle-width);
+ height: var(--toogle-height);
+ }
+
+ .dark-mode-toggle input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ .dark-mode-toggle label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #EEE;
+ border-radius: 30px;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+ }
+
+ .dark .dark-mode-toggle label {
+ background-color: #fff;
+ }
+
+ .dark-mode-toggle label .bullet {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 5%;
+ transform: translate(0, -50%);
+ width: var(--bullet-toggle-size);
+ aspect-ratio: 1;
+ background-color: var(--light-mode-background);
+ border-radius: 50%;
+ transition: background-color 0.2s ease-in-out;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .dark-mode-toggle input:checked + label .bullet {
+ background-color: var(--dark-mode-background);
+ left: 95%;
+ transform: translate(-100%, -50%);
+ }
+
+ .sun,
+ .moon {
+ position: relative;
+ z-index: 100;
+ fill: #fff;
+ }
+
+ .moon {
+ display: none;
+ }
+
+ .dark-mode-toggle input:checked + label .moon {
+ display: block;
+ }
+
+ .dark-mode-toggle input:checked + label .sun {
+ display: none;
+ }
+
+ .dark .page-card {
+ background-color: var(--dark-container-background);
+ color: var(--dark-container-text);
+ }
+
+}
\ No newline at end of file