diff --git a/config/language-translations.php b/config/language-translations.php
index 290de491..4ed44014 100644
--- a/config/language-translations.php
+++ b/config/language-translations.php
@@ -73,10 +73,10 @@ return [
         'admin_settings.payments.allow_payments'              => 'Allow Subscription Payments',
         'admin_settings.payments.button_submit'               => 'Test and Save Stripe',
         'admin_settings.payments.button_testing'              => 'Testing Stripe Connection',
-        'admin_settings.payments.credentials_disclaimer'      => "Your Stripe credentials is not showed because these values are secret and must not be revealed by stranger. You can change your Stripe credentials in your <b class='text-theme'>.env</b> file.",
+        'admin_settings.payments.credentials_disclaimer'      => "Your Stripe credentials is not showed because these values are secret and must not be revealed by stranger. You can change your Stripe credentials in your <b class='text-theme dark-text-theme'>.env</b> file.",
         'admin_settings.payments.section_payments'            => 'Stripe Payments',
         'admin_settings.payments.stripe_create_acc'           => 'If you don’t have stripe account, please <a href="https://dashboard.stripe.com/register" target="_blank">register here</a> and get your Publishable Key, Secret Key and create your webhook.',
-        'admin_settings.payments.stripe_create_webhook'       => "You have to create webhook endpoint in your Stripe Dashboard. You can find it in <b class='text-theme'>Dashboard -> Developers -> Webhooks -> Add Endpoint</b>. In Endpoint URL please copy and paste url bellow. Make sure, this url is your public domain, not localhost. In events section, please click on <b class='text-theme'>receive all events</b>. That's all.",
+        'admin_settings.payments.stripe_create_webhook'       => "You have to create webhook endpoint in your Stripe Dashboard. You can find it in <b class='text-theme dark-text-theme'>Dashboard -> Developers -> Webhooks -> Add Endpoint</b>. In Endpoint URL please copy and paste url bellow. Make sure, this url is your public domain, not localhost. In events section, please click on <b class='text-theme dark-text-theme'>receive all events</b>. That's all.",
         'admin_settings.payments.stripe_currency'             => 'Stripe Currency',
         'admin_settings.payments.stripe_currency_plac'        => 'Select your Stripe currency',
         'admin_settings.payments.stripe_pub_key'              => 'Publishable Key',
@@ -276,7 +276,7 @@ return [
         'admin_settings.appearance.title_plac'               => 'Type your app title',
         'admin_settings.email.driver'                        => 'Mail Driver',
         'admin_settings.email.driver_plac'                   => 'Type your mail driver',
-        'admin_settings.email.email_disclaimer'              => "This form is not fully pre-filled for security reasons. Your email settings is available in your <b class='text-theme'>.env</b> file. For apply new Email settings, please confirm your options by button at the end of formular.",
+        'admin_settings.email.email_disclaimer'              => "This form is not fully pre-filled for security reasons. Your email settings is available in your <b class='text-theme dark-text-theme'>.env</b> file. For apply new Email settings, please confirm your options by button at the end of formular.",
         'admin_settings.email.encryption'                    => 'Mail Encryption',
         'admin_settings.email.encryption_plac'               => 'Select your mail encryption',
         'admin_settings.email.host'                          => 'Mail Host',
@@ -574,7 +574,7 @@ return [
         'shared_form.button_generate'                        => 'Generate Link',
         'shared_form.button_more_options'                    => 'Set Expiration',
         'shared_form.email_placeholder'                      => 'Type your emails',
-        'shared_form.email_successfully_send_message'        => "Your item was <b class='text-theme'>successfully send</b> to recipients emails.",
+        'shared_form.email_successfully_send_message'        => "Your item was <b class='text-theme dark-text-theme'>successfully send</b> to recipients emails.",
         'shared_form.expiration_day'                         => '{value}d.',
         'shared_form.expiration_hour'                        => '{value}h.',
         'shared_form.label_expiration'                       => 'Link Expiration',
@@ -698,7 +698,7 @@ return [
         'popup_2fa.title'                                    => 'Confirm Your Password',
         'popup_2fa.input_label'                              => 'Password',
         'popup_2fa.placeholder'                              => 'Type your password',
-        'popup_2fa.help'                                     => 'Scan the image above with the <b class="text-theme">two-factor authentication app</b> on your phone.',
+        'popup_2fa.help'                                     => 'Scan the image above with the <b class="text-theme dark-text-theme">two-factor authentication app</b> on your phone.',
         'popup_2fa.confirm_button'                           => 'Confirm',
         'popup_2fa.disappear_qr'                             => 'Really disappear this QR code?',
         'popup_2fa.toaster_enabled'                          => 'Your 2FA was enabled successfully!',
@@ -709,7 +709,7 @@ return [
         'popup_2fa.codes_info'                               => 'Recovery codes can be used to access your account in the event you lose access to your device and cannot receive two-factor authentication codes.',
         'popup_2fa.codes_button'                             => 'Show Codes',
         'popup_2fa.popup_codes_title'                        => 'Your Security Codes',
-        'popup_2fa.popup_codes_disclaimer'                   => '<b class="text-theme">Put these in a safe spot.</b> If you lose your device and don’t have the recovery codes you will lose access to your account.',
+        'popup_2fa.popup_codes_disclaimer'                   => '<b class="text-theme dark-text-theme">Put these in a safe spot.</b> If you lose your device and don’t have the recovery codes you will lose access to your account.',
         'context_menu.codes_regenerate'                      => 'Regenerate Codes',
         'popup_2fa.toaster_codes_copied'                     => 'Your codes was copied!',
         'popup_2fa.toaster_codes_regenerated'                => 'Your codes was regenerated!',
@@ -723,9 +723,10 @@ return [
         'popup_personal_token.label'                         => 'Token Name',
         'popup_personal_token.plc'                           => 'Type token name...',
         'popup_personal_token.your_token'                    => 'Your Personal Access Token',
-        'popup_personal_token.copy_token'                    => "Make sure to <b class='text-theme'>copy your personal access token now</b>. You won’t be able to see it again!",
+        'popup_personal_token.copy_token'                    => "Make sure to <b class='text-theme dark-text-theme'>copy your personal access token now</b>. You won’t be able to see it again!",
         'popup_delete_personal_token.title'                  => 'Are you sure you want to delete this token?',
         'popup_delete_personal_token.description'            => 'Any applications or scripts using this token will no longer be able to access into your account. You cannot undo this action.',
         'personal_token.token_deleted'                       => 'Token was successfully deleted!',
+        'dark_mode_toggle'                                   => 'Toggle Dark Mode',
     ],
 ];
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 64e375a0..cc5d0554 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,76 +1,103 @@
 {
-    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~6c99cc74.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~6c99cc74.js?id=94c9a052e6e82569e862",
-    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=ebb51a58a95a14da110b",
-    "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=f3dc8d59297f76bf9573",
-    "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=41b42ac4d0a735daa6cc",
-    "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js?id=6dc32b9b0f6d281d6a26",
-    "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=dd14a1d618e603d300fb",
-    "/chunks/not-found.js": "/chunks/not-found.js?id=87a13ef68b45d7543699",
-    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=eb1b0461791657cc54ce",
-    "/vendors~chunks/platform~chunks/shared.js": "/vendors~chunks/platform~chunks/shared.js?id=bc26c252f2ba5f4d6360",
-    "/js/main.js": "/js/main.js?id=98ab1a7696f94bf7dd3d",
-    "/css/app.css": "/css/app.css?id=a8f94d0c5a6f4a1185b1",
-    "/chunks/admin.js": "/chunks/admin.js?id=9c64b111c6911aae7e15",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=86b763ce14425cc51947",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=22ed25d12fde931a6384",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=6f98598d588c394bbaf6",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=74dfa50e070b752372de",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=03834d79455e3e9f6c72",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=e5ab59656bb2c1aaefa5",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=4fdbd34bad92dccaf31a",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=efece9c92dea88c05578",
-    "/chunks/app-settings.js": "/chunks/app-settings.js?id=46aed146ad695e6530b7",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=ab0d2bd0a378d29f10b4",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=2cfda34a5cbcfa80b125",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=9ccd4c02178f4b6e7278",
-    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=7ad3557be542c00d77fd",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=ae19be8c8bc403c815f3",
-    "/chunks/database.js": "/chunks/database.js?id=ffc140d6a6ea7963cd40",
-    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=8b23935ea7aa9730902a",
-    "/chunks/email-verified.js": "/chunks/email-verified.js?id=bd5e569c62dc884f4a87",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=b78dc7d4a781b8ce1e6b",
-    "/chunks/files.js": "/chunks/files.js?id=9a658936883b34ee484a",
-    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=5af9e720ce6b3a566d17",
-    "/chunks/homepage.js": "/chunks/homepage.js?id=b4f57d89ed27bc70b335",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=fca5d397ce7e81d2388f",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=9c9facbd02511ca391de",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=1bfdb163e64dd0103e6c",
-    "/chunks/pages.js": "/chunks/pages.js?id=929b8c99895129e7765b",
-    "/chunks/plan.js": "/chunks/plan.js?id=c04980a769c53eac9702",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=a4b5a191f52028490d20",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=82741fb5261f08150514",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=eb631dd60eda973ddad4",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=24aa1d29e50b816ad886",
-    "/chunks/plans.js": "/chunks/plans.js?id=974287b8ed7b22ca9d9d",
-    "/chunks/platform.js": "/chunks/platform.js?id=7db1002700c23a934dd8",
-    "/chunks/profile.js": "/chunks/profile.js?id=1abb937525ea9941f58d",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=3c4c7dfede2f235b459a",
-    "/chunks/settings.js": "/chunks/settings.js?id=734e5db74f384924e699",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=2299c2992957c6e40719",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=45a74cda818069e5b06b",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=ed1689c797ac4ac30444",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=c9cb709ac5bec8a657c6",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=2c8487ac06bb589aa5b7",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=f8796db5378f62399f23",
-    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=d60972a2216523642850",
-    "/chunks/shared.js": "/chunks/shared.js?id=0c7a3d4f575dbf4f21b0",
-    "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=86820a408438c3513b20",
-    "/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=72b0747c31534d3235e3",
-    "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=03fb36b0d38a3218221f",
-    "/chunks/sign-in.js": "/chunks/sign-in.js?id=c0cee9fd1b07d47a5645",
-    "/chunks/sign-up.js": "/chunks/sign-up.js?id=fba111e00801bb09ab4f",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=08b7d59384397b00aedf",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=1ecd54723469b1976017",
-    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=3e480de6985a816bca2f",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=c86dc4d2baa0347eb760",
-    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=dae14e5e76e0b93e6a73",
-    "/chunks/user.js": "/chunks/user.js?id=91c3e68c04873712f235",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=cbe7a7de7f1f0b7900f2",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=dc708437ba1e5ebc0a0d",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=12c84179aaa9cebcb255",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=777a07bc5ec4f185477e",
-    "/chunks/user-password.js": "/chunks/user-password.js?id=3214eb9dadcbeb1e685f",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=92037267138bb75304ec",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=9a9e247c61190a3ef745",
-    "/chunks/users.js": "/chunks/users.js?id=9d3aef23a49ec78dfef0"
+    "/js/main.js": "/js/main.js",
+    "/css/app.css": "/css/app.css",
+    "/chunks/admin.js": "/chunks/admin.js?id=f48be89654bdd5857619",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=c0454f30ab711c13d961",
+    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=91adf6625e49f0b93731",
+    "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a7b1c983.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a7b1c983.js?id=66c2c205086f658115d7",
+    "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js?id=1afc2a786d4a7222405e",
+    "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=5b0057f770c45f0ffd92",
+    "/chunks/admin~chunks/files~chunks/settings~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared/file-browser.js?id=d5c9e6104890d4a17143",
+    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=2f834ba9277e999fee7a",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=00b5d7aaaf17b263c7fe",
+    "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=05abca56520b94ee2c21",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=fafa9f673208f0b861d6",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=075ff381293e1a20d167",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=fd6936cca8f3b8b4de9a",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=44b987551c03b18b4ca7",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=2aaaa47239358f21ae3b",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=fb4895bc3cb1147a009f",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=934f0c4e3afa1d6085e2",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=91689fc67cbc81b3701b",
+    "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=1c3fefab1daa3f807f15",
+    "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~0d12a0aa.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~0d12a0aa.js?id=4b583e0677bf48a81557",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=ad84d8d637cedb14ce81",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=c9e8129dade16a2a347c",
+    "/chunks/app-settings.js": "/chunks/app-settings.js?id=049741bb0d8712c772dd",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=6a7724d6920f181311ed",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=17649af88aea4624b7fe",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=391de80c15895ae56421",
+    "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=a964545445eef7615f9f",
+    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=9257ac3b9281c38c469f",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=941a981972a5f13723f6",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=55b9119cb98263cc3677",
+    "/chunks/database.js": "/chunks/database.js?id=66b9b203e8037696ef04",
+    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1141f8e183483da82e8a",
+    "/chunks/email-verified.js": "/chunks/email-verified.js?id=b80cafb3a468e55c45eb",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a8126df285a75a0fc27e",
+    "/chunks/files.js": "/chunks/files.js?id=54c6dddb471986e202f3",
+    "/chunks/files~chunks/platform~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared/file-browser.js?id=9309e2d3ab4df7612d1a",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser.js?id=8a06b7d864acff647f8c",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js?id=0de0b81edf0bb5d4617d",
+    "/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared/file-browser~chunks/user-subscription.js?id=c5ec9502bcfad35c502e",
+    "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=5c31a056cb557ade51c2",
+    "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared/file-browser~chunks/shared/single-file.js?id=ad09e3f973e4db0411f1",
+    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=8871529af0da8193d3a3",
+    "/chunks/homepage.js": "/chunks/homepage.js?id=d29b9f09d08d673dff75",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=32bcc49a5d750d274510",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=35644a6bac5a727163fa",
+    "/chunks/not-found.js": "/chunks/not-found.js?id=a45c8ddab87d7bce723a",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=420790a0c44680471a6f",
+    "/chunks/pages.js": "/chunks/pages.js?id=e9f065a730c290bbc466",
+    "/chunks/plan.js": "/chunks/plan.js?id=b4cfa98dcd72d0daf2b1",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=9e9f90ad223f83921e16",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=df66472f7a9121f95e71",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=146515010333316075d6",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=320263fdc9aef3a3be60",
+    "/chunks/plans.js": "/chunks/plans.js?id=0533e61243eeb87b3e8e",
+    "/chunks/platform.js": "/chunks/platform.js?id=721cb528aaff1d69d58f",
+    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=e5dcf772403613fce36c",
+    "/chunks/profile.js": "/chunks/profile.js?id=7186e04a6f0f5b6bf470",
+    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=ddb7be518c092ed392ca",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=c1dfb8aa154ec2606b96",
+    "/chunks/settings.js": "/chunks/settings.js?id=f7a9fd53ae30638964c2",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=8d9c0e1f7c851ba47162",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=85aebd3caecf9e1fa467",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=5df9d33dca4d54165b4f",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=9f4049d97664766feccb",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=b8b143cad82b81253e4f",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=11827a0027b9b7d8462a",
+    "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=680f99e2021f19ff1af8",
+    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=41d3478184ec24644a1c",
+    "/chunks/shared.js": "/chunks/shared.js?id=7524b7a783d4aed23794",
+    "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=888919dfd3b48bf68608",
+    "/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=0f6c34512740fca7e007",
+    "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=7886247bb35deada28a2",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=6e5c9d01fd2214d21de2",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=0838eae8d5c33f41789c",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=44fa05ad44bfab4e49fe",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=40de10e72a76725855e2",
+    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=77d76e7342a0f3538488",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=5a2a439ba83326bf66d4",
+    "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=a1b8f21b2af3ac5972cb",
+    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=8cb10fc2721ecdcb4cf7",
+    "/chunks/user.js": "/chunks/user.js?id=fcaa01ba6ce8844132f0",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=8bde87c67f5d0012dc34",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=d71abbc37b8eef88fe0a",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=dd8e5ca087058f9cec96",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=eb7559b64aa9b3eef405",
+    "/chunks/user-password.js": "/chunks/user-password.js?id=0b6aedd9265f71ba2c8e",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=2ec04730d677842c8d10",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=fc7ddaca95c26ec5c217",
+    "/chunks/users.js": "/chunks/users.js?id=720f418eef0585bdb419",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~6c99cc74.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~6c99cc74.js?id=0a6998f62a162c08a48f",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~cfac0ed6.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~cfac0ed6.js?id=f66c7653a087fe1f3320",
+    "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js": "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared/file-browser~chunks/shared/single-file.js?id=9d10953d3b088324dfe3",
+    "/vendors~chunks/platform~chunks/shared.js": "/vendors~chunks/platform~chunks/shared.js?id=7d09e0b0658e140a7ffa",
+    "/chunks/platform~chunks/shared.a5a4d394b82bd71b661a.hot-update.js": "/chunks/platform~chunks/shared.a5a4d394b82bd71b661a.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.8f990932e028dd281ee1.hot-update.js": "/chunks/files~chunks/shared/file-browser.8f990932e028dd281ee1.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.273d9f27ceb8d0ad2d0e.hot-update.js": "/chunks/files~chunks/shared/file-browser.273d9f27ceb8d0ad2d0e.hot-update.js",
+    "/chunks/files~chunks/shared/file-browser.ed004a5c3c900349a0c0.hot-update.js": "/chunks/files~chunks/shared/file-browser.ed004a5c3c900349a0c0.hot-update.js",
+    "/chunks/sign-in.28c8c3a1175cc61489e8.hot-update.js": "/chunks/sign-in.28c8c3a1175cc61489e8.hot-update.js",
+    "/chunks/sign-in.ab0f9d07b89677eada20.hot-update.js": "/chunks/sign-in.ab0f9d07b89677eada20.hot-update.js"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index ebd482ec..278b32fc 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -22,6 +22,7 @@ import CookieDisclaimer from '@/components/Others/CookieDisclaimer'
 import Spinner from '@/components/FilesView/Spinner'
 import Vignette from '@/components/Others/Vignette'
 import Alert from '@/components/FilesView/Alert'
+import {mapGetters} from 'vuex'
 import {events} from './bus'
 
 export default {
@@ -38,13 +39,44 @@ export default {
             isLoaded: false
         }
     },
+	computed: {
+		...mapGetters([
+			'isDarkMode'
+		]),
+	},
+	watch: {
+		isDarkMode() {
+			this.toggleDarkMode()
+		}
+	},
     methods: {
         unClick() {
             events.$emit('unClick')
-        }
+        },
+		toggleDarkMode() {
+			const webApp = document.getElementsByTagName("html")[0];
+
+			webApp.classList.toggle("dark-mode");
+		}
     },
     beforeMount() {
 
+		// Set dark/light mode by user settings
+		if (localStorage.hasOwnProperty('is_dark_mode')) {
+			if (this.isDarkMode) this.toggleDarkMode()
+		}
+
+		// Proceed dark/light mode by system settings
+		if (! localStorage.hasOwnProperty('is_dark_mode')) {
+			const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+			// Set up initial dark/light mode on app loading
+			if (prefersDarkScheme.matches) this.toggleDarkMode()
+
+			// Watch for dark/light mode changes on os system layer
+			prefersDarkScheme.addEventListener('change', () => this.toggleDarkMode());
+		}
+
         // Get installation state
         let installation = this.$root.$data.config.installation
 
@@ -126,7 +158,7 @@ export default {
 }
 
 // Dark mode support
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     * {
         color: $dark_mode_text_primary;
diff --git a/resources/js/components/Admin/WidgetLatestRegistrations.vue b/resources/js/components/Admin/WidgetLatestRegistrations.vue
index d7291aa6..1d8c67f6 100644
--- a/resources/js/components/Admin/WidgetLatestRegistrations.vue
+++ b/resources/js/components/Admin/WidgetLatestRegistrations.vue
@@ -113,7 +113,7 @@
     @import '@assets/vuefilemanager/_variables';
     @import '@assets/vuefilemanager/_mixins';
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 </style>
diff --git a/resources/js/components/Admin/WidgetTotals.vue b/resources/js/components/Admin/WidgetTotals.vue
index 03f381fa..1ad5b02e 100644
--- a/resources/js/components/Admin/WidgetTotals.vue
+++ b/resources/js/components/Admin/WidgetTotals.vue
@@ -5,7 +5,7 @@
         </div>
         <router-link :to="{name: linkRoute}" class="footer-link">
             <span class="content">{{ linkName }}</span>
-            <chevron-right-icon size="16" class="text-theme"></chevron-right-icon>
+            <chevron-right-icon size="16" class="text-theme dark-text-theme"/>
         </router-link>
     </WidgetWrapper>
 </template>
@@ -65,7 +65,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .widget-value {
 
             span {
diff --git a/resources/js/components/Admin/WidgetWrapper.vue b/resources/js/components/Admin/WidgetWrapper.vue
index fb7ec622..d34461c7 100644
--- a/resources/js/components/Admin/WidgetWrapper.vue
+++ b/resources/js/components/Admin/WidgetWrapper.vue
@@ -3,9 +3,9 @@
         <div class="widget-content">
             <div class="headline">
                 <div class="icon">
-                    <users-icon v-if="icon === 'users'" size="19" class="text-theme"></users-icon>
-                    <star-icon v-if="icon === 'star'" size="19" class="text-theme"></star-icon>
-                    <hard-drive-icon v-if="icon === 'hard-drive'" size="19" class="text-theme"></hard-drive-icon>
+                    <users-icon v-if="icon === 'users'" size="19" class="text-theme dark-text-theme"/>
+                    <star-icon v-if="icon === 'star'" size="19" class="text-theme dark-text-theme"/>
+                    <hard-drive-icon v-if="icon === 'hard-drive'" size="19" class="text-theme dark-text-theme"/>
                 </div>
                 <b class="title">{{ title }}</b>
             </div>
@@ -58,7 +58,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .widget-content {
             background: $dark_mode_foreground;
         }
diff --git a/resources/js/components/Auth/AuthButton.vue b/resources/js/components/Auth/AuthButton.vue
index b9a8b441..6afb0b93 100644
--- a/resources/js/components/Auth/AuthButton.vue
+++ b/resources/js/components/Auth/AuthButton.vue
@@ -88,7 +88,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .button {
 
             &.outline {
diff --git a/resources/js/components/Desktop/PopoverItem.vue b/resources/js/components/Desktop/PopoverItem.vue
index 5fe0f839..e9c6f684 100644
--- a/resources/js/components/Desktop/PopoverItem.vue
+++ b/resources/js/components/Desktop/PopoverItem.vue
@@ -51,7 +51,7 @@
 		}
 	}
 
-	@media (prefers-color-scheme: dark) {
+	.dark-mode {
 		.popover-item {
 			background: $dark_mode_foreground;
 		}
diff --git a/resources/js/components/FilesView/Alert.vue b/resources/js/components/FilesView/Alert.vue
index 1dc35078..f91831f6 100644
--- a/resources/js/components/FilesView/Alert.vue
+++ b/resources/js/components/FilesView/Alert.vue
@@ -167,7 +167,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .popup-wrapper {
             background: $dark_mode_foreground;
         }
diff --git a/resources/js/components/FilesView/ButtonBase.vue b/resources/js/components/FilesView/ButtonBase.vue
index 3a950dfe..7617a28e 100644
--- a/resources/js/components/FilesView/ButtonBase.vue
+++ b/resources/js/components/FilesView/ButtonBase.vue
@@ -104,7 +104,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .button-base {
 
diff --git a/resources/js/components/FilesView/CheckBox.vue b/resources/js/components/FilesView/CheckBox.vue
index 7cdf3d74..ce1c5526 100644
--- a/resources/js/components/FilesView/CheckBox.vue
+++ b/resources/js/components/FilesView/CheckBox.vue
@@ -34,7 +34,7 @@ export default {
     background-color: darken($light_background, 5%);
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     
     .is-deactive {
         background-color: lighten($dark_mode_foreground, 10%);
diff --git a/resources/js/components/FilesView/ContextMenu.vue b/resources/js/components/FilesView/ContextMenu.vue
index 8b87cba8..e42ed475 100644
--- a/resources/js/components/FilesView/ContextMenu.vue
+++ b/resources/js/components/FilesView/ContextMenu.vue
@@ -378,7 +378,7 @@ export default {
     padding: 0;
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .contextmenu {
         background: $dark_mode_foreground;
     }
diff --git a/resources/js/components/FilesView/DesktopToolbar.vue b/resources/js/components/FilesView/DesktopToolbar.vue
index 0fe277cd..158ed569 100644
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -314,7 +314,7 @@
 	}
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 	.toolbar .directory-name {
 		color: $dark_mode_text_primary;
 	}
diff --git a/resources/js/components/FilesView/DragUI.vue b/resources/js/components/FilesView/DragUI.vue
index a65a8843..24064230 100644
--- a/resources/js/components/FilesView/DragUI.vue
+++ b/resources/js/components/FilesView/DragUI.vue
@@ -95,7 +95,7 @@ export default {
     background: white;
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     #drag-ui {
         background: $dark_mode_foreground;
     }
diff --git a/resources/js/components/FilesView/EmptyFilePage.vue b/resources/js/components/FilesView/EmptyFilePage.vue
index 2046f304..5b3a6702 100644
--- a/resources/js/components/FilesView/EmptyFilePage.vue
+++ b/resources/js/components/FilesView/EmptyFilePage.vue
@@ -105,7 +105,7 @@
 		}
 	}
 
-	@media (prefers-color-scheme: dark) {
+	.dark-mode {
 		.text-content {
 
 			.title {
diff --git a/resources/js/components/FilesView/EmptyMessage.vue b/resources/js/components/FilesView/EmptyMessage.vue
index 4379366c..9942d5fe 100644
--- a/resources/js/components/FilesView/EmptyMessage.vue
+++ b/resources/js/components/FilesView/EmptyMessage.vue
@@ -48,7 +48,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .empty-message {
 
             .message {
diff --git a/resources/js/components/FilesView/FileActionsMobile.vue b/resources/js/components/FilesView/FileActionsMobile.vue
index 890f6bf5..a53e7374 100644
--- a/resources/js/components/FilesView/FileActionsMobile.vue
+++ b/resources/js/components/FilesView/FileActionsMobile.vue
@@ -228,7 +228,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         #mobile-actions-wrapper {
             background: $dark_mode_background;
         }
diff --git a/resources/js/components/FilesView/FileItemGrid.vue b/resources/js/components/FilesView/FileItemGrid.vue
index a6944874..bd9cecfc 100644
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -10,7 +10,7 @@
                 <CheckBox v-if="mobileMultiSelect" :is-clicked="isClicked" class="check-box"/>
 
                 <!--If is file or image, then link item-->
-                <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme">
+                <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme dark-text-theme">
                     {{ item.mimetype }}
                 </span>
 
@@ -35,12 +35,12 @@
 
                     <!--Shared Icon-->
                     <div v-if="$checkPermission('master') && item.shared" class="item-shared">
-                        <link-icon size="12" class="shared-icon text-theme" />
+                        <link-icon size="12" class="shared-icon text-theme dark-text-theme" />
                     </div>
 
                     <!--Participant owner Icon-->
                     <div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
-                        <user-plus-icon size="12" class="shared-icon text-theme" />
+                        <user-plus-icon size="12" class="shared-icon text-theme dark-text-theme" />
                     </div>
 
                     <!--Filesize-->
@@ -54,7 +54,7 @@
             </div>
 
             <span @mousedown.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! mobileMultiSelect && canShowMobileOptions">
-                <MoreHorizontalIcon icon="ellipsis-h" size="16" class="icon-action text-theme" />
+                <MoreHorizontalIcon icon="ellipsis-h" size="16" class="icon-action text-theme dark-text-theme" />
             </span>
         </div>
     </div>
@@ -548,7 +548,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .file-wrapper {
 
diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue
index d1461edc..4a889431 100644
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -16,7 +16,7 @@
             <!--Thumbnail for item-->
             <div class="icon-item">
                 <!--If is file or image, then link item-->
-                <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme">
+                <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme dark-text-theme">
                     {{ item.mimetype | limitCharacters }}
                 </span>
 
@@ -39,12 +39,12 @@
                 <div class="item-info">
                     <!--Shared Icon-->
                     <div v-if="$checkPermission('master') && item.shared" class="item-shared">
-                        <link-icon size="12" class="shared-icon text-theme"></link-icon>
+                        <link-icon size="12" class="shared-icon text-theme dark-text-theme"/>
                     </div>
 
                     <!--Participant owner Icon-->
                     <div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
-                        <user-plus-icon size="12" class="shared-icon text-theme"></user-plus-icon>
+                        <user-plus-icon size="12" class="shared-icon text-theme dark-text-theme"/>
                     </div>
 
                     <!--Filesize and timestamp-->
@@ -59,7 +59,7 @@
             <transition name="slide-from-right">
                 <div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
                     <span @mousedown.stop="showItemActions" class="show-actions">
-                        <MoreVerticalIcon size="16" class="icon-action text-theme" />
+                        <MoreVerticalIcon size="16" class="icon-action text-theme dark-text-theme" />
                     </span>
                 </div>
             </transition>
@@ -520,7 +520,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .file-wrapper {
         .icon-item {
diff --git a/resources/js/components/FilesView/FilePreview.vue b/resources/js/components/FilesView/FilePreview.vue
index 7068d4bb..ffb37731 100644
--- a/resources/js/components/FilesView/FilePreview.vue
+++ b/resources/js/components/FilesView/FilePreview.vue
@@ -67,7 +67,7 @@
         background-color: white;
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .file-preview {
             background-color: $dark_mode_background;
         }
diff --git a/resources/js/components/FilesView/FilePreviewMedia.vue b/resources/js/components/FilesView/FilePreviewMedia.vue
index a60cc82c..06700680 100644
--- a/resources/js/components/FilesView/FilePreviewMedia.vue
+++ b/resources/js/components/FilesView/FilePreviewMedia.vue
@@ -377,7 +377,7 @@ export default {
 }
 
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .navigation-arrows {
         .prev, .next {
diff --git a/resources/js/components/FilesView/FilePreviewToolbar.vue b/resources/js/components/FilesView/FilePreviewToolbar.vue
index ab2f9bdf..fd1bf2de 100644
--- a/resources/js/components/FilesView/FilePreviewToolbar.vue
+++ b/resources/js/components/FilesView/FilePreviewToolbar.vue
@@ -339,7 +339,7 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .navigation-panel {
         background-color: $dark_mode_background;
         color: $dark_mode_text_primary;
diff --git a/resources/js/components/FilesView/FolderIcon.vue b/resources/js/components/FilesView/FolderIcon.vue
index 15a8aa45..d4341aac 100644
--- a/resources/js/components/FilesView/FolderIcon.vue
+++ b/resources/js/components/FilesView/FolderIcon.vue
@@ -97,7 +97,7 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .folder-icon {
         &.is-deleted {
diff --git a/resources/js/components/FilesView/ImageMetaData.vue b/resources/js/components/FilesView/ImageMetaData.vue
index c694380e..cb5609c8 100644
--- a/resources/js/components/FilesView/ImageMetaData.vue
+++ b/resources/js/components/FilesView/ImageMetaData.vue
@@ -129,7 +129,7 @@ export default {
 	}
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
 	.meta-data-list {
 		li {
diff --git a/resources/js/components/FilesView/MobileActionButton.vue b/resources/js/components/FilesView/MobileActionButton.vue
index 11d9f3e3..273252bb 100644
--- a/resources/js/components/FilesView/MobileActionButton.vue
+++ b/resources/js/components/FilesView/MobileActionButton.vue
@@ -93,7 +93,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .mobile-action-button {
             background: $dark_mode_foreground;
 
diff --git a/resources/js/components/FilesView/MobileActionButtonUpload.vue b/resources/js/components/FilesView/MobileActionButtonUpload.vue
index 2698232f..8187533e 100644
--- a/resources/js/components/FilesView/MobileActionButtonUpload.vue
+++ b/resources/js/components/FilesView/MobileActionButtonUpload.vue
@@ -64,7 +64,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .mobile-action-button {
             background: $dark_mode_foreground;
 
diff --git a/resources/js/components/FilesView/MobileToolbar.vue b/resources/js/components/FilesView/MobileToolbar.vue
index 633a1aa3..f036a2ca 100644
--- a/resources/js/components/FilesView/MobileToolbar.vue
+++ b/resources/js/components/FilesView/MobileToolbar.vue
@@ -163,7 +163,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .mobile-toolbar {
             background: $dark_mode_background;
diff --git a/resources/js/components/FilesView/MultiSelectToolbarMobile.vue b/resources/js/components/FilesView/MultiSelectToolbarMobile.vue
index f5415a5d..e331a4d0 100644
--- a/resources/js/components/FilesView/MultiSelectToolbarMobile.vue
+++ b/resources/js/components/FilesView/MultiSelectToolbarMobile.vue
@@ -120,7 +120,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .multiselect-actions {
         background: $dark_mode_foreground;
diff --git a/resources/js/components/FilesView/Option.vue b/resources/js/components/FilesView/Option.vue
index 8eb6ac87..f28d0661 100644
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/FilesView/Option.vue
@@ -180,7 +180,7 @@ import {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .menu-option {
         color: $dark_mode_text_primary;
diff --git a/resources/js/components/FilesView/OptionGroup.vue b/resources/js/components/FilesView/OptionGroup.vue
index 20ec769d..eb807a0a 100644
--- a/resources/js/components/FilesView/OptionGroup.vue
+++ b/resources/js/components/FilesView/OptionGroup.vue
@@ -28,7 +28,7 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .menu-option-group {
         border-color: $dark_mode_border_color;
     }
diff --git a/resources/js/components/FilesView/ProcessingPopup.vue b/resources/js/components/FilesView/ProcessingPopup.vue
index 57bd25cf..1cd7e96c 100644
--- a/resources/js/components/FilesView/ProcessingPopup.vue
+++ b/resources/js/components/FilesView/ProcessingPopup.vue
@@ -101,7 +101,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .popup-wrapper {
         background: $dark_mode_foreground;
     }
diff --git a/resources/js/components/FilesView/ProgressBar.vue b/resources/js/components/FilesView/ProgressBar.vue
index 2fc63711..6acfee37 100644
--- a/resources/js/components/FilesView/ProgressBar.vue
+++ b/resources/js/components/FilesView/ProgressBar.vue
@@ -30,16 +30,16 @@ export default {
 		}
 	}
 
-	@media (prefers-color-scheme: dark) {
+	.dark-mode {
 
 		.progress-bar {
 			background: $dark_mode_foreground;
 		}
 	}
 
-	@media only screen and (min-width: 680px) and (prefers-color-scheme: dark) {
+	@media only screen and (min-width: 680px) {
 
-		.progress-bar {
+		.dark-mode .progress-bar {
 			background: $dark_mode_foreground;
 		}
 	}
diff --git a/resources/js/components/FilesView/SearchBar.vue b/resources/js/components/FilesView/SearchBar.vue
index 72ff9e1c..7f96fb2c 100644
--- a/resources/js/components/FilesView/SearchBar.vue
+++ b/resources/js/components/FilesView/SearchBar.vue
@@ -130,7 +130,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .search-bar {
             input {
                 border-color: transparent;
diff --git a/resources/js/components/FilesView/TitlePreview.vue b/resources/js/components/FilesView/TitlePreview.vue
index b454e800..f55ce4af 100644
--- a/resources/js/components/FilesView/TitlePreview.vue
+++ b/resources/js/components/FilesView/TitlePreview.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="wrapper">
         <div class="icon-wrapper">
-            <CheckSquareIcon v-if="icon === 'check-square'" class="icon text-theme" size="21" />
-			<image-icon v-if="icon === 'image'" class="icon text-theme" size="21" />
-			<video-icon v-if="icon === 'video'" class="icon text-theme" size="21" />
-			<folder-icon v-if="icon === 'folder'" class="icon text-theme" size="21" />
-			<file-icon v-if="icon === 'file'" class="icon text-theme" size="21" />
+            <CheckSquareIcon v-if="icon === 'check-square'" class="icon text-theme dark-text-theme" size="21" />
+			<image-icon v-if="icon === 'image'" class="icon text-theme dark-text-theme" size="21" />
+			<video-icon v-if="icon === 'video'" class="icon text-theme dark-text-theme" size="21" />
+			<folder-icon v-if="icon === 'folder'" class="icon text-theme dark-text-theme" size="21" />
+			<file-icon v-if="icon === 'file'" class="icon text-theme dark-text-theme" size="21" />
         </div>
         <div class="text">
             <span class="title">{{ title }}</span>
@@ -77,7 +77,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .wrapper {
         .text {
             .title {
diff --git a/resources/js/components/FilesView/ToolbarButton.vue b/resources/js/components/FilesView/ToolbarButton.vue
index 13f72e6f..defafc33 100644
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/FilesView/ToolbarButton.vue
@@ -109,7 +109,7 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .button {
         background: transparent;
 
diff --git a/resources/js/components/FilesView/ToolbarButtonUpload.vue b/resources/js/components/FilesView/ToolbarButtonUpload.vue
index df6c2aaf..735fe022 100644
--- a/resources/js/components/FilesView/ToolbarButtonUpload.vue
+++ b/resources/js/components/FilesView/ToolbarButtonUpload.vue
@@ -69,7 +69,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .button {
             background: transparent;
diff --git a/resources/js/components/FilesView/UploadProgress.vue b/resources/js/components/FilesView/UploadProgress.vue
index 5f031b17..59b78ff9 100644
--- a/resources/js/components/FilesView/UploadProgress.vue
+++ b/resources/js/components/FilesView/UploadProgress.vue
@@ -129,7 +129,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .progress-bar {
             background: $dark_mode_foreground;
         }
diff --git a/resources/js/components/Index/Components/PricingTables.vue b/resources/js/components/Index/Components/PricingTables.vue
index ec33f79d..b9f02c89 100644
--- a/resources/js/components/Index/Components/PricingTables.vue
+++ b/resources/js/components/Index/Components/PricingTables.vue
@@ -149,7 +149,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .plans-wrapper {
             background: $dark_mode_foreground;
diff --git a/resources/js/components/Index/IndexHeroScreenshot.vue b/resources/js/components/Index/IndexHeroScreenshot.vue
index 69592f3f..67df25ec 100644
--- a/resources/js/components/Index/IndexHeroScreenshot.vue
+++ b/resources/js/components/Index/IndexHeroScreenshot.vue
@@ -206,7 +206,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .hero-screenshot {
 
diff --git a/resources/js/components/Index/IndexMainFeatures.vue b/resources/js/components/Index/IndexMainFeatures.vue
index 2727a0a1..21a43326 100644
--- a/resources/js/components/Index/IndexMainFeatures.vue
+++ b/resources/js/components/Index/IndexMainFeatures.vue
@@ -176,7 +176,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .features {
 
diff --git a/resources/js/components/Index/IndexPageFooter.vue b/resources/js/components/Index/IndexPageFooter.vue
index 7f1ac0bc..7c6da096 100644
--- a/resources/js/components/Index/IndexPageFooter.vue
+++ b/resources/js/components/Index/IndexPageFooter.vue
@@ -104,7 +104,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .copyright {
             color: $dark_mode_text_secondary;
diff --git a/resources/js/components/Mobile/MenuMobile.vue b/resources/js/components/Mobile/MenuMobile.vue
index 5d83c7e0..105bbec2 100644
--- a/resources/js/components/Mobile/MenuMobile.vue
+++ b/resources/js/components/Mobile/MenuMobile.vue
@@ -84,7 +84,7 @@
         position: absolute;
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .options {
             background: $dark_mode_foreground;
diff --git a/resources/js/components/Mobile/MobileHeader.vue b/resources/js/components/Mobile/MobileHeader.vue
index 6e1fa2c4..54768520 100644
--- a/resources/js/components/Mobile/MobileHeader.vue
+++ b/resources/js/components/Mobile/MobileHeader.vue
@@ -98,7 +98,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .mobile-header {
             background: $dark_mode_background;
 
diff --git a/resources/js/components/Others/ActionButton.vue b/resources/js/components/Others/ActionButton.vue
index 86c83a7b..5e49389a 100644
--- a/resources/js/components/Others/ActionButton.vue
+++ b/resources/js/components/Others/ActionButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="action-button">
-        <x-icon size="12" class="icon text-theme" v-if="icon === 'x'" />
-        <edit-2-icon size="12" class="icon text-theme" v-if="icon === 'pencil-alt'" />
+        <x-icon size="12" class="icon text-theme dark-text-theme" v-if="icon === 'x'" />
+        <edit-2-icon size="12" class="icon text-theme dark-text-theme" v-if="icon === 'pencil-alt'" />
         <span class="label">
             <slot></slot>
         </span>
@@ -45,7 +45,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 </style>
diff --git a/resources/js/components/Others/ColorLabel.vue b/resources/js/components/Others/ColorLabel.vue
index ca15d0c0..758de04b 100644
--- a/resources/js/components/Others/ColorLabel.vue
+++ b/resources/js/components/Others/ColorLabel.vue
@@ -48,7 +48,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 </style>
diff --git a/resources/js/components/Others/ColorPicker.vue b/resources/js/components/Others/ColorPicker.vue
index 1c671eed..3b149fed 100644
--- a/resources/js/components/Others/ColorPicker.vue
+++ b/resources/js/components/Others/ColorPicker.vue
@@ -117,7 +117,7 @@ export default {
     position: relative;
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .color-pick-wrapper {
         .color-wrapper {
             .single-color {
diff --git a/resources/js/components/Others/CookieDisclaimer.vue b/resources/js/components/Others/CookieDisclaimer.vue
index 7f7a7373..8bfe4672 100644
--- a/resources/js/components/Others/CookieDisclaimer.vue
+++ b/resources/js/components/Others/CookieDisclaimer.vue
@@ -90,7 +90,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .cookie-wrapper {
             background: $dark_mode_foreground;
 
diff --git a/resources/js/components/Others/CreatePersonaTokenPopup.vue b/resources/js/components/Others/CreatePersonaTokenPopup.vue
index ece5ec08..5c43b2b9 100644
--- a/resources/js/components/Others/CreatePersonaTokenPopup.vue
+++ b/resources/js/components/Others/CreatePersonaTokenPopup.vue
@@ -126,7 +126,7 @@ export default {
 	@import "@assets/vuefilemanager/_inapp-forms.scss";
 	@import '@assets/vuefilemanager/_forms';
 
-	@media (prefers-color-scheme: dark) {
+	.dark-mode {
 
 		.info-box {
 			background: lighten($dark_mode_foreground, 3%);
diff --git a/resources/js/components/Others/EmojiPicker.vue b/resources/js/components/Others/EmojiPicker.vue
index ddbc5e89..a3bd870b 100644
--- a/resources/js/components/Others/EmojiPicker.vue
+++ b/resources/js/components/Others/EmojiPicker.vue
@@ -434,7 +434,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .emoji-wrapper {
         background: lighten($dark_mode_foreground, 2%);
diff --git a/resources/js/components/Others/Forms/CopyInput.vue b/resources/js/components/Others/Forms/CopyInput.vue
index 15075bb9..00a342d9 100644
--- a/resources/js/components/Others/Forms/CopyInput.vue
+++ b/resources/js/components/Others/Forms/CopyInput.vue
@@ -140,7 +140,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .copy-input {
         border-color: #333333;
diff --git a/resources/js/components/Others/Forms/CopyShareLink.vue b/resources/js/components/Others/Forms/CopyShareLink.vue
index 21d10e4d..6a319b1f 100644
--- a/resources/js/components/Others/Forms/CopyShareLink.vue
+++ b/resources/js/components/Others/Forms/CopyShareLink.vue
@@ -146,7 +146,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .copy-input {
         border-color: #333333;
diff --git a/resources/js/components/Others/Forms/FormLabel.vue b/resources/js/components/Others/Forms/FormLabel.vue
index 3a845f3c..a7067cbf 100644
--- a/resources/js/components/Others/Forms/FormLabel.vue
+++ b/resources/js/components/Others/Forms/FormLabel.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="form-label">
-        <edit-2-icon v-if="!icon" size="22" class="icon text-theme" />
-        <settings-icon v-if="icon === 'settings'" size="22" class="icon text-theme" />
-        <smartphone-icon v-if="icon === 'smartphone'" size="22" class="icon text-theme" />
-        <key-icon v-if="icon === 'key'" size="22" class="icon text-theme" />
+        <edit-2-icon v-if="!icon" size="22" class="icon text-theme dark-text-theme" />
+        <settings-icon v-if="icon === 'settings'" size="22" class="icon text-theme dark-text-theme" />
+        <smartphone-icon v-if="icon === 'smartphone'" size="22" class="icon text-theme dark-text-theme" />
+        <key-icon v-if="icon === 'key'" size="22" class="icon text-theme dark-text-theme" />
         <b class="label">
             <slot></slot>
         </b>
@@ -53,7 +53,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .form-label {
 
             .label {
diff --git a/resources/js/components/Others/Forms/ImageInput.vue b/resources/js/components/Others/Forms/ImageInput.vue
index 9c00f715..dd1af6ed 100644
--- a/resources/js/components/Others/Forms/ImageInput.vue
+++ b/resources/js/components/Others/Forms/ImageInput.vue
@@ -187,7 +187,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .dropzone {
             border-color: rgba(white, 0.2);
 
diff --git a/resources/js/components/Others/Forms/InfoBox.vue b/resources/js/components/Others/Forms/InfoBox.vue
index 09bfda86..b8000f0c 100644
--- a/resources/js/components/Others/Forms/InfoBox.vue
+++ b/resources/js/components/Others/Forms/InfoBox.vue
@@ -82,7 +82,7 @@
     }
 
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .info-box {
             background: $dark_mode_foreground;
diff --git a/resources/js/components/Others/Forms/MultiEmailInput.vue b/resources/js/components/Others/Forms/MultiEmailInput.vue
index 3fc7e65e..91a525f4 100644
--- a/resources/js/components/Others/Forms/MultiEmailInput.vue
+++ b/resources/js/components/Others/Forms/MultiEmailInput.vue
@@ -173,7 +173,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .input-wrapper {
 		background: lighten($dark_mode_foreground, 3%);
 
diff --git a/resources/js/components/Others/Forms/SearchInput.vue b/resources/js/components/Others/Forms/SearchInput.vue
index 3316cdfd..bbcb0dab 100644
--- a/resources/js/components/Others/Forms/SearchInput.vue
+++ b/resources/js/components/Others/Forms/SearchInput.vue
@@ -104,7 +104,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .search-bar {
         input {
             background: $dark_mode_foreground;
diff --git a/resources/js/components/Others/Forms/SelectBoxInput.vue b/resources/js/components/Others/Forms/SelectBoxInput.vue
index 843ee729..47432c45 100644
--- a/resources/js/components/Others/Forms/SelectBoxInput.vue
+++ b/resources/js/components/Others/Forms/SelectBoxInput.vue
@@ -80,7 +80,7 @@
     }
 
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .select-box {
 
             .box-item {
diff --git a/resources/js/components/Others/Forms/SelectInput.vue b/resources/js/components/Others/Forms/SelectInput.vue
index eb979d91..c1e859c5 100644
--- a/resources/js/components/Others/Forms/SelectInput.vue
+++ b/resources/js/components/Others/Forms/SelectInput.vue
@@ -235,7 +235,7 @@
         transform: translateY(-50px);
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .select-search {
             background: $dark_mode_foreground;
diff --git a/resources/js/components/Others/Forms/SetupBox.vue b/resources/js/components/Others/Forms/SetupBox.vue
index b854e49f..3f29db3d 100644
--- a/resources/js/components/Others/Forms/SetupBox.vue
+++ b/resources/js/components/Others/Forms/SetupBox.vue
@@ -124,7 +124,7 @@
     }
 
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .setup-box {
 
diff --git a/resources/js/components/Others/Forms/SwitchInput.vue b/resources/js/components/Others/Forms/SwitchInput.vue
index b418e57c..b85ee19f 100644
--- a/resources/js/components/Others/Forms/SwitchInput.vue
+++ b/resources/js/components/Others/Forms/SwitchInput.vue
@@ -90,7 +90,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .switch {
             background: $dark_mode_foreground;
         }
diff --git a/resources/js/components/Others/ListInfoItem.vue b/resources/js/components/Others/ListInfoItem.vue
index 13f68cc1..ae02a32a 100644
--- a/resources/js/components/Others/ListInfoItem.vue
+++ b/resources/js/components/Others/ListInfoItem.vue
@@ -1,6 +1,6 @@
 <template>
     <li class="list-info-item">
-        <b class="text-theme">{{ title }}</b>
+        <b class="text-theme dark-text-theme">{{ title }}</b>
         <span v-if="content">{{ content }}</span>
         <slot></slot>
     </li>
@@ -44,7 +44,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .list-info-item {
 
             span {
diff --git a/resources/js/components/Others/Notifications/ToastrItem.vue b/resources/js/components/Others/Notifications/ToastrItem.vue
index c10f82ae..caae4c28 100644
--- a/resources/js/components/Others/Notifications/ToastrItem.vue
+++ b/resources/js/components/Others/Notifications/ToastrItem.vue
@@ -150,7 +150,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .toastr-item {
 
             &.success, &.danger {
diff --git a/resources/js/components/Others/PageHeader.vue b/resources/js/components/Others/PageHeader.vue
index d983874a..dbd36469 100644
--- a/resources/js/components/Others/PageHeader.vue
+++ b/resources/js/components/Others/PageHeader.vue
@@ -71,7 +71,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .page-header {
             background: $dark_mode_background;
diff --git a/resources/js/components/Others/PlanPricingTables.vue b/resources/js/components/Others/PlanPricingTables.vue
index fbfa6cf6..a0e003b1 100644
--- a/resources/js/components/Others/PlanPricingTables.vue
+++ b/resources/js/components/Others/PlanPricingTables.vue
@@ -167,7 +167,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .plan {
 
             .plan-wrapper {
diff --git a/resources/js/components/Others/Popup/ConfirmPopup.vue b/resources/js/components/Others/Popup/ConfirmPopup.vue
index 6653a1d8..acafc3ab 100644
--- a/resources/js/components/Others/Popup/ConfirmPopup.vue
+++ b/resources/js/components/Others/Popup/ConfirmPopup.vue
@@ -123,7 +123,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .content {
             .title {
diff --git a/resources/js/components/Others/Popup/PopupHeader.vue b/resources/js/components/Others/Popup/PopupHeader.vue
index a38ef180..f34186f6 100644
--- a/resources/js/components/Others/Popup/PopupHeader.vue
+++ b/resources/js/components/Others/Popup/PopupHeader.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="popup-header">
         <div class="icon">
-            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme" />
-            <share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme" />
-            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme" />
-            <key-icon v-if="icon === 'key'" size="17" class="title-icon text-theme" />
+            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme dark-text-theme" />
+            <share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme dark-text-theme" />
+            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme dark-text-theme" />
+            <key-icon v-if="icon === 'key'" size="17" class="title-icon text-theme dark-text-theme" />
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
@@ -97,7 +97,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .popup-header {
             .label {
                 .close-icon {
diff --git a/resources/js/components/Others/Popup/PopupWrapper.vue b/resources/js/components/Others/Popup/PopupWrapper.vue
index 7ac3f4cc..abb24abb 100644
--- a/resources/js/components/Others/Popup/PopupWrapper.vue
+++ b/resources/js/components/Others/Popup/PopupWrapper.vue
@@ -139,16 +139,19 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .popup-wrapper {
             background: $dark_mode_foreground;
             box-shadow: $dark_mode_popup_shadow;
         }
     }
 
-    @media (prefers-color-scheme: dark) and (max-width: 690px) {
-        .popup-wrapper {
-            background: $dark_mode_background;
-        }
-    }
+	@media only screen and (max-width: 690px) {
+
+		.dark-mode {
+			.popup-wrapper {
+				background: $dark_mode_background;
+			}
+		}
+	}
 </style>
diff --git a/resources/js/components/Others/RenameItemPopup.vue b/resources/js/components/Others/RenameItemPopup.vue
index 4d4d6134..421bb41b 100644
--- a/resources/js/components/Others/RenameItemPopup.vue
+++ b/resources/js/components/Others/RenameItemPopup.vue
@@ -185,7 +185,7 @@ export default {
     margin-bottom: 20px;
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
     .close-icon-wrapper {
         &:hover {
 
diff --git a/resources/js/components/Others/SectionTitle.vue b/resources/js/components/Others/SectionTitle.vue
index 6a504c14..1490f6f5 100644
--- a/resources/js/components/Others/SectionTitle.vue
+++ b/resources/js/components/Others/SectionTitle.vue
@@ -26,7 +26,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .text-label {
             color: $theme;
         }
diff --git a/resources/js/components/Others/StorageItemDetail.vue b/resources/js/components/Others/StorageItemDetail.vue
index 5a8bc2a0..208d9dbc 100644
--- a/resources/js/components/Others/StorageItemDetail.vue
+++ b/resources/js/components/Others/StorageItemDetail.vue
@@ -168,7 +168,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .header-storage-item {
             .type {
diff --git a/resources/js/components/Others/TabWrapper.vue b/resources/js/components/Others/TabWrapper.vue
index d69733bd..e924e2b6 100644
--- a/resources/js/components/Others/TabWrapper.vue
+++ b/resources/js/components/Others/TabWrapper.vue
@@ -4,10 +4,10 @@
             <div class="tab" :class="{ active: tab.isActive }" @click="selectTab(tab)" v-for="(tab, i) in tabs" :key="i">
 
                 <!--Icon-->
-                <mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme" size="17"/>
-                <link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme" size="17"/>
-                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme" size="17"/>
-                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme" size="17"/>
+                <mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme dark-text-theme" size="17"/>
+                <link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme dark-text-theme" size="17"/>
+                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme dark-text-theme" size="17"/>
+                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme dark-text-theme" size="17"/>
 
                 <!--Title-->
                 <b class="tab-title">
@@ -102,7 +102,7 @@
     }
 
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .tab-wrapper {
             background: $dark_mode_foreground;
             border-color: transparent;
diff --git a/resources/js/components/Others/Tables/DatatableCellImage.vue b/resources/js/components/Others/Tables/DatatableCellImage.vue
index 71dac02f..5df36d9c 100644
--- a/resources/js/components/Others/Tables/DatatableCellImage.vue
+++ b/resources/js/components/Others/Tables/DatatableCellImage.vue
@@ -76,7 +76,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .cell-image-thumbnail {
 
diff --git a/resources/js/components/Others/Tables/DatatableWrapper.vue b/resources/js/components/Others/Tables/DatatableWrapper.vue
index c50d85cd..e2dd824e 100644
--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/Others/Tables/DatatableWrapper.vue
@@ -10,7 +10,7 @@
                     :class="{ 'sortable': column.sortable }"
                     v-if="! column.hidden"
                 >
-                    <span class="text-theme">{{ column.label }}</span>
+                    <span class="text-theme dark-text-theme">{{ column.label }}</span>
 
                     <chevron-up-icon v-if="column.sortable" :class="{ 'arrow-down': filter.sort === 'ASC' }" size="14" class="filter-arrow"></chevron-up-icon>
                 </th>
@@ -424,7 +424,7 @@ export default {
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .table {
 
diff --git a/resources/js/components/Others/TextLabel.vue b/resources/js/components/Others/TextLabel.vue
index 876fadec..801a4124 100644
--- a/resources/js/components/Others/TextLabel.vue
+++ b/resources/js/components/Others/TextLabel.vue
@@ -29,7 +29,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .text-label {
             opacity: 0.35;
         }
diff --git a/resources/js/components/Others/ThumbnailItem.vue b/resources/js/components/Others/ThumbnailItem.vue
index ac56a3a9..8d3894c6 100644
--- a/resources/js/components/Others/ThumbnailItem.vue
+++ b/resources/js/components/Others/ThumbnailItem.vue
@@ -165,7 +165,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .file-item {
             .icon-item .file-icon {
                 path {
@@ -205,8 +205,8 @@
         }
     }
 
-    @media (max-width: 690px) and (prefers-color-scheme: dark) {
-        .file-item {
+    @media (max-width: 690px) {
+		.dark-mode .file-item {
             .icon-item .file-icon {
                 path {
                     fill: $dark_mode_foreground;
diff --git a/resources/js/components/Others/TreeMenu.vue b/resources/js/components/Others/TreeMenu.vue
index db4911b5..ad0ca779 100644
--- a/resources/js/components/Others/TreeMenu.vue
+++ b/resources/js/components/Others/TreeMenu.vue
@@ -2,10 +2,10 @@
     <!--Folder Icon-->
     <div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById.id === nodes.id || !disableId} ">
 
-        <div class="folder-item text-theme" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
-            <chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
-            <hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon text-theme"></hard-drive-icon>
-            <folder-icon v-if="nodes.location !== 'base'" size="17" class="icon text-theme"></folder-icon>
+        <div class="folder-item text-theme dark-text-theme" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
+            <chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"/>
+            <hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon text-theme dark-text-theme"/>
+            <folder-icon v-if="nodes.location !== 'base'" size="17" class="icon text-theme dark-text-theme"/>
             <span class="label">{{ nodes.name }}</span>
         </div>
 
@@ -150,24 +150,28 @@
 
             .icon {
                 path, line, polyline, rect, circle {
-                    color: inherit;
+                    color: inherit !important;
                 }
             }
 
             .label {
-                color: inherit;
+                color: inherit !important;
             }
         }
     }
 
     // Dark mode
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .folder-item {
 
             .label {
                 color: $dark_mode_text_primary;
             }
+
+            .is-selected .label {
+                color: inherit !important;
+            }
         }
     }
 
diff --git a/resources/js/components/Others/TreeMenuNavigator.vue b/resources/js/components/Others/TreeMenuNavigator.vue
index 0ee838bc..398e682d 100644
--- a/resources/js/components/Others/TreeMenuNavigator.vue
+++ b/resources/js/components/Others/TreeMenuNavigator.vue
@@ -1,246 +1,251 @@
 <template>
     <transition name="folder">
-        <div class="folder-item-wrapper" >
+        <div class="folder-item-wrapper">
 
-            <div class="folder-item text-theme" :class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0  }"
-                                    :style="indent" @click="getFolder"
-                                    @dragover.prevent="dragEnter"
-                                    @dragleave="dragLeave"
-                                    @drop="dragFinish()"
-
-             >
-                <chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow"
-                                    :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
-                <folder-icon size="17" class="icon text-theme"></folder-icon>
+            <div
+				class="folder-item text-theme dark-text-theme"
+				:class="{'is-selected': isSelected , 'is-dragenter': area, 'is-inactive': disabledFolder || disabled && draggedItem.length > 0  }"
+				:style="indent" @click="getFolder"
+				@dragover.prevent="dragEnter"
+				@dragleave="dragLeave"
+				@drop="dragFinish()"
+			>
+                <chevron-right-icon
+					@click.stop="showTree"
+					size="17"
+					class="icon-arrow"
+					:class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"
+				/>
+                <folder-icon size="17" class="icon text-theme dark-text-theme" />
                 <span class="label">{{ nodes.name }}</span>
             </div>
 
-            <TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id"/>
+            <TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
         </div>
     </transition>
 </template>
 
 <script>
     import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
-    import {FolderIcon, ChevronRightIcon} from 'vue-feather-icons'
-    import { mapGetters } from 'vuex'
-    import {events} from "@/bus"
+	import {FolderIcon, ChevronRightIcon} from 'vue-feather-icons'
+	import {mapGetters} from 'vuex'
+	import {events} from "@/bus"
 
-    export default {
-        name: 'TreeMenuNavigator',
-        props: [
-            'nodes', 'depth' , 'disabled',
-        ],
-        components: {
-            TreeMenuNavigator,
-            ChevronRightIcon,
-            FolderIcon,
-        },
-        computed: {
-            ...mapGetters(['clipboard']),
+	export default {
+		name: 'TreeMenuNavigator',
+		props: [
+			'nodes', 'depth', 'disabled',
+		],
+		components: {
+			TreeMenuNavigator,
+			ChevronRightIcon,
+			FolderIcon,
+		},
+		computed: {
+			...mapGetters(['clipboard']),
 
-            disabledFolder() {
-                let disableFolder = false
-                if(this.draggedItem.length > 0) {
+			disabledFolder() {
+				let disableFolder = false
+				if (this.draggedItem.length > 0) {
 
-                    this.draggedItem.forEach(item => {
-                        //Disable the parent of the folder
-                        if(item.type === "folder" && this.nodes.id === item.parent_id){
-                            disableFolder = true
-                        }
-                        //Disable the self folder with all children
-                        if (this.nodes.id === item.id && item.type === 'folder') {
-                            disableFolder = true
-                            this.disableChildren = true
-                        }
-                        if(this.disabled) {
-                            this.disableChildren = true
-                        }
-                    })
-                }else {
-                    disableFolder = false
-                    this.disableChildren = false
-               }
-            return disableFolder
-            },
-            indent() {
+					this.draggedItem.forEach(item => {
+						//Disable the parent of the folder
+						if (item.type === "folder" && this.nodes.id === item.parent_id) {
+							disableFolder = true
+						}
+						//Disable the self folder with all children
+						if (this.nodes.id === item.id && item.type === 'folder') {
+							disableFolder = true
+							this.disableChildren = true
+						}
+						if (this.disabled) {
+							this.disableChildren = true
+						}
+					})
+				} else {
+					disableFolder = false
+					this.disableChildren = false
+				}
+				return disableFolder
+			},
+			indent() {
 
-                let offset = window.innerWidth <= 1024 ? 17 : 22;
+				let offset = window.innerWidth <= 1024 ? 17 : 22;
 
-                let value = this.depth == 0 ? offset : offset + (this.depth * 20);
+				let value = this.depth == 0 ? offset : offset + (this.depth * 20);
 
-                return {paddingLeft: value + 'px'}
-            },
-        },
-        data() {
-            return {
-                isVisible: false,
-                isSelected: false,
-                area:false,
-                draggedItem:[],
-                disableChildren:false,
-            }
-        },
-        methods: {
-            dragFinish() {
-                // Move no selected item
-                if(!this.clipboard.includes(this.draggedItem[0])) {
-                    this.$store.dispatch('moveItem', {to_item: this.nodes ,noSelectedItem:this.draggedItem[0]})
-                }
+				return {paddingLeft: value + 'px'}
+			},
+		},
+		data() {
+			return {
+				isVisible: false,
+				isSelected: false,
+				area: false,
+				draggedItem: [],
+				disableChildren: false,
+			}
+		},
+		methods: {
+			dragFinish() {
+				// Move no selected item
+				if (!this.clipboard.includes(this.draggedItem[0])) {
+					this.$store.dispatch('moveItem', {to_item: this.nodes, noSelectedItem: this.draggedItem[0]})
+				}
 
-                // Move all selected items
-                if(this.clipboard.includes(this.draggedItem[0])) {
-                    this.$store.dispatch('moveItem', {to_item: this.nodes ,noSelectedItem:null})
-                }
-                
-                this.draggedItem = []
-                this.area = false
+				// Move all selected items
+				if (this.clipboard.includes(this.draggedItem[0])) {
+					this.$store.dispatch('moveItem', {to_item: this.nodes, noSelectedItem: null})
+				}
 
-                events.$emit('drop')
-            },
-             dragEnter() {
-                this.area = true
-            },
-            dragLeave() {
-                this.area = false
-            },
-            getFolder() {
-                events.$emit('show-folder', this.nodes)
+				this.draggedItem = []
+				this.area = false
 
-                // Go to folder
-                if (this.$isThisLocation('public')) {
-                    this.$store.dispatch('browseShared', [{ folder: this.nodes, back: false, init: false }])
-                } else {
-                    this.$store.dispatch('getFolder', [{ folder: this.nodes, back: false, init: false }])
-                }
-            },
-            showTree() {
-                this.isVisible = !this.isVisible
-            }
-        },
-        created() {
+				events.$emit('drop')
+			},
+			dragEnter() {
+				this.area = true
+			},
+			dragLeave() {
+				this.area = false
+			},
+			getFolder() {
+				events.$emit('show-folder', this.nodes)
 
-            events.$on('drop' , () => {
-                this.draggedItem = []
-            })
+				// Go to folder
+				if (this.$isThisLocation('public')) {
+					this.$store.dispatch('browseShared', [{folder: this.nodes, back: false, init: false}])
+				} else {
+					this.$store.dispatch('getFolder', [{folder: this.nodes, back: false, init: false}])
+				}
+			},
+			showTree() {
+				this.isVisible = !this.isVisible
+			}
+		},
+		created() {
 
-            //Get dragged item
-            events.$on('dragstart' , (data) => {
-               //If is dragged item not selected
-                if(!this.clipboard.includes(data)) {
-                    this.draggedItem = [data]
-                }
-                //If are the dragged items selected
-                if(this.clipboard.includes(data)) {
-                    this.draggedItem = this.clipboard
-                }
-            })
+			events.$on('drop', () => {
+				this.draggedItem = []
+			})
 
-            // Select clicked folder
-            events.$on('show-folder', node => {
-                this.isSelected = false
+			//Get dragged item
+			events.$on('dragstart', (data) => {
+				//If is dragged item not selected
+				if (!this.clipboard.includes(data)) {
+					this.draggedItem = [data]
+				}
+				//If are the dragged items selected
+				if (this.clipboard.includes(data)) {
+					this.draggedItem = this.clipboard
+				}
+			})
 
-                if (this.nodes.id == node.id)
-                    this.isSelected = true
-            })
-        }
-    }
+			// Select clicked folder
+			events.$on('show-folder', node => {
+				this.isSelected = false
+
+				if (this.nodes.id == node.id)
+					this.isSelected = true
+			})
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
     @import '@assets/vuefilemanager/_variables';
-    @import '@assets/vuefilemanager/_mixins';
+	@import '@assets/vuefilemanager/_mixins';
 
-    .is-inactive {
-        opacity: 0.5;
-        pointer-events: none;
-    }
+	.is-inactive {
+		opacity: 0.5;
+		pointer-events: none;
+	}
 
-    .is-dragenter {
-        border-radius: 8px;
-    }
+	.is-dragenter {
+		border-radius: 8px;
+	}
 
-    .folder-item {
-        display: block;
-        padding: 8px 0;
-        @include transition(150ms);
-        cursor: pointer;
-        position: relative;
-        white-space: nowrap;
-        width: 100%;
-        border: 2px dashed transparent ;
+	.folder-item {
+		display: block;
+		padding: 8px 0;
+		@include transition(150ms);
+		cursor: pointer;
+		position: relative;
+		white-space: nowrap;
+		width: 100%;
+		border: 2px dashed transparent;
 
-        .icon {
-            line-height: 0;
-            width: 15px;
-            margin-right: 9px;
-            vertical-align: middle;
-            margin-top: -1px;
+		.icon {
+			line-height: 0;
+			width: 15px;
+			margin-right: 9px;
+			vertical-align: middle;
+			margin-top: -1px;
 
-            path, line, polyline, rect, circle {
-                @include transition(150ms);
-            }
-        }
+			path, line, polyline, rect, circle {
+				@include transition(150ms);
+			}
+		}
 
-        .icon-arrow {
-            @include transition(300ms);
-            margin-right: 4px;
-            vertical-align: middle;
-            opacity: 0;
+		.icon-arrow {
+			@include transition(300ms);
+			margin-right: 4px;
+			vertical-align: middle;
+			opacity: 0;
 
-            &.is-visible {
-                opacity: 1;
-            }
+			&.is-visible {
+				opacity: 1;
+			}
 
-            &.is-opened {
-                @include transform(rotate(90deg));
-            }
-        }
+			&.is-opened {
+				@include transform(rotate(90deg));
+			}
+		}
 
-        .label {
-            @include transition(150ms);
-            @include font-size(13);
-            font-weight: 700;
-            vertical-align: middle;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            color: $text;
-            max-width: 130px;
-        }
+		.label {
+			@include transition(150ms);
+			@include font-size(13);
+			font-weight: 700;
+			vertical-align: middle;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: inline-block;
+			color: $text;
+			max-width: 130px;
+		}
 
-        &:hover,
-        &.is-selected {
+		&:hover,
+		&.is-selected {
 
-            .icon {
-                path, line, polyline, rect, circle {
-                    color: inherit;
-                }
-            }
+			.icon {
+				path, line, polyline, rect, circle {
+					color: inherit !important;;
+				}
+			}
 
-            .label {
-                color: inherit;
-            }
-        }
-    }
+			.label {
+				color: inherit !important;
+			}
+		}
+	}
 
-    @media only screen and (max-width: 1024px) {
+	@media only screen and (max-width: 1024px) {
 
-        .folder-item {
-            padding: 8px 0;
-        }
-    }
+		.folder-item {
+			padding: 8px 0;
+		}
+	}
 
-    // Dark mode
-    @media (prefers-color-scheme: dark) {
+	// Dark mode
+	.dark-mode {
 
-        .folder-item {
+		.folder-item {
 
-            .label {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
+			.label {
+				color: $dark_mode_text_primary;
+			}
+		}
+	}
 
 </style>
diff --git a/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue b/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
index d35d8c63..f2776a87 100644
--- a/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
+++ b/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
@@ -192,7 +192,7 @@ export default {
 		}
 	}
 
-	@media (prefers-color-scheme: dark) {
+	.dark-mode {
 		.codes-list {
 
 			li {
diff --git a/resources/js/components/Others/UpgradeSidebarBanner.vue b/resources/js/components/Others/UpgradeSidebarBanner.vue
index 044cfd16..a631a4cf 100644
--- a/resources/js/components/Others/UpgradeSidebarBanner.vue
+++ b/resources/js/components/Others/UpgradeSidebarBanner.vue
@@ -94,7 +94,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 </style>
diff --git a/resources/js/components/Others/UserAvatar.vue b/resources/js/components/Others/UserAvatar.vue
index 44dff95a..0c4c61eb 100644
--- a/resources/js/components/Others/UserAvatar.vue
+++ b/resources/js/components/Others/UserAvatar.vue
@@ -67,7 +67,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .user-avatar {
 
             .notification {
diff --git a/resources/js/components/Others/Vignette.vue b/resources/js/components/Others/Vignette.vue
index bbe2f3da..13566251 100644
--- a/resources/js/components/Others/Vignette.vue
+++ b/resources/js/components/Others/Vignette.vue
@@ -59,7 +59,7 @@
     }
 
     // Dark mode
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .vignette {
             background: $dark_mode_vignette;
diff --git a/resources/js/components/Sidebar/ContentSidebar.vue b/resources/js/components/Sidebar/ContentSidebar.vue
index 52c82a79..41fe0cf2 100644
--- a/resources/js/components/Sidebar/ContentSidebar.vue
+++ b/resources/js/components/Sidebar/ContentSidebar.vue
@@ -35,7 +35,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .content-sidebar {
             background: rgba($dark_mode_foreground, 0.2);
diff --git a/resources/js/components/Sidebar/SidebarNavigation.vue b/resources/js/components/Sidebar/SidebarNavigation.vue
index dcc51735..2ef617f3 100644
--- a/resources/js/components/Sidebar/SidebarNavigation.vue
+++ b/resources/js/components/Sidebar/SidebarNavigation.vue
@@ -10,28 +10,35 @@
 
             <router-link :to="{name: 'Files'}" :title="$t('locations.home')" class="icon-navigation-item home">
                 <div class="button-icon text-theme">
-                    <hard-drive-icon size="19" class="text-theme"></hard-drive-icon>
+                    <hard-drive-icon size="19" class="text-theme" />
                 </div>
             </router-link>
 
             <router-link :to="{name: 'Profile'}" :class="{'is-active': isUserProfileRoute}" :title="$t('locations.profile')" class="icon-navigation-item settings">
                 <div class="button-icon">
-                    <user-icon size="19"></user-icon>
+                    <user-icon size="19" />
                 </div>
             </router-link>
 
             <router-link v-if="user.data.attributes.role === 'admin'" :to="{name: 'Dashboard'}" :class="{'is-active': $isThisRoute($route, adminRoutes)}" :title="$t('locations.settings')" class="icon-navigation-item users">
                 <div class="button-icon">
-                    <settings-icon size="19"></settings-icon>
+                    <settings-icon size="19" />
                 </div>
             </router-link>
+
+			<a @click="toggleDarkMode" :title="$t('dark_mode_toggle')" class="icon-navigation-item dark-mode-switcher">
+				<div class="button-icon">
+					<sun-icon v-if="isDarkMode" size="19" />
+					<moon-icon v-if="! isDarkMode" size="19" />
+				</div>
+			</a>
         </div>
 
         <!--Logout-->
         <ul class="icon-navigation logout">
             <li @click="$store.dispatch('logOut')" :title="$t('locations.logout')" class="icon-navigation-item">
                 <div class="button-icon">
-                    <power-icon size="19"></power-icon>
+                    <power-icon size="19" />
                 </div>
             </li>
         </ul>
@@ -42,6 +49,8 @@
     import UserAvatar from '@/components/Others/UserAvatar'
     import {mapGetters} from 'vuex'
     import {
+    	MoonIcon,
+    	SunIcon,
         HardDriveIcon,
         SettingsIcon,
         Trash2Icon,
@@ -60,9 +69,14 @@
             PowerIcon,
             ShareIcon,
             UserIcon,
+			MoonIcon,
+			SunIcon,
         },
         computed: {
-            ...mapGetters(['user']),
+            ...mapGetters([
+				'user',
+				'isDarkMode'
+			]),
             isUserProfileRoute() {
                 return this.$isThisRoute(this.$route, ['Profile', 'Password', 'Storage', 'Invoice', 'Subscription', 'PaymentMethods'])
             }
@@ -98,9 +112,14 @@
                     'Plans',
                     'Users',
                     'User',
-                ]
+                ],
             }
         },
+		methods: {
+			toggleDarkMode() {
+				this.$store.dispatch('toggleDarkMode', !this.isDarkMode)
+			}
+		},
         mounted() {
             this.$store.dispatch('getAppData')
         }
@@ -111,6 +130,12 @@
     @import '@assets/vuefilemanager/_variables';
     @import '@assets/vuefilemanager/_mixins';
 
+	.dark-mode-switcher {
+		padding-top: 20px;
+		border-top: 1px solid darken($light_mode_border, 7%);
+		margin: 20px 15px 0;
+	}
+
     .menu-bar {
         background: $light_background;
         user-select: none;
@@ -224,13 +249,17 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
+
+		.dark-mode-switcher {
+			border-color:lighten($dark_mode_foreground, 2%);
+		}
 
         .icon-navigation {
 
             .button-icon {
                 &:hover {
-                    background: $dark_mode_background;
+                    background: #22262b;
                 }
             }
         }
diff --git a/resources/js/store/modules/app.js b/resources/js/store/modules/app.js
index 9837d19b..0846631b 100644
--- a/resources/js/store/modules/app.js
+++ b/resources/js/store/modules/app.js
@@ -1,8 +1,8 @@
 import i18n from '@/i18n/index'
 import axios from "axios";
-import Vue from "vue";
 
 const defaultState = {
+    darkMode: localStorage.getItem('is_dark_mode') === 'true' || false,
     isVisibleSidebar: localStorage.getItem('file_info_visibility') === 'true' || false,
     FilePreviewType: localStorage.getItem('preview_type') || 'list',
     config: undefined,
@@ -969,6 +969,14 @@ const defaultState = {
     ]
 }
 const actions = {
+    toggleDarkMode: ({commit}, visibility) => {
+
+        // Store dark mode into localStorage
+        localStorage.setItem('is_dark_mode', visibility)
+
+        // Change preview
+        commit('TOGGLE_DARK_MODE', visibility)
+    },
     changePreviewType: ({commit, state}, preview) => {
 
         // Get preview type
@@ -1038,6 +1046,9 @@ const mutations = {
     CHANGE_PREVIEW(state, type) {
         state.FilePreviewType = type
     },
+    TOGGLE_DARK_MODE(state, visibility) {
+        state.darkMode = visibility
+    },
     STORE_REQUESTED_PLAN(state, plan) {
         state.requestedPlan = plan
     },
@@ -1057,6 +1068,7 @@ const getters = {
     emojis: state => state.emojis,
     index: state => state.index,
     roles: state => state.roles,
+    isDarkMode: state => state.darkMode,
     sorting: (state) => {
         return {sorting: state.sorting, URI: '?sort=' + state.sorting.field + '&direction=' + state.sorting.sort}
     },
diff --git a/resources/js/views/Admin/AppSettings/AppSettings.vue b/resources/js/views/Admin/AppSettings/AppSettings.vue
index ae7f3243..36eaf96b 100644
--- a/resources/js/views/Admin/AppSettings/AppSettings.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettings.vue
@@ -13,7 +13,7 @@
                         <div class="icon text-theme">
                             <settings-icon size="17" />
                         </div>
-                        <div class="label text-theme">
+                        <div class="label text-theme ">
                             {{ $t('admin_settings.tabs.others') }}
                         </div>
                     </router-link>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
index 9ecf27fa..86982786 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
@@ -156,7 +156,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
index 2a285241..31670fe2 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
@@ -170,7 +170,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
index a53a2197..b86e0907 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
@@ -172,7 +172,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 
diff --git a/resources/js/views/Admin/Dashboard.vue b/resources/js/views/Admin/Dashboard.vue
index bde9add5..4efeefee 100644
--- a/resources/js/views/Admin/Dashboard.vue
+++ b/resources/js/views/Admin/Dashboard.vue
@@ -24,9 +24,9 @@
                     </a>
                     <a href="https://bit.ly/VueFileManager-survey" target="_blank" class="became-backer bg-theme-100">
                         <div class="icon">
-                            <credit-card-icon size="15" class="text-theme"></credit-card-icon>
+                            <credit-card-icon size="15" class="text-theme dark-text-theme"/>
                         </div>
-                        <span class="content text-theme">
+                        <span class="content text-theme dark-text-theme">
                             {{ $t('admin_page_dashboard.backer_button') }}
                         </span>
                     </a>
@@ -271,7 +271,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .metadata {
 
diff --git a/resources/js/views/Admin/Invoices.vue b/resources/js/views/Admin/Invoices.vue
index 47e0b301..dfba2b2f 100644
--- a/resources/js/views/Admin/Invoices.vue
+++ b/resources/js/views/Admin/Invoices.vue
@@ -229,7 +229,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .table-tools {
             background: $dark_mode_background;
diff --git a/resources/js/views/Admin/Languages/Language.vue b/resources/js/views/Admin/Languages/Language.vue
index 26b0fd7a..785b9e18 100644
--- a/resources/js/views/Admin/Languages/Language.vue
+++ b/resources/js/views/Admin/Languages/Language.vue
@@ -449,7 +449,7 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
     .search-bar-wrapper {
         background: $dark_mode_background;
diff --git a/resources/js/views/Admin/Pages.vue b/resources/js/views/Admin/Pages.vue
index cd3d0a09..1adbb2aa 100644
--- a/resources/js/views/Admin/Pages.vue
+++ b/resources/js/views/Admin/Pages.vue
@@ -139,7 +139,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .table-tools {
             background: $dark_mode_background;
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index b31f83ee..b25ef5cd 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -220,7 +220,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .table-tools {
             background: $dark_mode_background;
diff --git a/resources/js/views/Admin/Plans/Plan.vue b/resources/js/views/Admin/Plans/Plan.vue
index a921cdd8..872d0e70 100644
--- a/resources/js/views/Admin/Plans/Plan.vue
+++ b/resources/js/views/Admin/Plans/Plan.vue
@@ -123,7 +123,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .user-thumbnail {
 
             .info {
diff --git a/resources/js/views/Admin/Users.vue b/resources/js/views/Admin/Users.vue
index 81c4e483..ce49f075 100644
--- a/resources/js/views/Admin/Users.vue
+++ b/resources/js/views/Admin/Users.vue
@@ -207,7 +207,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .table-tools {
             background: $dark_mode_background;
diff --git a/resources/js/views/Admin/Users/User.vue b/resources/js/views/Admin/Users/User.vue
index 33b0c64d..52c76435 100644
--- a/resources/js/views/Admin/Users/User.vue
+++ b/resources/js/views/Admin/Users/User.vue
@@ -193,7 +193,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .user-thumbnail {
 
             .info {
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
index ce1cfbf4..7514f1ec 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
@@ -233,7 +233,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 
diff --git a/resources/js/views/Frontpage/ContactUs.vue b/resources/js/views/Frontpage/ContactUs.vue
index 1786c65a..4487eac2 100644
--- a/resources/js/views/Frontpage/ContactUs.vue
+++ b/resources/js/views/Frontpage/ContactUs.vue
@@ -151,7 +151,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 
diff --git a/resources/js/views/Frontpage/DynamicPage.vue b/resources/js/views/Frontpage/DynamicPage.vue
index 84d83007..b7dbb152 100644
--- a/resources/js/views/Frontpage/DynamicPage.vue
+++ b/resources/js/views/Frontpage/DynamicPage.vue
@@ -86,7 +86,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index bcc5952c..5ad44171 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -253,7 +253,7 @@
         margin-top: -15px;
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .user-thumbnail {
 
             .info {
diff --git a/resources/js/views/SetupWizard/PurchaseCode.vue b/resources/js/views/SetupWizard/PurchaseCode.vue
index c31ace86..52e0ed3b 100644
--- a/resources/js/views/SetupWizard/PurchaseCode.vue
+++ b/resources/js/views/SetupWizard/PurchaseCode.vue
@@ -125,7 +125,7 @@
         min-width: 380px;
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .additional-link {
 
             .black-link {
diff --git a/resources/js/views/Upgrade/UpgradeBilling.vue b/resources/js/views/Upgrade/UpgradeBilling.vue
index 7599150a..a34fd9eb 100644
--- a/resources/js/views/Upgrade/UpgradeBilling.vue
+++ b/resources/js/views/Upgrade/UpgradeBilling.vue
@@ -729,7 +729,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
         .plan-title {
 
diff --git a/resources/js/views/Upgrade/UpgradePlan.vue b/resources/js/views/Upgrade/UpgradePlan.vue
index d3f4c4f8..5382898f 100644
--- a/resources/js/views/Upgrade/UpgradePlan.vue
+++ b/resources/js/views/Upgrade/UpgradePlan.vue
@@ -94,7 +94,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
         .plan-title {
 
             h1 {
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index 116fed77..fb0b5382 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -329,7 +329,7 @@
 		}
 	}
 
-	@media (prefers-color-scheme: dark) {
+	.dark-mode {
 		.tokens-wrapper {
 			margin-top: 0 !important;
 
diff --git a/resources/js/views/User/PaymentMethods.vue b/resources/js/views/User/PaymentMethods.vue
index 777959bb..a45dff9c 100644
--- a/resources/js/views/User/PaymentMethods.vue
+++ b/resources/js/views/User/PaymentMethods.vue
@@ -269,7 +269,7 @@
 
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
     }
 
diff --git a/resources/js/views/User/Storage.vue b/resources/js/views/User/Storage.vue
index 918efce1..f322c9f7 100644
--- a/resources/js/views/User/Storage.vue
+++ b/resources/js/views/User/Storage.vue
@@ -85,7 +85,7 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
+    .dark-mode {
 
 
     }
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 633c615b..748c045c 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -353,7 +353,7 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
   .empty-note {
     color: $dark_mode_text_secondary;
@@ -373,7 +373,7 @@
         .icon {
 
           path, line, polyline, rect, circle, ellipse {
-            color: $dark_mode_text_primary;
+            color: inherit;
           }
         }
       }
@@ -385,7 +385,7 @@
       .icon {
 
         path, line, polyline, rect, circle, ellipse {
-          color: $dark_mode_text_primary;
+          color: inherit;
         }
       }
 
@@ -443,7 +443,7 @@
   }
 }
 
-@media (prefers-color-scheme: dark) { 
+.dark-mode {
   .windows {
     ::-webkit-scrollbar-thumb {
       border: 6px solid transparent;
diff --git a/resources/sass/vuefilemanager/_auth-form.scss b/resources/sass/vuefilemanager/_auth-form.scss
index f733a018..27ecede3 100644
--- a/resources/sass/vuefilemanager/_auth-form.scss
+++ b/resources/sass/vuefilemanager/_auth-form.scss
@@ -180,7 +180,7 @@ input[type="email"] {
   }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
   .form {
 
diff --git a/resources/sass/vuefilemanager/_auth.scss b/resources/sass/vuefilemanager/_auth.scss
index 4ff02f1b..2579d71a 100644
--- a/resources/sass/vuefilemanager/_auth.scss
+++ b/resources/sass/vuefilemanager/_auth.scss
@@ -106,7 +106,7 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
   .auth-form {
 
     h1, h2, .additional-link {
diff --git a/resources/sass/vuefilemanager/_forms.scss b/resources/sass/vuefilemanager/_forms.scss
index d33b46ab..6efc353c 100644
--- a/resources/sass/vuefilemanager/_forms.scss
+++ b/resources/sass/vuefilemanager/_forms.scss
@@ -250,7 +250,7 @@ input[type="color"] {
   }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
   .form {
 
diff --git a/resources/sass/vuefilemanager/_inapp-forms.scss b/resources/sass/vuefilemanager/_inapp-forms.scss
index 042a49fb..8ce6a0bc 100644
--- a/resources/sass/vuefilemanager/_inapp-forms.scss
+++ b/resources/sass/vuefilemanager/_inapp-forms.scss
@@ -59,7 +59,7 @@
   margin-bottom: 8px;
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
 
   .inline-wrapper {
 
diff --git a/resources/sass/vuefilemanager/_setup_wizard.scss b/resources/sass/vuefilemanager/_setup_wizard.scss
index 3790a54c..b5fdd62b 100644
--- a/resources/sass/vuefilemanager/_setup_wizard.scss
+++ b/resources/sass/vuefilemanager/_setup_wizard.scss
@@ -86,7 +86,7 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
+.dark-mode {
   .duplicator {
 
     .duplicator-item {
diff --git a/resources/views/vuefilemanager/others/color-template.blade.php b/resources/views/vuefilemanager/others/color-template.blade.php
index 69915ce4..19f6a518 100644
--- a/resources/views/vuefilemanager/others/color-template.blade.php
+++ b/resources/views/vuefilemanager/others/color-template.blade.php
@@ -36,7 +36,7 @@
 
         .focus-within-border-theme:focus-within {border-color: {{ $color }} !important;}
 
-        .focus-border-theme:focus {border-color: {{ $color }}}
+        .focus-border-theme:focus {border-color: {{ $color }} !important}
         .focus-border-theme:focus[type='email'] {border-color: {{ $color }}}
         .focus-border-theme:focus[type='text'] {border-color: {{ $color }}}
         .focus-border-theme:focus[type='password'] {border-color: {{ $color }}}
@@ -96,7 +96,7 @@
         .StripeElement--focus {border-color: {{ $color }} !important;}
 
         {{-- Dark mode --}}
-        @media (prefers-color-scheme: dark) {
-            .dark-text-theme {color: {{ $color }}}
+        .dark-mode .text-theme {
+            color: {{ $color }}
         }
     </style>
\ No newline at end of file