From 168b87b0a3ec8bee1446ea7673735dd19612cb01 Mon Sep 17 00:00:00 2001 From: Arnab Mandal Date: Sun, 16 Oct 2022 00:16:00 +0530 Subject: [PATCH 1/3] DarkMode modified in all pages with localstorage --- .vscode/settings.json | 2 +- account.html | 28 ++++++-- allproducts.html | 30 +++++--- cart.html | 28 ++++++-- contact.html | 35 +++++++--- index.html | 31 ++++++--- productdetail.html | 34 +++++++--- style.css | 154 ++++++++++++++++++------------------------ theme.js | 65 ++++++++++++++++++ 9 files changed, 264 insertions(+), 143 deletions(-) create mode 100644 theme.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 4798424..63662ed 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/account.html b/account.html index 0d7c1ba..f350a9e 100644 --- a/account.html +++ b/account.html @@ -35,6 +35,13 @@ href="path-to-fontawesome/font-awesome.css" /> + + + + + + + @@ -43,7 +50,7 @@
- + -
- - -
-
+
@@ -189,6 +199,10 @@

Follow Us

+ + + + \ No newline at end of file diff --git a/allproducts.html b/allproducts.html index b0dc83a..baa6d25 100644 --- a/allproducts.html +++ b/allproducts.html @@ -37,6 +37,13 @@ href="path-to-fontawesome/font-awesome.css" /> + + + + + + + @@ -46,7 +53,7 @@
- + -
- - -
-
+
@@ -74,7 +84,7 @@
-

Our Products

+

Our Products

+
@@ -272,6 +282,10 @@

Follow Us

}, 3000); } + + + + \ No newline at end of file diff --git a/contact.html b/contact.html index 479b6ed..dbfc5a4 100644 --- a/contact.html +++ b/contact.html @@ -36,6 +36,13 @@ rel="stylesheet" href="path-to-fontawesome/font-awesome.css" /> + + + + + + + @@ -44,7 +51,7 @@
- + -
- - -
-
@@ -72,18 +81,18 @@
-

Contact Us

+

Contact Us

- +
- +
- +
@@ -122,6 +131,10 @@

Contact Us

}) + + + + \ No newline at end of file diff --git a/index.html b/index.html index ebc986e..802bd6c 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,13 @@ rel="stylesheet" href="path-to-fontawesome/font-awesome.css" /> + + + + + + + @@ -40,7 +47,7 @@
-
- - -
-
+
-

+

Give Your Workout
A New Style!

@@ -300,14 +309,14 @@

Black jogger Puma

-
+

Exclusively Available on RedStore

-

Smart Band 4

+

Smart Band 4

The Mi Smart Band 4 feature a 39.9% larger(than Mi Band 3) AMOLCD color full touch display with adjustable brightness ,so everything @@ -550,5 +559,9 @@

Follow Us

document.getElementById("myDiv").style.display = "block"; } + + + + diff --git a/productdetail.html b/productdetail.html index e422d4f..0497640 100644 --- a/productdetail.html +++ b/productdetail.html @@ -13,6 +13,13 @@ + + + + + + + @@ -20,7 +27,7 @@
- + -
- - -
-
+
@@ -65,7 +75,7 @@

Home / T-Shirt

-

Red Printed T-Shirt by PUMA

+

Red Printed T-Shirt by PUMA

Rs. 

450

@@ -92,7 +102,7 @@

Add To Cart

-

Product Details

+

Product Details


Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum doloribus eligendi quidem hic, facere atque sit laborum maiores nostrum eveniet amet non sunt deserunt. Dolor commodi voluptatibus minus atque doloribus? @@ -104,7 +114,7 @@

Product Details

-

Related Products

+

Related Products

View More

@@ -336,6 +346,10 @@

