From c61038ae971d9c2b8deedd10f9e491ad5675923e Mon Sep 17 00:00:00 2001 From: Shivam Kaushik <105926192+ShivamKaushik316@users.noreply.github.com> Date: Sun, 5 Mar 2023 16:12:35 +0530 Subject: [PATCH 1/6] For dark mode --- darkmode.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 darkmode.js diff --git a/darkmode.js b/darkmode.js new file mode 100644 index 0000000..462fedb --- /dev/null +++ b/darkmode.js @@ -0,0 +1,17 @@ +const options={ + + bottom: '64px', // default: '32px' + right: '32px', // default: '32px' + left: 'unset', // default: 'unset' + time: '0.7s', // default: '0.3s' + mixColor: '#fff', // default: '#fff' + backgroundColor: '#fff', // default: '#fff' + buttonColorDark: '#100f2c', // default: '#100f2c' + buttonColorLight: '#fff', // default: '#fff' + saveInCookies: true, // default: true, + label: '🌓', // default: '' + autoMatchOsTheme: true // default: true + +} +const darkmode = new Darkmode(options); +darkmode.showWidget(); \ No newline at end of file From 7772e6d3753b991f99752cfe91396f38301e706f Mon Sep 17 00:00:00 2001 From: Shivam Kaushik <105926192+ShivamKaushik316@users.noreply.github.com> Date: Sun, 5 Mar 2023 16:13:10 +0530 Subject: [PATCH 2/6] Delete darkmode.js --- darkmode.js | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100644 darkmode.js diff --git a/darkmode.js b/darkmode.js deleted file mode 100644 index 462fedb..0000000 --- a/darkmode.js +++ /dev/null @@ -1,17 +0,0 @@ -const options={ - - bottom: '64px', // default: '32px' - right: '32px', // default: '32px' - left: 'unset', // default: 'unset' - time: '0.7s', // default: '0.3s' - mixColor: '#fff', // default: '#fff' - backgroundColor: '#fff', // default: '#fff' - buttonColorDark: '#100f2c', // default: '#100f2c' - buttonColorLight: '#fff', // default: '#fff' - saveInCookies: true, // default: true, - label: '🌓', // default: '' - autoMatchOsTheme: true // default: true - -} -const darkmode = new Darkmode(options); -darkmode.showWidget(); \ No newline at end of file From 04a0007ac007311b9cdb4791a2967f96135d17e6 Mon Sep 17 00:00:00 2001 From: Shivam Kaushik <105926192+ShivamKaushik316@users.noreply.github.com> Date: Sun, 5 Mar 2023 16:14:11 +0530 Subject: [PATCH 3/6] Update index.html --- index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/index.html b/index.html index 70eec90..fe290cb 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + Github + + + + +
@@ -94,6 +100,7 @@
@@ -274,7 +281,10 @@ + + + From a4969630d996c753026e4c010e6622f4a838641f Mon Sep 17 00:00:00 2001 From: Shivam Kaushik <105926192+ShivamKaushik316@users.noreply.github.com> Date: Sun, 5 Mar 2023 16:14:36 +0530 Subject: [PATCH 4/6] For dark mode --- css/style.css | 121 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) diff --git a/css/style.css b/css/style.css index 183f682..bc56ea6 100644 --- a/css/style.css +++ b/css/style.css @@ -24,6 +24,7 @@ button:hover { .navbar { display: flex; + justify-content: space-between; align-items: center; position: sticky; @@ -53,6 +54,7 @@ button:hover { } .nav-item { + isolation: isolate; margin-left: 5px; margin-top: 15px; } @@ -70,7 +72,9 @@ button:hover { } .logo__color { + isolation: isolate; color: #9a2ca0; + } li { @@ -102,6 +106,7 @@ a { } .section__button__colored { + isolation: isolate; background-color: #9a2ca0; font-weight: 500; font-size: 20px; @@ -204,6 +209,7 @@ a { } .footer-container { + isolation: isolate; background-color: #9a2ca0; } @@ -309,3 +315,118 @@ a { line-height: 10px; } } + + + + + + + +#switch{ + filter:invert(1); + width:30px; + cursor: pointer; +} + +.darkmode--activated .nav-link{ + color:white; +} + + + + + + + + + + +.darkmode--activated .navbar{ + + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + background-color: #16161654; + /* background: transparent; */ + backdrop-filter: blur(15px); + z-index: 99; + line-height: 20px; + z-index: 4; + +} +.darkmode--activated .nav-link{ + font-size: 16px; + font-weight: 400; + color: #fff8f8; + z-index: 4; +} +.darkmode--activated .body{ + background-color: #7e6e6ee0; + z-index: 4; +} + + +.darkmode--activated .section-card-outline{ + width: 309px; + border-radius: 20px; + /* box-shadow: 3px 3px 4px rgb(0 0 0 / 10%); */ + box-shadow: rgb(17 17 26 / 5%) 0px 1px 0px, rgb(17 17 26 / 10%) 0px 0px 8px; + height: 341px; + background-color: #5e5359a1; + margin: 0 auto; + margin-top: 50px; + cursor: pointer; + transition: 0.2s ease-in-out; + z-index: 1; + +} +#image{ + z-index: -1; +} +.darkmode--activated .img { + filter: contrast(0); + filter: invert(1); + vertical-align: middle; + z-index: 4; + border-style: none; +} +.darkmode--activated .section__card__content { + margin: 12px 33px; + font-family: Poppins; + font-style: normal; + font-weight: normal; + font-size: 18px; + z-index: 4; + line-height: 27px; + color: #000000; +} + + +.darkmode--activated .footer-content{ + + background: #16161654; + padding: 20px; + display: flex; + flex-direction: column; + z-index: 4; + justify-content: center; + align-items: center; +} + +.darkmode--activated .footer__content__copyright { + font-family: Poppins; + font-style: normal; + font-weight: bold; + font-size: 20px; + line-height: 30px; + padding-bottom: 20px; + text-align: center; + color: #ffffff; + background: #40404021; + +} +.darkmode-layer, .darkmode-toggle { + z-index: 0; +} From 6f3f1f6a75001e47c0b223f3211b74b56b1003f6 Mon Sep 17 00:00:00 2001 From: Shivam Kaushik <105926192+ShivamKaushik316@users.noreply.github.com> Date: Sun, 5 Mar 2023 16:15:18 +0530 Subject: [PATCH 5/6] Adding dark mode --- js/darkmode.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 js/darkmode.js diff --git a/js/darkmode.js b/js/darkmode.js new file mode 100644 index 0000000..462fedb --- /dev/null +++ b/js/darkmode.js @@ -0,0 +1,17 @@ +const options={ + + bottom: '64px', // default: '32px' + right: '32px', // default: '32px' + left: 'unset', // default: 'unset' + time: '0.7s', // default: '0.3s' + mixColor: '#fff', // default: '#fff' + backgroundColor: '#fff', // default: '#fff' + buttonColorDark: '#100f2c', // default: '#100f2c' + buttonColorLight: '#fff', // default: '#fff' + saveInCookies: true, // default: true, + label: '🌓', // default: '' + autoMatchOsTheme: true // default: true + +} +const darkmode = new Darkmode(options); +darkmode.showWidget(); \ No newline at end of file From e413eb2fe82497ac42df3f599aef565a0a32bb71 Mon Sep 17 00:00:00 2001 From: Shivam Kaushik <105926192+ShivamKaushik316@users.noreply.github.com> Date: Sun, 5 Mar 2023 16:19:39 +0530 Subject: [PATCH 6/6] Dark mode for community page --- community.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/community.html b/community.html index 6ac78a1..5146885 100644 --- a/community.html +++ b/community.html @@ -133,7 +133,9 @@ + +