- dark mode

resources/js/Oasis/Homepage/Components/OasisAboutUs.vue

@@ -282,4 +282,13 @@
             }
         }
     }
+
+    @media (prefers-color-scheme: dark) {
+        .info-list .info-list-item {
+
+            .description {
+                color: $dark-mode-text;
+            }
+        }
+    }
 </style>

resources/js/Oasis/Homepage/Components/OasisFeatures.vue

@@ -283,4 +283,10 @@
             }
         }
     }
+
+    @media (prefers-color-scheme: dark) {
+
+
+    }
+
 </style>

resources/js/Oasis/Homepage/Components/OasisFooter.vue

@@ -63,4 +63,14 @@
             }
         }
     }
+
+    @media (prefers-color-scheme: dark) {
+
+        .oasis-footer.container {
+
+            .links li a {
+                color: $dark-mode-text;
+            }
+        }
+    }
 </style>

resources/js/Oasis/Homepage/Components/OasisHeader.vue

@@ -296,4 +296,19 @@
             margin-bottom: 120px;
         }
     }
+
+    @media (prefers-color-scheme: dark) {
+
+        .oasis-header {
+            background: darken($theme-bg-dark, 10%);
+
+            .main-title {
+                color: white;
+            }
+        }
+
+        .cloud {
+            opacity: 0.03;
+        }
+    }
 </style>

resources/js/Oasis/Homepage/Components/OasisNavigation.vue

@@ -151,4 +151,19 @@
             display: none;
         }
     }
+
+
+    @media (prefers-color-scheme: dark) {
+        .navigation {
+
+            .links li a {
+                color: $dark-mode-text;
+            }
+
+            &.white {
+                background: rgba(darken($theme-bg-dark, 10%), 0.9);
+                backdrop-filter: blur(18px);
+            }
+        }
+    }
 </style>

resources/js/Oasis/Homepage/Components/OasisPricing.vue

@@ -460,4 +460,27 @@
             }
         }
     }
+
+    @media (prefers-color-scheme: dark) {
+
+        .oasis-pricing {
+            .main-title-sm {
+                color: white;
+            }
+        }
+
+        .pricing-box {
+
+            .box {
+                background: darken($theme-bg-dark, 5%);
+
+                .pricing-data,
+                .pricing-name,
+                .pricing-description,
+                .pricing-vat {
+                    color: white;
+                }
+            }
+        }
+    }
 </style>

resources/js/Oasis/Homepage/Homepage.vue

@@ -33,8 +33,15 @@
     }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
     @import '@assets/oasis/_components';
     @import '@assets/oasis/_homepage';
     @import '@assets/oasis/_responsive';
+
+    @media (prefers-color-scheme: dark) {
+
+        #page {
+            background: darken($theme-bg-dark, 10%);
+        }
+    }
 </style>

resources/sass/oasis/_homepage.scss

@@ -11,7 +11,6 @@
 }
 
 .oasis-footer {
-  background: white;
   display: flex;
   align-items: center;
   justify-content: space-between;

resources/sass/oasis/_variables.scss

@@ -1,3 +1,6 @@
+$dark-mode-text: #bec6cf;
+$dark-mode-background: #141414;
+
 $text-primary: #312E5C;
 $text-secondary: #545E71;
 

resources/sass/vuefilemanager/_variables.scss

@@ -26,7 +26,7 @@ $light_mode_vignette: rgba(9, 8, 12, 0.35);
 
 // Dark Mode
 $dark_mode_vignette: rgba(0, 0, 0, 0.3);
-$dark_mode_background: #131414;
+$dark_mode_background: #141414;
 $dark_mode_foreground: #1e2024;
 $dark_mode_text_primary: #bec6cf;
 $dark_mode_text_secondary: #7d858c;