Follow Us

} } + + + + \ No newline at end of file diff --git a/style.css b/style.css index 36b754f..1a5bcc8 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,9 @@ @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); +:root{ + --textColor:#555; +} + /* Center the loader */ #loader { @@ -162,11 +166,11 @@ nav ul li { a { text-decoration: none; - color: #555; + color: var(--textColor); } p { - color: #555; + color: var(--textColor); } .container { @@ -302,7 +306,7 @@ linear for gradiancy on basis to vertically */ margin: 0 auto 80px; position: relative; line-height: 60px; - color: #555; + color: var(--textColor); } .title::after { @@ -318,7 +322,7 @@ linear for gradiancy on basis to vertically */ } h4 { - color: #555; + color: var(--textColor); font-weight: normal; } @@ -348,7 +352,7 @@ h4 { } small { - color: #555; + color: var(--textColor); } @@ -389,7 +393,7 @@ small { .testimonial .col-3 h3 { font-weight: 600; - color: #555; + color: var(--textColor); font-size: 16px; } @@ -790,7 +794,7 @@ th:last-child { .form-container span { font-weight: bold; padding: 0 10px; - color: #555; + color: var(--textColor); cursor: pointer; width: 100px; display: inline-block; @@ -1062,88 +1066,6 @@ form a { } -/* THEME BUTTON */ - -.toggle { - width: 40px; - height: 22px; - margin-left: 25px; - background-color: whitesmoke; - border-radius: 30px; - display: flex; - align-items: center; - justify-content: space-around; - position: relative; -} - -.toggle-icon { - color: goldenrod; -} - -.toggle-ball { - width: 18px; - height: 18px; - background-color: black; - position: absolute; - right: 2px; - border-radius: 50%; - cursor: pointer; -} - -.header.active { - background-color: #000; -} - -.container.active { - background-color: #000; -} - -.navbar.active { - background-color: #000; - color: white; -} - -.menu-icon.active { - color: white; -} - -.row.active { - background-color: #000; - color: white; -} - -body.active { - background-color: #000; -} - -.toggle.active { - background-color: #000; -} - -.toggle-ball.active { - background-color: white; - transform: translateX(-20px); -} - -/* change color of navbar heading to white on toggle */ - -#MenuItems.active > li > a { - color: white; -} - -/* change color of contact page heading to white on toggle */ - -.form-title.active { - color: white; -} - -/* cart image in dark mode */ - -.cart-image.bgm-change { - background-color: white; -} - - /*footer image mouse style to pointer*/ .footer-img { @@ -1242,4 +1164,56 @@ body.active { color: #fff; margin-left: -10px; border: 1px solid black; -} \ No newline at end of file +} + +/* Toogle Button */ +.checkbox { + margin: 10px 10px; + opacity: 0; + position: absolute; + z-index: 10; + height: 2rem; + width: 4rem; + cursor: pointer; + } + + .label { + margin: 10px 10px; + width: 50px; + height: 25px; + background-color: #111; + border-radius: 50px; + align-items: center; + justify-content: space-between; + padding: 5px; + position: absolute; + transform: scale(1); + } + + .ball { + width: 20px; + height: 20px; + background-color: white; + position: absolute; + top: 2px; + left: 2px; + border-radius: 50%; + transition: transform 0.2s linear; + } + + .checkbox:checked + .label .ball { + transform: translateX(24px); + } + + .fa-moon { + position: absolute; + right: 5px; + color: pink; + } + + .fa-sun { + position: absolute; + left: 5px; + color: yellow; + } + \ No newline at end of file diff --git a/theme.js b/theme.js new file mode 100644 index 0000000..5b7e6f8 --- /dev/null +++ b/theme.js @@ -0,0 +1,65 @@ + +function setDarkTheme(){ + $('body,.form-container,.input-field').css({ "background-color": "#212121" }); + $('.header').css({ "background": "#181818" }); + $('.offer,.account-page').css({ "background": "#181818" }); + $('.title,.offer-title,.heading,.page-btn').css({ "color": "white" }); + $('.effects').css({"color" : "white"}); + $('.cart-image').css({"filter" : "invert()"}); + $('.icon').attr("src","images/logo-white.png"); + $(':root').css({"--textColor":"#D1D0D0"}) + $('.col-3 p').css({"color" : "#D1D0D0"}); + $('#light').prop("checked", true); +} + +function setLightTheme(){ + $('body,.form-container,.input-field').css({ "background-color": "white" }); + $('.header').css({ "background": "radial-gradient(#fff, #ffd6d6)" }); + $('.offer,.account-page').css({ "background": "radial-gradient(#fff, #ffd6d6)" }); + $('.title,.offer-title,.heading,.page-btn').css({ "color": "#555" }); + $('.cart-image').css({"filter" : "initial"}); + $('.icon').attr("src","images/logo.png"); + $(':root').css({"--textColor":"#555"}) + $('.col-3 p').css({"color" : "#777"}); + $('#light').prop("checked", false); +} + +var prefersDarkThemeMql = window.matchMedia("(prefers-color-scheme: dark)"); + +prefersDarkThemeMql.addEventListener("change", function(mql) { + if (localStorage.getItem("darkmode") === null && mql.matches) { + setDarkTheme(); + } else { + setLightTheme(); + } +}) + +$(document).ready(function () +{ + + if ( + localStorage.getItem("darkmode") === "true" || + (localStorage.getItem("darkmode") === null && prefersDarkThemeMql.matches) + ) + { + setDarkTheme(); + } + else{ + setLightTheme(); + } + + $('#light').on("change paste keyup", function (e) + { + if (!e.target.checked) + { + setLightTheme(); + localStorage.setItem("darkmode", false); + } + else + { + setDarkTheme(); + localStorage.setItem("darkmode", true); + } + }); +}); + From fa1ca1f36e691784e9d2f6e899b1e596e41fcd87 Mon Sep 17 00:00:00 2001 From: Arnab Mandal <99715406+helloArnab@users.noreply.github.com> Date: Sun, 16 Oct 2022 00:21:54 +0530 Subject: [PATCH 2/3] Update settings.json --- .vscode/settings.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 63662ed..414d9c3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5502 -} \ No newline at end of file + "liveServer.settings.port": 5501 +} From 944250ebf941f6dd45aa0891fb8b5e113a687141 Mon Sep 17 00:00:00 2001 From: Arnab Mandal <99715406+helloArnab@users.noreply.github.com> Date: Sun, 16 Oct 2022 00:25:37 +0530 Subject: [PATCH 3/3] Update style.css --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 1a5bcc8..5efd0dd 100644 --- a/style.css +++ b/style.css @@ -1215,5 +1215,5 @@ form a { position: absolute; left: 5px; color: yellow; - } - \ No newline at end of file + } +