From 55fd9de699ec6b59e915f8997dc97961826e7953 Mon Sep 17 00:00:00 2001 From: Sumit Rathor Date: Thu, 17 Oct 2024 17:51:35 +0530 Subject: [PATCH] Add dark mode --- Website/css/styles.css | 409 ++++++++++++++++++++++++++++++++++++++++- Website/index.html | 24 +-- Website/js/script.js | 70 ++++--- 3 files changed, 460 insertions(+), 43 deletions(-) diff --git a/Website/css/styles.css b/Website/css/styles.css index d592ab1fa..ecbc216ff 100644 --- a/Website/css/styles.css +++ b/Website/css/styles.css @@ -1027,7 +1027,7 @@ button#toggle-languages:hover { text-align: center; font-size: 2em; margin-bottom: 20px; - color: white; + /* color: white; */ animation: slideInRight 1s ease-in-out; } @@ -1355,8 +1355,8 @@ body.dark-mode { color: #333; } -.dark-mode .testimonial-section h2 { - color: #111; +.blue-mode .text-white-light-mode{ + color: black !important; } .dark-mode .testimonial { @@ -1545,3 +1545,406 @@ h1 { } +/* Light Mode Styles */ +body.light-mode { + background-color: #f4f4f4; /* Light background */ + color: #333; /* Dark text */ +} + +.light-mode .dropdown-content { + background-color: #fff; /* Light dropdown background */ +} + +.light-mode .text-black-light-mode, .light-mode .card h3{ + color: #333 !important; +} + +.light-mode p{ + color: white; +} + +.light-mode #scroll-top-btn svg { + fill: rgb(0, 0, 150); /* Adjust SVG color */ +} + +.light-mode .side-icons .icon-content a { + background-color: #fff; /* White background for icons */ + color: #333; /* Dark text color */ +} + +.light-mode .side-icons .icon-content a:hover .filled { + background-color: #ddd; /* Light hover effect */ +} + +.light-mode .highlight { + color: #333; /* Highlight color */ +} + +/* Dark Mode Styles */ +body.dark-mode { + background-color: #121212; /* Dark background */ + color: #f1f1f1; /* Light text */ +} + +.dark-mode .dropdown-content { + background-color: #1c1c1c; /* Dark dropdown background */ +} + +.dark-mode p, .dark-mode h2, .dark-mode .card h3 { + color: #f1f1f1; /* Light text color */ +} + +.dark-mode #scroll-top-btn svg { + fill: rgb(255, 255, 255); /* Adjust SVG color */ +} + +.dark-mode .side-icons .icon-content a { + background-color: #1f1f1f; /* Dark background for icons */ + color: #f1f1f1; /* Light text color */ +} + +.dark-mode .side-icons .icon-content a:hover .filled { + background-color: #444; /* Dark hover effect */ +} + +.dark-mode .highlight { + color: #f1f1f1; /* Highlight color */ +} + +/* Blue Mode Styles */ +body.blue-mode { + background-color: #170179; /* Dark blue background */ + color: #f1f1f1; /* Light text */ +} + +.blue-mode .dropdown-content { + background-color: #121245; /* Blue dropdown background */ +} + +.blue-mode p, .blue-mode h2, .blue-mode .card h3 { + color: #fff; /* Light text color */ +} + +.blue-mode #scroll-top-btn svg { + fill: rgb(0, 12, 150); /* SVG color for blue mode */ +} + +.blue-mode .side-icons .icon-content a { + background-color: #121245; /* Dark blue background for icons */ + color: #ddd; /* Light text color */ +} + +.blue-mode .side-icons .icon-content a:hover .filled { + background-color: #444; /* Dark hover effect */ +} + +.blue-mode .highlight { + color: #fff; /* Highlight color */ +} + +/* Additional Styles for Cards and Sections */ +.light-mode .card, +.dark-mode .card, +.blue-mode .card { + background-color: #fff; /* Default card background for light mode */ +} + +.dark-mode .card { + background-color: #1f1f1f; /* Dark card background */ +} + +.blue-mode .card { + background-color: #121245; /* Blue card background */ +} + +/* Testimonial Section Styles */ +.light-mode .testimonial-section{ + color: white; +} +.light-mode .text-black-light-mode{ + color: black; +} +.dark-mode .text-black-light-mode{ + color: white !important; +} +.dark-mode .testimonial-section, +.blue-mode .testimonial-section { + color: #333; +} + +.dark-mode .testimonial-section { + background-color: #333; /* Dark testimonial section */ +} + +.blue-mode .testimonial-section { + background-color: #f9f9f9; /* Blue testimonial section */ +} + +/* Additional styling for testimonials */ +.light-mode .testimonial, +.dark-mode .testimonial, +.blue-mode .testimonial { + background-color: #fff; /* Default testimonial background for light mode */ +} + +.dark-mode .testimonial { + background-color: #222; /* Dark testimonial background */ +} + +.blue-mode .testimonial { + background-color: #170179; /* Blue testimonial background */ +} + +/* Button Styles */ +.light-mode #toggle-dark-mode { + /* background-color: #007bff; Blue button background for light mode */ + color: #fff; /* White text */ +} + +.dark-mode #toggle-dark-mode { + /* background-color: #444; Dark button background */ + color: #f1f1f1; /* Light text */ +} + +.blue-mode #toggle-dark-mode { + /* background-color: #170179; Dark blue button background */ + color: #f1f1f1; /* Light text */ +} + +/* Card Styles */ +.light-mode .card { + background-color: #ffffff; /* White card background */ + border: 1px solid #ddd; /* Light border */ +} + +.dark-mode .card { + background-color: #1e1e1e; /* Dark gray card background */ + border: 1px solid #333; /* Darker border */ +} + +.blue-mode .card { + background-color: #121245; /* Blue card background */ + border: 1px solid #0f0f2e; /* Darker blue border */ +} + +/* Section Headers */ +.light-mode .section-header { + color: #333; /* Dark text for section headers */ +} + +.dark-mode .section-header { + color: #f1f1f1; /* Light text for section headers */ +} + +.blue-mode .section-header { + color: #f1f1f1; /* Light text for section headers */ +} + +/* Links Styles */ +.light-mode a { + /* color: #007bff; Blue link color */ +} + +.dark-mode a { + color: #1e90ff; /* Lighter blue link color */ +} + +.blue-mode a { + color: #f1f1f1; /* Light text color for links */ +} + +/* Hover Effects for Links */ +.light-mode a:hover { + text-decoration: underline; /* Underline on hover */ +} + +.dark-mode a:hover { + color: #00aaff; /* Change link color on hover */ +} + +.blue-mode a:hover { + color: #ddd; /* Change link color on hover */ +} + +/* Footer Styles */ +.light-mode footer { + background-color: #f8f9fa; /* Light background */ + color: #333; /* Dark text */ +} + +.dark-mode footer { + background-color: #333; /* Dark background */ + color: #f1f1f1; /* Light text */ +} + +.blue-mode footer { + background-color: #121245; /* Dark blue background */ + color: #f1f1f1; /* Light text */ +} + +/* Responsive Design Adjustments */ +@media (max-width: 768px) { + .card { + margin: 10px; /* Margin adjustments for mobile */ + } + + #toggle-dark-mode { + width: 100%; /* Full width button on mobile */ + font-size: 1em; /* Adjust font size */ + } +} + +/* Form Styles */ +.light-mode input, +.light-mode textarea, +.light-mode select { + background-color: #fff; /* White background for input fields */ + color: #333; /* Dark text */ + border: 1px solid #ccc; /* Light border */ + padding: 10px; /* Padding for comfort */ +} + +.dark-mode input, +.dark-mode textarea, +.dark-mode select { + background-color: #2c2c2c; /* Dark background for input fields */ + color: #f1f1f1; /* Light text */ + border: 1px solid #555; /* Dark border */ +} + +.blue-mode input, +.blue-mode textarea, +.blue-mode select { + background-color: #121245; /* Dark blue background for input fields */ + color: #fff; /* Light text */ + border: 1px solid #444; /* Darker blue border */ +} + +/* Button Styles */ +.light-mode button, +.light-mode .btn { + /* background-color: #007bff; Primary button color */ + color: #fff; /* White text */ + border: none; /* No border */ + /* padding: 10px 15px; Padding */ + cursor: pointer; /* Pointer cursor */ + transition: background-color 0.3s ease; /* Transition for hover effect */ +} + +.dark-mode button, +.dark-mode .btn { + /* background-color: #444; Dark button color */ + color: #f1f1f1; /* Light text */ + border: none; /* No border */ +} + +.blue-mode button, +.blue-mode .btn { + /* background-color: #170179; Dark blue button color */ + color: #f1f1f1; /* Light text */ +} + +/* Hover Effects for Buttons */ +.light-mode button:hover, +.light-mode .btn:hover { + background-color: #0056b3; /* Darker blue on hover */ +} + +.dark-mode button:hover, +.dark-mode .btn:hover { + background-color: #555; /* Lighter dark on hover */ +} + +.blue-mode button:hover, +.blue-mode .btn:hover { + background-color: #0f0f2e; /* Lighter blue on hover */ +} + +/* Alert Styles */ +.light-mode .alert { + background-color: #dff0d8; /* Light green for success */ + color: #3c763d; /* Dark green text */ +} + +.dark-mode .alert { + background-color: #d9534f; /* Red for danger */ + color: #f1f1f1; /* Light text */ +} + +.blue-mode .alert { + background-color: #f0f4f8; /* Light blue for info */ + color: #31708f; /* Dark blue text */ +} + +/* Table Styles */ +.light-mode table { + width: 100%; /* Full width */ + border-collapse: collapse; /* Remove space between cells */ +} + +.light-mode th, +.light-mode td { + border: 1px solid #ddd; /* Light border for cells */ + padding: 8px; /* Padding for cells */ +} + +.dark-mode table { + width: 100%; /* Full width */ + border-collapse: collapse; /* Remove space between cells */ +} + +.dark-mode th, +.dark-mode td { + border: 1px solid #444; /* Darker border for cells */ + padding: 8px; /* Padding for cells */ +} + +.blue-mode table { + width: 100%; /* Full width */ + border-collapse: collapse; /* Remove space between cells */ +} + +.blue-mode th, +.blue-mode td { + border: 1px solid #444; /* Darker border for cells */ + padding: 8px; /* Padding for cells */ +} + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .light-mode .alert, + .dark-mode .alert, + .blue-mode .alert { + font-size: 0.9em; /* Slightly smaller font for alerts on mobile */ + } + + .light-mode table, + .dark-mode table, + .blue-mode table { + font-size: 0.9em; /* Smaller font for tables on mobile */ + } + + .light-mode button, + .dark-mode button, + .blue-mode button { + width: 100%; /* Full width buttons on mobile */ + padding: 12px; /* Increased padding */ + font-size: 1em; /* Adjust font size */ + } +} + +/* Miscellaneous Styles */ +.light-mode .tooltip { + background-color: #f9f9f9; /* Light background for tooltips */ + color: #333; /* Dark text */ +} + +.dark-mode .tooltip { + background-color: #222; /* Dark background for tooltips */ + color: #f1f1f1; /* Light text */ +} + +.blue-mode .tooltip { + background-color: #170179; /* Dark blue background for tooltips */ + color: #f1f1f1; /* Light text */ +} diff --git a/Website/index.html b/Website/index.html index 2b24a71e9..ff69a3e95 100644 --- a/Website/index.html +++ b/Website/index.html @@ -111,8 +111,8 @@
-

