Manage font and background colors to adapt the application to all themes

composer.json

@@ -22,27 +22,27 @@
         }
     ],
     "require": {
-        "paragonie/random_compat": "^2.0.18",
-        "christian-riesen/base32": "^1.3.2",
-        "ezyang/htmlpurifier": "^4.13",
-        "henrique-borba/php-sieve-manager": "^1.0.0",
         "bacon/bacon-qr-code": "^1.0.3 || ^2.0.0",
-        "php": ">=7.4",
-        "ext-mbstring": "*",
-        "ext-json": "*",
+        "christian-riesen/base32": "^1.3.2",
+        "composer": "^2.0.0",
         "ext-curl": "*",
-        "ext-openssl": "*",
-        "ext-session": "*",
         "ext-fileinfo": "*",
         "ext-iconv": "*",
-        "webklex/composer-info": "^0.0.1",
-        "composer" : "^2.0.0",
-        "zbateson/mail-mime-parser": "^2.4",
+        "ext-json": "*",
+        "ext-mbstring": "*",
+        "ext-openssl": "*",
+        "ext-session": "*",
+        "ezyang/htmlpurifier": "^4.13",
+        "henrique-borba/php-sieve-manager": "^1.0.0",
         "league/commonmark": "^2.4",
+        "paragonie/random_compat": "^2.0.18",
+        "php": ">=7.4",
         "symfony/dotenv": "^4.3 || 5.4",
+        "thomaspark/bootswatch": "^5.3",
         "twbs/bootstrap": "^5.3",
         "twbs/bootstrap-icons": "^1.11",
-        "thomaspark/bootswatch": "^5.3"
+        "webklex/composer-info": "^0.0.1",
+        "zbateson/mail-mime-parser": "^2.4"
     },
     "require-dev": {
         "phpunit/phpunit": "^9.3.0"

modules/2fa/site.css

@@ -5,8 +5,8 @@
     --tfa-form-invalid-border-color: #dc3545;
     --tfa-border-radius: 0.375rem;
     --tfa-border-color: #dee2e6;
-    --tfa-base-color: #666;
-    --tfa-secondary-color: rgba(33, 37, 41, 0.75);
+    --tfa-base-color: var(--bs-body-color);
+    --tfa-secondary-color: var(--bs-secondary);
 }
 
 .tfa_error,

modules/contacts/modules.php

@@ -190,7 +190,7 @@ protected function output() {
 
         return '<tr class="general_setting"><td><label for="contact_auto_collect">' .
             $this->trans('Automatically add outgoing email addresses') . '</label></td>' .
-            '<td><input type="checkbox" ' . $checked . ' id="contact_auto_collect" name="contact_auto_collect" value="1" />' . $reset . '</td></tr>';
+            '<td><input class="form-check-input" type="checkbox" ' . $checked . ' id="contact_auto_collect" name="contact_auto_collect" value="1" />' . $reset . '</td></tr>';
     }
 }
 

modules/core/output_modules.php

