diff --git a/assets/css/compose.css b/assets/css/compose.css index 760a859..297aca5 100644 --- a/assets/css/compose.css +++ b/assets/css/compose.css @@ -115,11 +115,20 @@ /* !!! */ .to_card { - width: 6dvw; + width: 2dvw; font-size: .85rem; display: flex; } +.dark .to_card .form-label { + color: var(--accent-foreground); +} + +#to-input { + width: 370px; + height: 35px; +} + .compose_search_input { border: none; @@ -132,9 +141,14 @@ .compose_search_input:focus { /* border: none; */ outline: none; + /* background-color: #242e41 !important; */ /* border-color: transparent; */ } +.dark .compo-email-item:hover, .dark #no-result:hover { + background: #242e41; +} + .email-container-wrapper { display: flex; @@ -233,7 +247,7 @@ max-height: 90dvh; overflow-y: auto; background: white; - border: 1px solid #ddd; + border: 1px solid var(--background-2); border-radius: 4px; z-index: 1000; display: none; diff --git a/assets/css/home.css b/assets/css/home.css index 1561af9..fde98b0 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -132,6 +132,11 @@ transition: all 0.3s ease-in-out; } +.dark .group_menu button { + background-color: #1e2636; + color: var(--gray-400); +} + .group_menu button i { font-size: 1.1rem; @@ -139,7 +144,13 @@ .group_menu button:hover { color: var(--primary-color); - background-color: var(--gray-100); + background-color: #1e2636; + border: .5 solid var(--gray-300); +} + +.dark .group_menu button:hover { + color: var(--primary-color); + background-color: #242e41; border: .5 solid var(--gray-300); } diff --git a/assets/css/index.css b/assets/css/index.css index 5ba370b..946d350 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -81,7 +81,7 @@ .send_btn { - background-color: var(--primary-color-500); + background-color: var(--primary-color-500) !important; border: none; color: whitesmoke; padding: 5px 1rem; @@ -116,7 +116,6 @@ /* ------------------------------- Email User ------------------------------- */ .email-item { - background: white; border-radius: 2px; padding: 10px; display: flex; @@ -143,10 +142,6 @@ font-weight: 500; } -.email-item:hover { - background: #f5f5f5; -} - .email-subject { font-size: .88rem; font-weight: 600; diff --git a/assets/css/login.css b/assets/css/login.css index 9355678..ba6c3ee 100644 --- a/assets/css/login.css +++ b/assets/css/login.css @@ -5,6 +5,43 @@ body { background-color: #EDF1F3; } +body.dark { + background-color: var(--background); +} + +.dark .login__content { + /* border: ; */ + /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.026); */ + /* background-color: var(--background-2); */ + /* background-color: #EDF1F3; */ + background-color: #242e41; + /* background-color: #1e2636; */ + /* background-color: hsl(0, 0%, 100%); */ +} + +.dark .login__content h5, .dark .login__content span, .dark .login__content label, .dark small { + color: whitesmoke; +} + +img.light { + display: block !important; +} + +.dark img.light { + display: none !important; +} + +.dark img.dark { + display: block !important; +} + +img.dark { + display: none !important; +} + +.dark .extra__label { + color: var(--primary-color-200) !important; +} .text-muted { width: 70%; diff --git a/assets/css/main.css b/assets/css/main.css index 22c17ee..eed46af 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -301,8 +301,54 @@ } +.dark { + --body-background: #1e1e2f; + --border-color: #2c2f4a; + --primary-color: #80B441; + --toggle-color: #555; + + /* Primary color shades adapted for dark background */ + --primary-color-10: #1b2a14; + --primary-color-25: #22371a; + --primary-color-50: #2b4821; + --primary-color-100: #3e662f; + --primary-color-200: #51843e; + --primary-color-300: #6aa94d; + --primary-color-400: #80B441; + --primary-color-500: #95c657; + --primary-color-600: #a6d16f; + --primary-color-700: #b7dc87; + --primary-color-800: #c9e8a0; + --primary-color-900: #dcf4b8; + + --background: hsl(222, 47%, 11%); + --background-2: #242e41; + --foreground: #F5F5F5; + --muted: #2a2b3c; + --muted-foreground: #b0b0b0; + --popover: #2a2b3c; + --popover-foreground: #f3f3f3; + --border: #3c3c4c; + --input: #3c3c4c; + --card: #2a2b3c; + --card-foreground: #f3f3f3; + --primary: #80B441; + --primary-foreground: #f0fdf4; + --secondary: #3c3c4c; + --secondary-foreground: #e6e6e6; + --accent: #3c3c4c; + --accent-foreground: #e6e6e6; + --destructive: #dc2626; + --destructive-foreground: #fff; + --ring: #80B441; + + --background-2: #242e41; + --label-description: rgba(255, 255, 255, 0.6); +} + body { - background-color: #f5f5f5fa; + background-color: var(--background); + transition: background-color 0.3s ease, color 0.3s ease; } .__parent { @@ -323,21 +369,88 @@ body { } .magic-b-line { - border-bottom: 1.5px solid #F6F6F8; + border-bottom: 1.5px solid var(--background-2); } .magic-l-line { - border-left: 1.5px solid #F6F6F8; + border-left: 1.5px solid var(--background-2); } .magic-r-line { - border-right: 1.5px solid #F6F6F8; + border-right: 1.5px solid var(--background-2); } .magic-t-line { - border-top: 1.5px solid #F6F6F8; + border-top: 1.5px solid var(--background-2); +} + +/* Dark mode support */ +/* @media (prefers-color-scheme: dark) { */ +.dark .magic-b-line { + border-bottom: 1.5px solid var(--background-2); +} + +.dark .magic-l-line { + border-left: 1.5px solid var(--background-2); +} + +.dark .magic-r-line { + border-right: 1.5px solid var(--background-2); +} + +.dark .magic-t-line { + border-top: 1.5px solid var(--background-2); +} + +.dark .btn, .dark button { + color: whitesmoke; + background: var(--background); +} +.dark input, +.dark textarea, +.dark select, +.dark button { + background-color: var(--background); + color: whitesmoke; + /* border: 1px solid #444444; */ +} + +.dark input:focus, +.dark textarea:focus, +.dark select:focus, +.dark button:focus { + border-color: #F6F6F8; + outline: none; +} + +.dark .form-control:focus { + color: whitesmoke !important; + background-color: var(--background-2); + border-color: var(--background); + outline: 0; + box-shadow: 0 0 0 .25rem var(--background-2); +} + +.dark input::placeholder, +.dark textarea::placeholder { + color: whitesmoke; +} + +.dark .border-bottom { + border-bottom: var(--bs-border-width) var(--bs-border-style) var(--background-2) !important; +} + +.dark .border-top { + border-top: var(--bs-border-width) var(--bs-border-style) var(--background-2) !important; +} + +.dark .object_container { + border-top: .8px solid var(--background-2); + border-bottom: .8px solid var(--background-2); } +/* } */ + .clear__btn { border: 0; background: transparent; @@ -530,6 +643,33 @@ body { padding: 10px 13px; } +/*-------------DARK MODE --------------*/ +.dark .drop_down_content { + border: .5px solid #444444; +} + +.dark .drop_down_content .icon_card, .dark .modal-content, .dark .offcanvas-start, .dark .dropdown-menu-custom, .dark .dropdown-item, .dark .bar_more_menu, .dark #email_list, .dark #no-result { + background-color: var(--background); + color: whitesmoke; +} + +.dark .bar_more_menu { + /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.076); */ + border: .5px solid var(--background-2); +} + +.dark .drop__down__content { + /* border: .5px solid #555555; */ + background-color: #2C2C2E; + color: whitesmoke; +} + +/* Optional: Highlight effect for focused dropdown (dark mode) */ +.dark .drop__down__content:focus { + border-color: #F6F6F8; + background-color: #444444; +} + .drop_down_content #drop-down-btn { width: 100%; } @@ -561,11 +701,18 @@ body { cursor: pointer; position: relative; } +.dark .drop_down_content .item_selected, .dark .drop_down_content #limit_selected, .dark #pagination-info, .dark .account_name, .dark .account_email, .dark .account_card small { + color: whitesmoke !important; +} .drop_down_content .item_selected i { font-size: .9rem; } +/* .dark .drop_down_list, +.dark .limit_list { + color: whitesmoke; +} */ .drop_down_list, .limit_list { display: none; @@ -605,6 +752,11 @@ body { opacity: .8; } +.dark .drop_down_list ul li, +.dark .limit_list ul li { + color: whitesmoke; +} + .drop_down_list ul li:hover, .limit_list ul li:hover { background: #f0f0f0; @@ -651,6 +803,30 @@ body { } +/*---------- mails list-----------------*/ +.email-item { + background: var(--background); +} + +.email-item:hover { + background: #f5f5f5; +} + +.dark .email-subject, .dark .email-message, .dark #email-subject, .dark #email-message, .dark .email__time, .dark #email-sender, .dark #btn_dropdown, .dark .header_detail span, .dark .label__attachment, .dark .file-name { + color: #AAAAAA !important; +} + +.dark .email-item:hover { + background: #1e2636; +} + +.dark #compose-mail span { + color: var(--gray-100); +} + +.dark { + --bs-border-color: #444444; +} /* -------------------------------- Server Menu Bar -------------------------------- */ .parameter__menu__card { @@ -887,7 +1063,7 @@ body { flex-direction: column; gap: 6px; margin-bottom: .7rem; - + } .field__label { @@ -961,13 +1137,31 @@ body { /* Bouton Connect */ .btn-connect { - background-color: #80B441; + background-color: var(--primary-color-500) !important; color: white; flex-grow: 1; } -.btn-connect:hover { - background-color: #6b9837; +.btn-connect:hover, .send_btn:hover, #compose_btn:hover { + background-color: #6b9837 !important; +} + +/* Circle Button */ + +.btn-circle { + width: 30px; + height: 30px; + padding: 0 !important; + border-radius: 50% !important; + text-align: center; + line-height: 30px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +#attachment_btn:hover, .menu__right button:hover { + background-color: #242e41; } /* ---------------------------- Menu Card ---------------------------- */ @@ -1194,4 +1388,4 @@ body { .popup__card { left: 0; } -} \ No newline at end of file +} diff --git a/assets/css/message.css b/assets/css/message.css index 03c91a0..59d2722 100644 --- a/assets/css/message.css +++ b/assets/css/message.css @@ -115,7 +115,7 @@ position: absolute; top: 2rem; left: -50%; - background: #fff; + background: var(--background); border: 1px solid #ddd; box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.052); border-radius: 4px; @@ -128,6 +128,11 @@ transition: opacity 0.2s ease, transform 0.2s ease; z-index: 10; } +.dark .header_detail { + background: var(--background); + border: 1px solid var(--background-2); + box-shadow: 0px 4px 7px rgba(110, 110, 110, 0.052); +} /* Affichage du menu */ .show_header_detail { @@ -179,15 +184,15 @@ } /* Petit triangle indicateur */ -.header_detail::before { - content: ""; +/* .header_detail::before { */ + /* content: ""; position: absolute; top: -5px; left: 15px; border-width: 5px; border-style: solid; - border-color: transparent transparent #fff transparent; -} + border-color: transparent transparent #fff transparent; */ +/* } */ diff --git a/assets/css/new_sidebar.css b/assets/css/new_sidebar.css index 753301d..53f9eb2 100644 --- a/assets/css/new_sidebar.css +++ b/assets/css/new_sidebar.css @@ -50,8 +50,9 @@ width: 360px; min-height: 25rem; max-height: 70dvh; + background-color: var(--background); padding: 1.2rem; - border: .5px solid var(--primary-color-200); + border: .5px solid var(--background-2); } #close_account_list { @@ -130,4 +131,30 @@ padding-bottom: 0.5rem !important; padding-left: 4.4rem !important; } +} + +/*-------------DARK MODE------------------*/ + +@media (prefers-color-scheme: dark) { + .dark-mode .menu__container, + .dark-mode nav { + background-color: var(--background); + /* or use a darker var like --gray-900 */ + } + + .dark-mode .menu__container ul li i { + color: var(--gray-500); + /* slightly lighter in dark mode */ + } + + .dark-mode .account_card { + border-color: var(--primary-color-700); + background-color: var(--gray-900); + color: var(--gray-100); + } + + .dark-mode .account_card button { + border-color: var(--gray-500); + color: var(--gray-100); + } } \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..25b4515 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,26 @@ +$(document).ready(function () { + const toggleBtn = document.getElementById('theme-toggle'); + const root = document.body; // 🔁 changed from document.documentElement + + // Load saved theme + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'dark') { + root.classList.add('dark'); + } else { + root.classList.remove('dark'); + } + + updateButtonIcon(); + + toggleBtn.addEventListener('click', () => { + root.classList.toggle('dark'); + const isDark = root.classList.contains('dark'); + localStorage.setItem('theme', isDark ? 'dark' : 'light'); + updateButtonIcon(); + }); + + function updateButtonIcon() { + const icon = toggleBtn.querySelector('i'); + icon.className = root.classList.contains('dark') ? 'bx bx-moon' : 'bx bx-sun'; + } +}); diff --git a/contacts.html b/contacts.html index c68a3b4..2296776 100644 --- a/contacts.html +++ b/contacts.html @@ -321,7 +321,7 @@
-

Bin Maurice

+

Marc Laporte

@@ -376,7 +376,7 @@

Bin Maurice

Email - bin243@gmail.com + demo@gmail.com
-
+
Drafts diff --git a/everything.html b/everything.html index b410a75..2c3fefe 100644 --- a/everything.html +++ b/everything.html @@ -25,7 +25,7 @@ - +
@@ -130,7 +130,7 @@
-
+
Everything diff --git a/flagged.html b/flagged.html index 6f812c5..3c11fb7 100644 --- a/flagged.html +++ b/flagged.html @@ -130,7 +130,7 @@
-
+
Flagged diff --git a/home.html b/home.html index d9763c7..347fe74 100644 --- a/home.html +++ b/home.html @@ -20,7 +20,7 @@ - +
@@ -125,7 +125,7 @@
-
+
Inbox @@ -387,9 +387,13 @@
+
@@ -503,7 +507,7 @@
Add new Tag
- -
+
Junk diff --git a/login.html b/login.html index 0aba393..51bdb5a 100644 --- a/login.html +++ b/login.html @@ -18,14 +18,15 @@ - +