Welcome to the Machine Learning Repositories

-

Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.

+

Welcome to the Machine Learning Repositories

+

Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.

@@ -176,7 +176,7 @@

Most Used Language

-

Repositories

+

Repositories

@@ -188,7 +188,7 @@

Our Contributors

-

Milestones Progress

+

Milestones Progress

Algorithms and Deep Learning Models

@@ -260,23 +260,23 @@

Recommendation Models

-

Testimonials

-

Here's what our users are saying about their experince with Recodehive

+

Testimonials

+

Here's what our users are saying about their experince with Recodehive

Alex Johnson -

"RecodeHive has been a game-changer for my projects. The curated repositories are top-notch, and the community support is unparalleled!"

-

Alex Johnson

+

"RecodeHive has been a game-changer for my projects. The curated repositories are top-notch, and the community support is unparalleled!"

+

Alex Johnson

Maria Garcia -

"I found exactly what I needed to advance my ML models. The resources provided by RecodeHive are simply the best."

-

Maria Garcia

+

"I found exactly what I needed to advance my ML models. The resources provided by RecodeHive are simply the best."

+

Maria Garcia

John Doe -

"A fantastic platform for anyone serious about machine learning. The repositories are well-organized and easy to navigate."

-

John Doe

+

"A fantastic platform for anyone serious about machine learning. The repositories are well-organized and easy to navigate."