@@ -1316,7 +1316,7 @@ protected function output() {
         if (!$this->get('hide_folder_icons')) {
             $res .= '<i class="bi bi-envelope-fill fs-5 me-2"></i>';
         }
-        $res .= $this->trans('Unread').'</a><span class="total_unread_count badge bg-secondary ms-2 px-1"></span></li>';
+        $res .= $this->trans('Unread').'</a><span class="total_unread_count badge rounded-pill text-bg-info ms-2 px-1"></span></li>';
         $res .= '<li class="menu_flagged"><a class="unread_link" href="?page=message_list&amp;list_path=flagged">';
         if (!$this->get('hide_folder_icons')) {
             $res .= '<i class="bi bi-flag-fill fs-5 me-2"></i>';

modules/core/site.css

@@ -53,7 +53,8 @@ a:hover {
 
 .selected_menu,
 .selected_menu a {
-  color: var(--bs-primary) !important;
+  color: var(--bs-link-color) !important;
+  font-weight: bold !important;
   line-height: 1.25em;
 }
 
@@ -76,7 +77,6 @@ body {
   background-color: #fff;
 }
 body {
-  background: linear-gradient(180deg, #faf6f5, #faf6f5, #faf6f5, #faf6f5, #fff);
   font-size: 1em;
   height: 100%;
   color: #333;
@@ -123,17 +123,10 @@ td {
   cursor: pointer;
   font-size: 110%;
 }
-.subject a {
-  color: #333 !important;
-}
 .source {
   font-style: italic;
-  color: #666;
   font-size: 75%;
 }
-.msg_date {
-  color: #666;
-}
 .news_cell .msg_date {
   padding-top: 5px;
 }
@@ -217,7 +210,6 @@ td {
   padding-left: 10px;
   padding-top: 5px;
   padding-bottom: 3px;
-  color: #333;
   border-bottom: solid 1px #ede8e6;
 }
 .message_table {
@@ -318,11 +310,6 @@ td {
 .disabled_link {
   color: #bbb;
 }
-.disabled_input,
-input:disabled {
-  color: #aaa !important;
-  background-color: #ddd;
-}
 input,
 option,
 select,
@@ -375,7 +362,7 @@ button {
   line-height: 1.25em;
 }
 .settings_subtitle {
-  color: rgba(var(--bs-body-color-rgb), 0.8) !important;
+  color: var(--bs-link-color)!important;
 }
 .folder_list {
   background-color: #fff;
@@ -460,7 +447,8 @@ button {
   margin-top: 0px;
   margin-right: -15px;
   background: linear-gradient(180deg,var(--bs-body-bg), var(--bs-body-bg), var(--bs-secondary-bg)) !important;
-  border-bottom: solid 1px #ede8e6;
+  border-bottom: solid 1px var(--bs-secondary-bg);
+  border-top: solid 1px var(--bs-secondary-bg);
   padding-top: 10px;
   font-size: 125%;
   letter-spacing: -1px;
@@ -472,7 +460,8 @@ button {
 .content_title {
   margin-top: 0px;
   background: linear-gradient(180deg,var(--bs-body-bg), var(--bs-body-bg), var(--bs-secondary-bg)) !important;
-  border-bottom: solid 1px #ede8e6;
+  border-bottom: solid 1px var(--bs-secondary-bg);
+  border-top: solid 1px var(--bs-secondary-bg);
   padding-bottom: 10px;
   padding-top: 20px;
   letter-spacing: -1px;
@@ -816,11 +805,12 @@ div.unseen,
 .debug_title {
   color: var(--bs-primary);
   position: fixed;
-  background-color: #f5f5f5;
+  background-color: var(--bs-secondary-bg);
   bottom: 0px;
   right: 0px;
   padding: 20px;
   padding-left: 20px;
+  z-index: 1000;
 }
 .long_session {
   float: left;

modules/feeds/modules.php

@@ -580,7 +580,7 @@ protected function output() {
                     $this->html_safe($vals['name']), $this->html_safe($vals['server']), $this->html_safe($vals['server']));
                 $res .= '<form class="feed_connect d-flex gap-2" method="POST">';
                 $res .= '<input type="hidden" name="feed_id" value="'.$this->html_safe($index).'" />';
-                $res .= '<input type="submit" value="'.$this->trans('Test').'" class="test_feed_connect btn btn-outline-secondary btn-sm" />';
+                $res .= '<input type="submit" value="'.$this->trans('Test').'" class="test_feed_connect btn btn-primary btn-sm" />';
                 $res .= '<input type="submit" value="'.$this->trans('Delete').'" class="feed_delete btn btn-outline-danger btn-sm" />';
                 $res .= '<input type="hidden" value="ajax_feed_debug" name="hm_ajax_hook" />';
                 $res .= '</form></div></div>';

modules/github/modules.php

@@ -653,7 +653,7 @@ protected function output() {
             $checked = '';
         }
         return '<tr class="unread_setting"><td><label for="unread_exclude_github">'.$this->trans('Exclude unread Github notices').'</label></td>'.
-            '<td><input type="checkbox" '.$checked.' value="1" id="unread_exclude_github" name="unread_exclude_github" /></td></tr>';
+            '<td><input class="form-check-input" type="checkbox" '.$checked.' value="1" id="unread_exclude_github" name="unread_exclude_github" /></td></tr>';
     }
 }
 

modules/highlights/modules.php

@@ -222,7 +222,7 @@ protected function output() {
                     '<td><form method="POST">'.
                     '<input type="hidden" name="hm_page_key" value="'.$this->html_safe(Hm_Request_Key::generate()).'" />'.
                     '<input type="hidden" name="rule_del_id" value="'.$this->html_safe($index).'" />'.
-                    '<button type="submit" class="rule_del"><i class="bi bi-x-circle-fiill"></i></button></form>'.
+                    '<button type="submit" class="rule_del btn btn-light"><i class="bi bi-x-circle-fill"></i></button></form>'.
                     '</tr>';
             }
         }

modules/imap/output_modules.php

@@ -482,9 +482,9 @@ protected function output() {
             // Buttons
             if (!isset($vals['user']) || !$vals['user']) {
                 $res .= '<input type="submit" value="'.$this->trans('Delete').'" class="imap_delete btn btn-outline-danger btn-sm me-2" />';
-                $res .= '<input type="submit" value="'.$this->trans('Save').'" class="save_imap_connection btn btn-outline-secondary btn-sm me-2" />';
+                $res .= '<input type="submit" value="'.$this->trans('Save').'" class="save_imap_connection btn btn-primary btn-sm me-2" />';
             } else {
-                $res .= '<input type="submit" value="'.$this->trans('Test').'" class="test_imap_connect btn btn-outline-secondary btn-sm me-2" />';
+                $res .= '<input type="submit" value="'.$this->trans('Test').'" class="test_imap_connect btn btn-primary btn-sm me-2" />';
                 $res .= '<input type="submit" value="'.$this->trans('Delete').'" class="imap_delete btn btn-outline-danger btn-sm me-2" />';
                 $res .= '<input type="submit" value="'.$this->trans('Forget').'" class="forget_imap_connection btn btn-outline-warning btn-sm me-2" />';
             }
@@ -704,7 +704,7 @@ protected function output() {
                 $res .= '<input type="submit" value="'.$this->trans('Delete').'" class="btn btn-outline-danger btn-sm imap_delete me-2" />';
                 $res .= '<input type="submit" value="'.$this->trans('Save').'" class="btn btn-outline-success btn-sm save_imap_connection me-2" />';
             } else {
-                $res .= '<input type="submit" value="'.$this->trans('Test').'" class="btn btn-outline-secondary btn-sm test_imap_connect me-2" />';
+                $res .= '<input type="submit" value="'.$this->trans('Test').'" class="btn btn-primary btn-sm test_imap_connect me-2" />';
                 $res .= '<input type="submit" value="'.$this->trans('Delete').'" class="btn btn-danger btn-sm imap_delete me-2" />';
                 $res .= '<input type="submit" value="'.$this->trans('Forget').'" class="btn btn-outline-warning btn-sm forget_imap_connection me-2" />';
             }

modules/imap/site.css

@@ -12,7 +12,7 @@
 /* .add_server .txt_fld { width: 205px; } */
 /* .add_server .port_fld { width: 50px; } */
 /* .server_title { font-size: 110%; margin-bottom: 0px; color: #666; } */
-.server_subtitle { margin-bottom: 20px; color: #666; overflow: hidden; text-overflow: ellipsis}
+.server_subtitle { margin-bottom: 20px; color: rgba(var(--bs-body-color-rgb), 0.7); overflow: hidden; text-overflow: ellipsis}
 .msg_text { min-height: 600px; background-color: #fff; height: 100%; }
 .msg_text_inner { min-height: 300px; font-family: monospace; width: 90%; padding: 30px; padding-left: 40px; }
 /* .msg_headers { max-width: 100%; border-bottom: solid 1px #ddd; color: #777; padding: 0px; padding-bottom: 10px; padding-top: 10px; } */

modules/pgp/modules.php

@@ -159,8 +159,8 @@ protected function output() {
             $res .= '</td><td><form method="post" action="?page=pgp#public_keys">';
             $res .= '<input type="hidden" name="hm_page_key" value="'.$this->html_safe(Hm_Request_Key::generate()).'" />';
             $res .= '<input type="hidden" value="'.$this->html_safe($index).'" name="delete_public_key_id" />'.
-                '<button type="submit" class="delete_pgp_key" title="'.$this->trans('Delete').'">';
-            $res .= '"<i class="bi bi-x-circle-fiill"></i></button></form></td></tr>';
+                '<button type="submit" class="delete_pgp_key btn btn-light" title="'.$this->trans('Delete').'">';
+            $res .= '"<i class="bi bi-x-circle-fill"></i></button></form></td></tr>';
         }
         $res .= '</tbody></table>';
         $res .= '</div>';

modules/saved_searches/modules.php

@@ -178,7 +178,7 @@ protected function output() {
         if (!$this->get('search_name')) {
             $style = 'style="display: none;"';
         }
-        return '<a href="" '.$style.' class="delete_search" title="'.$this->trans('Delete saved search').'"><i class="bi bi-x-circle-fill"></i></a>';
+        return '<a href="" '.$style.' class="delete_search btn btn-light" title="'.$this->trans('Delete saved search').'"><i class="bi bi-x-circle-fill"></i></a>';
     }
 }
 

modules/smtp/modules.php

@@ -1103,7 +1103,7 @@ protected function output() {
                 '<input type="hidden" class="compose_in_reply_to" name="compose_in_reply_to" value="'.$this->html_safe($in_reply_to).'" />'.
 
                 '<div class="to_outer">'.
-                    '<div class="mb-3 position-relative compose_container p-1 w-100">'.
+                    '<div class="mb-3 position-relative compose_container p-1 w-100 form-control">'.
                         '<div class="bubbles bubble_dropdown"></div>'.
                         '<input autocomplete="off" value="'.$this->html_safe($to).'" required name="compose_to" class="compose_to w-75" type="text" placeholder="'.$this->trans('To').'" id="compose_to" />'.
                         '<a href="#" tabindex="-1" class="toggle_recipients position-absolute top-0 end-0 pe-2"><i class="bi bi-plus-square-fill fs-3"></i></a>'.
@@ -1112,12 +1112,12 @@ protected function output() {
                 '</div>'.
 
                 '<div class="recipient_fields">'.
-                    '<div class="mb-3 compose_container">'.
+                    '<div class="mb-3 compose_container form-control">'.
                         '<div class="bubbles bubble_dropdown"></div>'.
                         '<input autocomplete="off" value="'.$this->html_safe($cc).'" name="compose_cc" class="compose_cc" type="text" placeholder="'.$this->trans('Cc').'" id="compose_cc" />'.
                     '</div>'.
                     '<div id="cc_contacts"></div>'.
-                    '<div class="mb-3 compose_container">'.
+                    '<div class="mb-3 compose_container form-control">'.
                         '<div class="bubbles bubble_dropdown"></div>'.
                         '<input autocomplete="off" value="'.$this->html_safe($bcc).'" name="compose_bcc" class="compose_bcc" type="text" placeholder="'.$this->trans('Bcc').'" id="compose_bcc" />'.
                     '</div>'.
@@ -1398,7 +1398,7 @@ protected function output() {
                     $res .= '<input type="submit" value="'.$this->trans('Save').'" class="save_smtp_connection btn btn-light border btn-sm me-2" />';
                 }
                 else {
-                    $res .= '<input type="submit" value="'.$this->trans('Test').'" class="test_smtp_connect btn btn-outline-secondary btn-sm me-2" />';
+                    $res .= '<input type="submit" value="'.$this->trans('Test').'" class="test_smtp_connect btn btn-primary btn-sm me-2" />';
                     $res .= '<input type="submit" value="'.$this->trans('Delete').'" class="delete_smtp_connection btn btn-outline-danger btn-sm me-2" />';
                     $res .= '<input type="submit" value="'.$this->trans('Forget').'" class="forget_smtp_connection btn btn-outline-secondary btn-sm me-2" />';
                 }

modules/smtp/site.css

@@ -1,7 +1,11 @@
 .compose_page { width: 100%; height: 100%; min-height: 400px; background-color: #fff; width: 100%; }
 /* .compose_form { position: relative; display: block; padding: 20px; width: 80%; padding-left: 30px; padding-bottom: 0px; } */
 /* .compose_bcc, .compose_cc, .compose_subject, .compose_to { padding: 5px; margin: 5px; width: 95%; } */
-.compose_to, .compose_bcc, .compose_cc { border: unset; outline: none; white-space: nowrap; width: 95%; }
+.compose_to, .compose_bcc, .compose_cc { border: unset; outline: none; white-space: nowrap; width: 95%; background-color: var(--bs-form-bg); }
+.compose_to::placeholder, .compose_bcc::placeholder, .compose_cc::placeholder {
+    color: var(--bs-input-placeholder-color) !important;
+    font-family: var(--bs-body-font-family);
+}
 /* .toggle_recipients { background-color: #fff;font-size: 120%; } */
 
 .compose_body { min-height: 300px !important; }
@@ -30,13 +34,13 @@
 .meter span {display: block; height: 100%; }
 .progress {background-color: #4323f5; animation: progressBar 1s ease-in-out; animation-fill-mode:both; }
 @keyframes progressBar { 0% { width: 0; } 100% { width: 100%; }}
-.compose_container { border: 1px solid #ddd; border-radius: 5px }
+.compose_container { min-height: calc(3.5rem + calc(var(--bs-border-width) * 2)); padding-left: 3px !important;}
 .bubbles { display: inline-block; background-color: #fff; cursor: pointer; padding: 5px; }
 .bubble { font-size: .9rem; border: 1px solid #ddd; border-radius: 4px; padding: 7px 14px; display: inline-block; margin: 0px 5px 5px 0px; }
 .bubble:hover { background-color: #eee; }
 /* .bubble:not(:first-child) { margin-left: 5px; } */
 .bubble_close { font-size: 1.7em; float: right; margin-top: 9px; line-height: 0; margin-left: 7px; }
-.bubble_dropdown {position: relative;display: inline-block;}
+.bubble_dropdown {position: relative;display: inline-block; background-color: var(--bs-form-bg);}
 .bubble_dropdown-toggle {cursor: pointer;}
 .bubble_dropdown-content {display: none;position: absolute;background-color: #f9f9f9;padding: 10px;border: 1px solid #ddd; min-width: 160px; z-index: 1;}
 .bubble_dropdown-content.show {display: block;}

modules/themes/assets/cerulean/css/cerulean.css

@@ -2,7 +2,7 @@
 /*Bootswatch theme adapted by the Cypht Community for Cypht */
 /* Original Bootswatch information:
  * Bootswatch v5.3.1 (https://bootswatch.com)
- * Theme: cosmo
+ * Theme: cerulean
  * Copyright 2012-2023 Thomas Park
  * Licensed under MIT
  * Based on Bootstrap

modules/themes/assets/cyborg/css/cyborg.css

@@ -2,7 +2,7 @@
 /*Bootswatch theme adapted by the Cypht Community for Cypht */
 /* Original Bootswatch information:
  * Bootswatch v5.3.1 (https://bootswatch.com)
- * Theme: cosmo
+ * Theme: cyborg
  * Copyright 2012-2023 Thomas Park
  * Licensed under MIT
  * Based on Bootstrap
@@ -12,4 +12,9 @@
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
-@import url('../../../../../vendor/thomaspark/bootswatch/dist/cyborg/bootstrap.min.css');
+@import url("../../../../../vendor/thomaspark/bootswatch/dist/cyborg/bootstrap.min.css");
+
+:root {
+  --bs-secondary-bg: #181818;
+  --bs-input-placeholder-color: rgba(173, 175, 174, 0.75);
+}

modules/themes/assets/darkly/css/darkly.css

@@ -2,7 +2,7 @@
 /*Bootswatch theme adapted by the Cypht Community for Cypht */
 /* Original Bootswatch information:
  * Bootswatch v5.3.1 (https://bootswatch.com)
- * Theme: cosmo
+ * Theme: darkly
  * Copyright 2012-2023 Thomas Park
  * Licensed under MIT
  * Based on Bootstrap
@@ -12,4 +12,18 @@
  * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
-@import url('../../../../../vendor/thomaspark/bootswatch/dist/darkly/bootstrap.min.css');
+@import url("../../../../../vendor/thomaspark/bootswatch/dist/darkly/bootstrap.min.css");
+
+:root {
+  --bs-secondary-bg: #333;
+  --bs-input-placeholder-color: #888;
+}
+.form-floating > .form-control-plaintext ~ label,
+.form-floating > .form-control:focus ~ label,
+.form-floating > .form-control:not(:placeholder-shown) ~ label,
+.form-floating > .form-select ~ label {
+  color: #888 !important;
+}
+.text-secondary {
+    color: #adadad !important;
+}

modules/themes/assets/flatly/css/flatly.css

@@ -2,7 +2,7 @@
 /*Bootswatch theme adapted by the Cypht Community for Cypht */
 /* Original Bootswatch information:
  * Bootswatch v5.3.1 (https://bootswatch.com)
- * Theme: cosmo
+ * Theme: flatly
  * Copyright 2012-2023 Thomas Park
  * Licensed under MIT
  * Based on Bootstrap

modules/themes/assets/journal/css/journal.css

@@ -2,7 +2,7 @@
 /*Bootswatch theme adapted by the Cypht Community for Cypht */
 /* Original Bootswatch information:
  * Bootswatch v5.3.1 (https://bootswatch.com)
- * Theme: cosmo
+ * Theme: journal
  * Copyright 2012-2023 Thomas Park
  * Licensed under MIT
  * Based on Bootstrap

modules/themes/assets/litera/css/litera.css

@@ -2,7 +2,7 @@
 /*Bootswatch theme adapted by the Cypht Community for Cypht */
 /* Original Bootswatch information:
  * Bootswatch v5.3.1 (https://bootswatch.com)
- * Theme: cosmo
+ * Theme: litera
  * Copyright 2012-2023 Thomas Park
  * Licensed under MIT
  * Based on Bootstrap