diff --git a/about.html b/about.html
index 5d38f873..9db4afb8 100644
--- a/about.html
+++ b/about.html
@@ -35,6 +35,10 @@
/>
+
+
+
+
@@ -73,6 +77,13 @@
+
+ Light Mode
+
+
Beyond Zero to Mastery
diff --git a/beyondztm.html b/beyondztm.html
index 627b87ac..aa49c278 100644
--- a/beyondztm.html
+++ b/beyondztm.html
@@ -15,6 +15,10 @@
+
+
+
+
@@ -42,6 +46,13 @@
+
+ Light Mode
+
+
Beyond Zero to Mastery
diff --git a/contributersProfile.html b/contributersProfile.html
index 8f794b73..54518f35 100644
--- a/contributersProfile.html
+++ b/contributersProfile.html
@@ -17,6 +17,10 @@
+
+
+
+
@@ -46,6 +50,13 @@
+
+ Light Mode
+
+
Beyond Zero to Mastery
diff --git a/index.html b/index.html
index ac48d3b6..775af8f9 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
-
+
@@ -20,6 +20,10 @@
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
+
+
+
@@ -51,6 +55,13 @@
+
+ Light Mode
+
+
diff --git a/instructor.html b/instructor.html
index 57237856..dde7e8fb 100644
--- a/instructor.html
+++ b/instructor.html
@@ -35,6 +35,10 @@
/>
+
+
+
+
@@ -72,6 +76,13 @@
+
+ Light Mode
+
+
Beyond Zero to Mastery
diff --git a/register.html b/register.html
index 0e4d2663..bff0bb9c 100644
--- a/register.html
+++ b/register.html
@@ -34,6 +34,10 @@
/>
+
+
+
+
@@ -63,6 +67,13 @@
+
+ Light Mode
+
+
Beyond Zero to Mastery
diff --git a/resources/scripts/themeToggle.js b/resources/scripts/themeToggle.js
new file mode 100644
index 00000000..60847bb4
--- /dev/null
+++ b/resources/scripts/themeToggle.js
@@ -0,0 +1,35 @@
+// Dark Theme Global JS (by Yusuf)
+
+const html = document.querySelector('html');
+// const images = document.querySelectorAll('img');
+// const pictures = document.querySelectorAll('pictures');
+// const videos = document.querySelectorAll('video');
+
+const themeToggle = document.querySelector('.theme-toggle');
+const themeToggleText = document.querySelector('.theme-toggle-text');
+
+let darkMode = false;
+
+// function inverter(elements) {
+// if (darkMode) {
+// elements.forEach(element => element.classList.add('invert'));
+// } else {
+// elements.forEach(element => element.classList.remove('invert'));
+// }
+// };
+
+function toggleTheme() {
+ darkMode = !darkMode;
+
+ if (darkMode) {
+ html.setAttribute('theme', 'dark');
+ themeToggleText.textContent = 'Dark Mode';
+ // themeToggleText.style.color = 'white';
+ } else {
+ html.setAttribute('theme', 'light');
+ themeToggleText.textContent = 'Light Mode';
+ // themeToggleText.style.color = 'black';
+ };
+};
+
+themeToggle.addEventListener('change', toggleTheme);
\ No newline at end of file
diff --git a/resources/style/style.css b/resources/style/style.css
index 8d09e45e..550db8f9 100644
--- a/resources/style/style.css
+++ b/resources/style/style.css
@@ -1,520 +1,520 @@
-/* GENERAL SECTION */
-body {
- margin: 0;
- padding: 0;
- color: #000000;
-}
-
-#course-button {
- margin: 30px;
- padding: 10px 20px;
- transition: 0.2s;
-}
-
-#course-button:hover {
- background-color: #007bff;
- color: #fff;
- transform: scale(1.2);
-}
-
-#course-button:hover {
- transform: scale(10.20);
- animation: pulse 2s infinite,
- nudge 5s linear infinite alternate;
-}
-
-/* NAVBAR STYLE */
-nav.navbar button.navbar-toggler {
- margin-right: auto;
- border-color : rgba(210, 69, 75, 0.15);
- background-color: #fbd6db4f;
-}
-
-.navbar-light.scrolled {
- background-color: #fff !important;
- color: #000 !important;
- transition: background-color 400ms ease-out;
-}
-
-.buttons>a>i {
- cursor: pointer;
- transition: opacity 200ms;
-}
-
-/* REMOVED BELOW DUE TO RESTYLING */
-
-/* .navbar-light.scrolled a {
- color: #000 !important;
- font-family: "Montserrat", sans-serif;
-}
-
-.navbar-light {
- /* background-color: transparent !important; causes issue with minimized nav */
-
- /* background-color: #fff;
-} */
-
-.navbar {
- background-color: rgba(0,0,0,0);
- border-bottom: 1px solid rgba(0, 0, 0, 0.125);
- border-bottom-width: 1px;
- border-bottom-style: solid;
- border-bottom-color: rgba(0, 0, 0, 0.125);
- box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15) !important;
-}
-
-.navbar-light .navbar-nav .nav-link {
- color: rgb(0, 0, 0) !important;
-}
-
-/* Navbar colours for Javascript */
-
-.light {
- background-color: #e5e0e0;
-}
-
-.transparent {
- background-color: rgba(0,0,0,0);
-
- background-color: #fff;
- -webkit-box-shadow: 0px 12px 21px 0px rgba(0,0,0,0.58);
- box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.322);
-}
-
-.navbar-brand img {
- height: 45px;
- width: auto;
- margin: 0;
- padding: 0;
-}
-
-
-
-.navbar a {
- font-family: "Montserrat", sans-serif;
- font-size: 16px;
-}
-.navbar a:hover {
- color: #000 !important;
-}
-
-.nav-link {
- color: #e5e0e0;
-}
-
-.navbar a:hover,
-.navbar-dark a:hover {
- transition: all 0.3s ease-out;
- background-color: #d1d1d1;
-}
-
-.navbar a:focus {
- outline: 2px dotted #a4afd4;
-}
-
-.nav-item a:hover{
- background-color: #d1d1d1;
- border-radius: 5px;
-}
-
-.navbar-collapse ul {
- margin-left: auto;
-}
-
-.navbar-collapse ul li {
- margin: auto 10px;
- padding: 0 1rem;
-}
-
-/* HEADER SECTION */
-.header-container {
- height: 100vh;
- background-image: url("../images/laptop-header.jpg");
- /* background-position: fixed;
- background-repeat: no-repeat;
- background-size: cover;
- position: relative; */
- margin: 0;
- padding: 0;
-}
-
-.course-details-content h2{
- color: #e6e6e6;
-}
-
-.parallax {
- /* Create the parallax scrolling effect */
- background-attachment: fixed;
- background-position: top;
- background-repeat: no-repeat;
- background-size: cover;
-}
-
-.page-content {
- /* display: flex;
- flex-direction: column;
- justify-content: center; */
- text-align: center;
-}
-
-.flex {
- list-style-type: none;
- padding-left: 5px;
-}
-
-.header-container-bg-fade {
- height: 100%;
- width: 100%;
- background-color: #000000;
- opacity: 0.8;
- z-index: 1;
-}
-
-.header-content {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: #ffffff;
- text-align: center;
-}
-
-.masteryColor{
- color: yellow;
- font-weight: bold;
-}
-
-.header-content hr {
- background-color: #fff;
- width: 100%;
- margin: 2px auto;
-}
-
-.header-content h1 {
- width: 100%;
- margin-top: 80px;
- text-align: center;
- padding: 0;
- font-size: 3em;
- font-family: "Montserrat", sans-serif;
-}
-
-.header-content a {
- color: #ffffff;
- text-decoration: none;
-}
-
-.header-content a:focus {
- outline: 2px dotted #a4afd4;
-}
-
-.paragraph-block {
- padding: 2rem;
-}
-
-.paragraph {
- margin: 20px;
- border: 3px solid white;
- padding: 10px;
- border-radius: 8px;
-}
-
-/* DETAILS SECTION */
-
-.rounded {
- border-top: 4px solid rgba(99, 99, 99, 0.2);
- border-radius: 5px;
- width: 50%;
- margin: 0 auto;
-}
-
-.details-container {
- width: 100%;
- padding: 5rem 0;
- position: relative;
-}
-
-.details-container .row {
- margin: 100px 0px 100px 0px;
-}
-
-.details-container h2 {
- margin: 2rem 0rem 0rem 0rem;
- font-family: "Montserrat", sans-serif;
- font-weight: bold;
-}
-
-.details-container h4 {
- font-size: 2em;
-}
-
-.details-container p {
- margin: 0rem 0rem 0rem 0rem;
- font-family: "Montserrat", sans-serif;
-}
-
-.course-details-content {
- text-align: center;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
-}
-
-/*.course-details-content ul {
- margin: 1rem 0rem 0rem 0rem;
-}*/
-.course-details-content ul li{
- margin: 1rem 0rem 0rem 0rem;
-}
-
-#course-img {
- height: 300px;
-
- /* add smooth transition */
- transition: all .5s linear;
-}
-
-#course-img:hover {
- transition: transform 1s;
- transform: scale(1.1);
-}
-
-/* SOFTWARE DETAILS */
-.software-details {
- margin: 5rem 0;
- padding: 0rem;
- font-family: "Montserrat", sans-serif;
-}
-
-.software-details h2 {
- font-family: "Montserrat", sans-serif;
- text-align: center;
- font-weight: bold;
- margin-bottom: 2rem;
-}
-
-.software-details .row {
- padding: 0;
- margin: auto;
- width: 90%;
-}
-
-.software-details a {
- text-decoration: none;
- color: #000000;
-}
-
-.software-details a:focus {
- outline: 2px dotted #a4afd4;
-}
-
-.software-details .card {
- height: 10rem;
- width: 15rem;
- border: none;
-}
-
-.software-details img {
- width: 30%;
- height: 100%;
-}
-
-.software-details h4 {
- text-align: center;
-}
-
-/* FOOTER SECTION */
-.footer-container {
- color: #fff;
- background-color: #111;
- position: relative;
- padding: 4rem 2rem;
- text-align: center;
- font-family: "Montserrat", sans-serif;
-}
-
-.footer-container h5 {
- width: 100%;
-}
-
-#credits {
- width: 100%;
- position: absolute;
- bottom: 5%;
- left: 50%;
- transform: translate(-50%, 5%);
-}
-.a2a_button_instagram,
-.a2a_button_facebook,
-.a2a_button_twitter,
-.a2a_button_email,
-.a2a_button_whatsapp {
- margin: 10px;
- text-align: center;
-}
-
-i:hover {
- opacity: 0.5;
-}
-
-.fa-facebook {
- color: #4267b2;
-}
-
-.fa-twitter {
- color: #1da1f2;
-}
-
-.fa-envelope-square {
- color: #00a4ef;
-}
-
-.fa-whatsapp {
- color: #25d366;
-}
-
-.buttons {
- display: inline-flex;
-}
-
-.card {
- transition: all 0.2s ease-in;
-}
-
-.card-body {
- transition: all 0.2s ease-in;
-}
-
-.dropDown {
- position: relative;
- display: inline-block;
-}
-
-.dropDownContent {
- position: absolute;
- background-color: #f1f1f1;
- left: 50px;
- max-height: 0;
- overflow: hidden;
- box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
- z-index: 1;
- padding: 0;
- transition: max-height 0.2s ease-in;
-}
-
-.list-group-item:hover {
- cursor: pointer;
- font-size: 120%;
-}
-
-.list-group-item:hover .dropDownContent {
- /* font-style: italic; */
- max-height: 100px;
- padding: 0px 10px 0px 10px;
-}
-
-.list-group-item p {
- transform: translateY(-110%);
- transition: transform 0.2s ease-in;
-}
-
-.list-group-item:hover p {
- transform: translateY(0);
-}
-
-.card:hover {
- background-color: #e6e6e6;
-}
-
-.card:hover .card-body {
- transform: scale(1.1);
-}
-
-/** WAVE DIVIDER **/
-
-.waveDividerWrapper {
- position: relative;
- padding-top: 150px;
-}
-
-.custom-shape-divider-bottom-1596474166 {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- overflow: hidden;
- line-height: 0;
- transform: rotate(180deg);
-}
-
-.custom-shape-divider-bottom-1596474166 svg {
- position: relative;
- display: block;
- width: calc(155% + 1.3px);
- height: 104px;
- transform: rotateY(180deg);
-}
-
-.custom-shape-divider-bottom-1596474166 .shape-fill {
- fill: #000000;
-}
-
-::selection {
- background-color: pink;
- color: rgb(43, 56, 55);
-}
-
-/*** MEDIA QUERIES ***/
-
-@media screen and (max-width: 576px) {
-
- #course-img {
- height: 200px;
- }
-
- /* .navbar {
- background-color: #fff;
- }
-
- .navbar a {
- color: #000;
- } */
-}
-
-@media screen and (min-width: 992px) {
- .navbar-expand-lg .navbar-nav .nav-link {
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- padding: .15rem .25rem;
- }
-}
-
-.gotopbtn {
- position: fixed;
- display: none;
- width: 50px;
- height: 50px;
- border-radius: 25px ;
- background:#007bff;
-
- bottom: 30px;
- right: 20px;
- z-index: 1;
-
- text-align: center;
- line-height: 40px;
- color: rgb(255, 255, 255);
- font-size: 50px;
-}
-
-.header-text-light{
- color: #000;
-}
-
-.draggable-slide a:hover {
-color: yellow;
-text-decoration: none;
-}
-.active-link {
- border-bottom:3px solid rgb(105, 102, 102);
-}
+/* GENERAL SECTION */
+body {
+ margin: 0;
+ padding: 0;
+ color: #000000;
+}
+
+#course-button {
+ margin: 30px;
+ padding: 10px 20px;
+ transition: 0.2s;
+}
+
+#course-button:hover {
+ background-color: #007bff;
+ color: #fff;
+ transform: scale(1.2);
+}
+
+#course-button:hover {
+ transform: scale(10.20);
+ animation: pulse 2s infinite,
+ nudge 5s linear infinite alternate;
+}
+
+/* NAVBAR STYLE */
+nav.navbar button.navbar-toggler {
+ margin-right: auto;
+ border-color : rgba(210, 69, 75, 0.15);
+ background-color: #fbd6db4f;
+}
+
+.navbar-light.scrolled {
+ background-color: #fff !important;
+ color: #000 !important;
+ transition: background-color 400ms ease-out;
+}
+
+.buttons>a>i {
+ cursor: pointer;
+ transition: opacity 200ms;
+}
+
+/* REMOVED BELOW DUE TO RESTYLING */
+
+/* .navbar-light.scrolled a {
+ color: #000 !important;
+ font-family: "Montserrat", sans-serif;
+}
+
+.navbar-light {
+ /* background-color: transparent !important; causes issue with minimized nav */
+
+ /* background-color: #fff;
+} */
+
+.navbar {
+ background-color: rgba(0,0,0,0);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: rgba(0, 0, 0, 0.125);
+ box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15) !important;
+}
+
+.navbar-light .navbar-nav .nav-link {
+ color: rgb(0, 0, 0) !important;
+}
+
+/* Navbar colours for Javascript */
+
+.light {
+ background-color: #e5e0e0;
+}
+
+.transparent {
+ background-color: rgba(0,0,0,0);
+
+ background-color: #fff;
+ -webkit-box-shadow: 0px 12px 21px 0px rgba(0,0,0,0.58);
+ box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.322);
+}
+
+.navbar-brand img {
+ height: 45px;
+ width: auto;
+ margin: 0;
+ padding: 0;
+}
+
+
+
+.navbar a {
+ font-family: "Montserrat", sans-serif;
+ font-size: 16px;
+}
+.navbar a:hover {
+ color: #000 !important;
+}
+
+.nav-link {
+ color: #e5e0e0;
+}
+
+.navbar a:hover,
+.navbar-dark a:hover {
+ transition: all 0.3s ease-out;
+ background-color: #d1d1d1;
+}
+
+.navbar a:focus {
+ outline: 2px dotted #a4afd4;
+}
+
+.nav-item a:hover{
+ background-color: #d1d1d1;
+ border-radius: 5px;
+}
+
+.navbar-collapse ul {
+ margin-left: auto;
+}
+
+.navbar-collapse ul li {
+ margin: auto 10px;
+ padding: 0 1rem;
+}
+
+/* HEADER SECTION */
+.header-container {
+ height: 100vh;
+ background-image: url("../images/laptop-header.jpg");
+ /* background-position: fixed;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative; */
+ margin: 0;
+ padding: 0;
+}
+
+.course-details-content h2{
+ color: #e6e6e6;
+}
+
+.parallax {
+ /* Create the parallax scrolling effect */
+ background-attachment: fixed;
+ background-position: top;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.page-content {
+ /* display: flex;
+ flex-direction: column;
+ justify-content: center; */
+ text-align: center;
+}
+
+.flex {
+ list-style-type: none;
+ padding-left: 5px;
+}
+
+.header-container-bg-fade {
+ height: 100%;
+ width: 100%;
+ background-color: #000000;
+ opacity: 0.8;
+ z-index: 1;
+}
+
+.header-content {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: #ffffff;
+ text-align: center;
+}
+
+.masteryColor{
+ color: yellow;
+ font-weight: bold;
+}
+
+.header-content hr {
+ background-color: #fff;
+ width: 100%;
+ margin: 2px auto;
+}
+
+.header-content h1 {
+ width: 100%;
+ margin-top: 80px;
+ text-align: center;
+ padding: 0;
+ font-size: 3em;
+ font-family: "Montserrat", sans-serif;
+}
+
+.header-content a {
+ color: #ffffff;
+ text-decoration: none;
+}
+
+.header-content a:focus {
+ outline: 2px dotted #a4afd4;
+}
+
+.paragraph-block {
+ padding: 2rem;
+}
+
+.paragraph {
+ margin: 20px;
+ border: 3px solid white;
+ padding: 10px;
+ border-radius: 8px;
+}
+
+/* DETAILS SECTION */
+
+.rounded {
+ border-top: 4px solid rgba(99, 99, 99, 0.2);
+ border-radius: 5px;
+ width: 50%;
+ margin: 0 auto;
+}
+
+.details-container {
+ width: 100%;
+ padding: 5rem 0;
+ position: relative;
+}
+
+.details-container .row {
+ margin: 100px 0px 100px 0px;
+}
+
+.details-container h2 {
+ margin: 2rem 0rem 0rem 0rem;
+ font-family: "Montserrat", sans-serif;
+ font-weight: bold;
+}
+
+.details-container h4 {
+ font-size: 2em;
+}
+
+.details-container p {
+ margin: 0rem 0rem 0rem 0rem;
+ font-family: "Montserrat", sans-serif;
+}
+
+.course-details-content {
+ text-align: center;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+/*.course-details-content ul {
+ margin: 1rem 0rem 0rem 0rem;
+}*/
+.course-details-content ul li{
+ margin: 1rem 0rem 0rem 0rem;
+}
+
+#course-img {
+ height: 300px;
+
+ /* add smooth transition */
+ transition: all .5s linear;
+}
+
+#course-img:hover {
+ transition: transform 1s;
+ transform: scale(1.1);
+}
+
+/* SOFTWARE DETAILS */
+.software-details {
+ margin: 5rem 0;
+ padding: 0rem;
+ font-family: "Montserrat", sans-serif;
+}
+
+.software-details h2 {
+ font-family: "Montserrat", sans-serif;
+ text-align: center;
+ font-weight: bold;
+ margin-bottom: 2rem;
+}
+
+.software-details .row {
+ padding: 0;
+ margin: auto;
+ width: 90%;
+}
+
+.software-details a {
+ text-decoration: none;
+ color: #000000;
+}
+
+.software-details a:focus {
+ outline: 2px dotted #a4afd4;
+}
+
+.software-details .card {
+ height: 10rem;
+ width: 15rem;
+ border: none;
+}
+
+.software-details img {
+ width: 30%;
+ height: 100%;
+}
+
+.software-details h4 {
+ text-align: center;
+}
+
+/* FOOTER SECTION */
+.footer-container {
+ color: #fff;
+ background-color: #111;
+ position: relative;
+ padding: 4rem 2rem;
+ text-align: center;
+ font-family: "Montserrat", sans-serif;
+}
+
+.footer-container h5 {
+ width: 100%;
+}
+
+#credits {
+ width: 100%;
+ position: absolute;
+ bottom: 5%;
+ left: 50%;
+ transform: translate(-50%, 5%);
+}
+.a2a_button_instagram,
+.a2a_button_facebook,
+.a2a_button_twitter,
+.a2a_button_email,
+.a2a_button_whatsapp {
+ margin: 10px;
+ text-align: center;
+}
+
+i:hover {
+ opacity: 0.5;
+}
+
+.fa-facebook {
+ color: #4267b2;
+}
+
+.fa-twitter {
+ color: #1da1f2;
+}
+
+.fa-envelope-square {
+ color: #00a4ef;
+}
+
+.fa-whatsapp {
+ color: #25d366;
+}
+
+.buttons {
+ display: inline-flex;
+}
+
+.card {
+ transition: all 0.2s ease-in;
+}
+
+.card-body {
+ transition: all 0.2s ease-in;
+}
+
+.dropDown {
+ position: relative;
+ display: inline-block;
+}
+
+.dropDownContent {
+ position: absolute;
+ background-color: #f1f1f1;
+ left: 50px;
+ max-height: 0;
+ overflow: hidden;
+ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+ padding: 0;
+ transition: max-height 0.2s ease-in;
+}
+
+.list-group-item:hover {
+ cursor: pointer;
+ font-size: 120%;
+}
+
+.list-group-item:hover .dropDownContent {
+ /* font-style: italic; */
+ max-height: 100px;
+ padding: 0px 10px 0px 10px;
+}
+
+.list-group-item p {
+ transform: translateY(-110%);
+ transition: transform 0.2s ease-in;
+}
+
+.list-group-item:hover p {
+ transform: translateY(0);
+}
+
+.card:hover {
+ background-color: #e6e6e6;
+}
+
+.card:hover .card-body {
+ transform: scale(1.1);
+}
+
+/** WAVE DIVIDER **/
+
+.waveDividerWrapper {
+ position: relative;
+ padding-top: 150px;
+}
+
+.custom-shape-divider-bottom-1596474166 {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+ transform: rotate(180deg);
+}
+
+.custom-shape-divider-bottom-1596474166 svg {
+ position: relative;
+ display: block;
+ width: calc(155% + 1.3px);
+ height: 104px;
+ transform: rotateY(180deg);
+}
+
+.custom-shape-divider-bottom-1596474166 .shape-fill {
+ fill: #000000;
+}
+
+::selection {
+ background-color: pink;
+ color: rgb(43, 56, 55);
+}
+
+/*** MEDIA QUERIES ***/
+
+@media screen and (max-width: 576px) {
+
+ #course-img {
+ height: 200px;
+ }
+
+ /* .navbar {
+ background-color: #fff;
+ }
+
+ .navbar a {
+ color: #000;
+ } */
+}
+
+@media screen and (min-width: 992px) {
+ .navbar-expand-lg .navbar-nav .nav-link {
+ margin-right: 0.5rem;
+ margin-left: 0.5rem;
+ padding: .15rem .25rem;
+ }
+}
+
+.gotopbtn {
+ position: fixed;
+ display: none;
+ width: 50px;
+ height: 50px;
+ border-radius: 25px ;
+ background:#007bff;
+
+ bottom: 30px;
+ right: 20px;
+ z-index: 1;
+
+ text-align: center;
+ line-height: 40px;
+ color: rgb(255, 255, 255);
+ font-size: 50px;
+}
+
+.header-text-light{
+ color: #000;
+}
+
+.draggable-slide a:hover {
+color: yellow;
+text-decoration: none;
+}
+.active-link {
+ border-bottom:3px solid rgb(105, 102, 102);
+}
diff --git a/resources/style/themeToggle.css b/resources/style/themeToggle.css
new file mode 100644
index 00000000..9c23041d
--- /dev/null
+++ b/resources/style/themeToggle.css
@@ -0,0 +1,98 @@
+/* Dark Theme Global CSS (by Yusuf) */
+
+html[theme='dark'] {
+ filter: invert(1) hue-rotate(180deg);
+}
+
+html[theme='dark'] {
+ filter: invert(1) hue-rotate(180deg);
+}
+
+.invert {
+ filter: invert(1) hue-rotate(180deg);
+}
+
+
+/* Container */
+
+.theme-toggle-container {
+ z-index: 100;
+ display: flex;
+ align-items: center;
+}
+
+.theme-toggle-container span {
+ margin-right: auto;
+ font-size: 1rem;
+ color: white;
+}
+
+/* Theme Text */
+
+.theme-toggle-text {
+ position: relative;
+ top: -4px;
+ right: 5px;
+}
+
+/* Box Around Slider */
+
+.theme-toggle {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+}
+
+/* Hide Default HTML Checkbox */
+
+.theme-toggle input {
+ display: none;
+}
+
+/* Slider */
+
+.slider {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: #CCCCCC;
+ transition: 0.4s;
+ cursor: pointer;
+}
+
+.slider::before {
+ position: absolute;
+ bottom: 4px;
+ left: 4px;
+ width: 26px;
+ height: 26px;
+ background-color: white;
+ content: '';
+ transition: 0.4s;
+ -webkit-transition: 0.4s;
+}
+
+input:checked + .slider {
+ background-color: rgb(150, 65, 255);
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider::before {
+ transform: translateX(26px);
+}
+
+/* Rounded Slider */
+
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round::before {
+ border-radius: 50%;
+}
\ No newline at end of file