+

John Doe

diff --git a/Website/js/script.js b/Website/js/script.js index 44388d500..462396426 100644 --- a/Website/js/script.js +++ b/Website/js/script.js @@ -340,46 +340,59 @@ document.addEventListener("DOMContentLoaded", function() { const toggleDarkModeButton = document.getElementById('toggle-dark-mode'); const body = document.body; -// function to apply the theme based on stored value +// function to apply the theme based on the stored value function applyTheme(theme) { - if (theme === 'dark') { - body.classList.add('dark-mode'); - toggleDarkModeButton.querySelector('i').classList.add('fa-sun'); - toggleDarkModeButton.querySelector('i').classList.remove('fa-moon'); - } else { - body.classList.remove('dark-mode'); - toggleDarkModeButton.querySelector('i').classList.add('fa-moon'); - toggleDarkModeButton.querySelector('i').classList.remove('fa-sun'); + // Remove all theme classes + body.classList.remove('light-mode', 'dark-mode', 'blue-mode'); + + // Apply the new theme class + body.classList.add(theme); + + // Update the icon based on the theme + const icon = toggleDarkModeButton.querySelector('i'); + if (theme === 'dark-mode') { + icon.classList.add('fa-adjust'); + icon.classList.remove('fa-moon', 'fa-sun'); + } else if (theme === 'light-mode') { + icon.classList.add('fa-sun'); + icon.classList.remove('fa-moon', 'fa-adjust'); + } else if (theme === 'blue-mode') { + icon.classList.add('fa-moon'); + icon.classList.remove('fa-sun', 'fa-adjust'); } + + // Save the current theme in localStorage + localStorage.setItem('theme', theme); } -// check for saved theme in localStorage! +// Check for the saved theme in localStorage const savedTheme = localStorage.getItem('theme'); if (savedTheme) { applyTheme(savedTheme); } else { - // setting default theme to light - applyTheme('light'); + // Set default theme to light + applyTheme('light-mode'); } -function toggleTheme(){ - body.classList.toggle('dark-mode'); - - const icon = toggleDarkModeButton.querySelector('i'); - const isDarkMode = body.classList.contains('dark-mode'); - - if (isDarkMode) { - icon.classList.add('fa-sun'); - icon.classList.remove('fa-moon'); - // saving the theme=dark in localStorage - localStorage.setItem('theme', 'dark'); - } else { - icon.classList.add('fa-moon'); - icon.classList.remove('fa-sun'); - // saving the theme=light in localStorage - localStorage.setItem('theme', 'light'); +let themes = { + 'light': 'light-mode', + 'dark': 'dark-mode', + 'blue': 'blue-mode' +}; + +let i = 0; // For light-mode + +function toggleTheme() { + i++; + if (i >= Object.keys(themes).length) { + i = 0; } + + const newTheme = Object.keys(themes)[i]; + console.log(newTheme); + applyTheme(themes[newTheme]); } + toggleDarkModeButton.addEventListener('click', toggleTheme); document.addEventListener('keydown', function (event) { @@ -390,6 +403,7 @@ document.addEventListener('keydown', function (event) { } }); + function hamburger() { const line = document.getElementById("line"); const navLinks = document.querySelector(".nav-links");