dark mode for teams

2026-04-22 01:22:16 +00:00 · 2021-10-26 06:57:40 +02:00
parent d4990d8d5f
commit fda82d6dbf
117 changed files with 371 additions and 240 deletions
--- a/resources/js/components/Others/ActionButton.vue
+++ b/resources/js/components/Others/ActionButton.vue
@@ -45,7 +45,7 @@
        }
    }

-    .dark-mode {
+    .dark {

    }
 </style>
--- a/resources/js/components/Others/ColorLabel.vue
+++ b/resources/js/components/Others/ColorLabel.vue
@@ -48,7 +48,7 @@

    }

-    .dark-mode {
+    .dark {

    }
 </style>
--- a/resources/js/components/Others/ColorPicker.vue
+++ b/resources/js/components/Others/ColorPicker.vue
@@ -117,7 +117,7 @@ export default {
    position: relative;
 }

-.dark-mode {
+.dark {
    .color-pick-wrapper {
        .color-wrapper {
            .single-color {
--- a/resources/js/components/Others/CookieDisclaimer.vue
+++ b/resources/js/components/Others/CookieDisclaimer.vue
@@ -90,7 +90,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .cookie-wrapper {
            background: $dark_mode_foreground;

--- a/resources/js/components/Others/CreatePersonaTokenPopup.vue
+++ b/resources/js/components/Others/CreatePersonaTokenPopup.vue
@@ -126,7 +126,7 @@ export default {
 	@import "resources/sass/vuefilemanager/_inapp-forms.scss";
 	@import '/resources/sass/vuefilemanager/_forms';

-	.dark-mode {
+	.dark {

 		.info-box {
 			background: lighten($dark_mode_foreground, 3%);
--- a/resources/js/components/Others/EmojiPicker.vue
+++ b/resources/js/components/Others/EmojiPicker.vue
@@ -434,7 +434,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {

    .emoji-wrapper {
        background: lighten($dark_mode_foreground, 2%);
--- a/resources/js/components/Others/Forms/CopyInput.vue
+++ b/resources/js/components/Others/Forms/CopyInput.vue
@@ -140,7 +140,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {

    .copy-input {
        border-color: #333333;
--- a/resources/js/components/Others/Forms/CopyShareLink.vue
+++ b/resources/js/components/Others/Forms/CopyShareLink.vue
@@ -249,7 +249,7 @@ export default {
 	right: -9999px;
 }

-.dark-mode {
+.dark {

    .copy-input {
        border-color: #333333;
--- a/resources/js/components/Others/Forms/FormLabel.vue
+++ b/resources/js/components/Others/Forms/FormLabel.vue
@@ -53,7 +53,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .form-label {

            .label {
--- a/resources/js/components/Others/Forms/ImageInput.vue
+++ b/resources/js/components/Others/Forms/ImageInput.vue
@@ -187,7 +187,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .dropzone {
            border-color: rgba(white, 0.2);

--- a/resources/js/components/Others/Forms/InfoBox.vue
+++ b/resources/js/components/Others/Forms/InfoBox.vue
@@ -82,7 +82,7 @@
    }


-    .dark-mode {
+    .dark {

        .info-box {
            background: $dark_mode_foreground;
--- a/resources/js/components/Others/Forms/MultiEmailInput.vue
+++ b/resources/js/components/Others/Forms/MultiEmailInput.vue
@@ -173,7 +173,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {
    .input-wrapper {
 		background: lighten($dark_mode_foreground, 3%);

--- a/resources/js/components/Others/Forms/SearchInput.vue
+++ b/resources/js/components/Others/Forms/SearchInput.vue
@@ -104,7 +104,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {
    .search-bar {
        input {
            background: $dark_mode_foreground;
--- a/resources/js/components/Others/Forms/SelectBoxInput.vue
+++ b/resources/js/components/Others/Forms/SelectBoxInput.vue
@@ -80,7 +80,7 @@
    }


-    .dark-mode {
+    .dark {
        .select-box {

            .box-item {
--- a/resources/js/components/Others/Forms/SelectInput.vue
+++ b/resources/js/components/Others/Forms/SelectInput.vue
@@ -239,7 +239,7 @@
        transform: translateY(-50px);
    }

-    .dark-mode {
+    .dark {

        .select-search {
            background: $dark_mode_foreground;
--- a/resources/js/components/Others/Forms/SetupBox.vue
+++ b/resources/js/components/Others/Forms/SetupBox.vue
@@ -124,7 +124,7 @@
    }


-    .dark-mode {
+    .dark {

        .setup-box {

--- a/resources/js/components/Others/Forms/SwitchInput.vue
+++ b/resources/js/components/Others/Forms/SwitchInput.vue
@@ -90,7 +90,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .switch {
            background: $dark_mode_foreground;
        }
--- a/resources/js/components/Others/ListInfoItem.vue
+++ b/resources/js/components/Others/ListInfoItem.vue
@@ -46,7 +46,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .list-info-item {

            span {
--- a/resources/js/components/Others/Notifications/ToasterItem.vue
+++ b/resources/js/components/Others/Notifications/ToasterItem.vue
@@ -159,7 +159,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .toaster-item {

            &.success, &.danger {
--- a/resources/js/components/Others/PageHeader.vue
+++ b/resources/js/components/Others/PageHeader.vue
@@ -71,7 +71,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .page-header {
            background: $dark_mode_background;
--- a/resources/js/components/Others/PlanPricingTables.vue
+++ b/resources/js/components/Others/PlanPricingTables.vue
@@ -167,7 +167,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .plan {

            .plan-wrapper {
--- a/resources/js/components/Others/Popup/ConfirmPopup.vue
+++ b/resources/js/components/Others/Popup/ConfirmPopup.vue
@@ -123,7 +123,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .content {
            .title {
--- a/resources/js/components/Others/Popup/PopupHeader.vue
+++ b/resources/js/components/Others/Popup/PopupHeader.vue
@@ -101,7 +101,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .popup-header {
            .label {
                .close-icon {
--- a/resources/js/components/Others/Popup/PopupWrapper.vue
+++ b/resources/js/components/Others/Popup/PopupWrapper.vue
@@ -141,7 +141,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .popup-wrapper {
            background: $dark_mode_foreground;
            box-shadow: $dark_mode_popup_shadow;
@@ -150,7 +150,7 @@

 	@media only screen and (max-width: 690px) {

-		.dark-mode {
+		.dark {
 			.popup-wrapper {
 				background: $dark_mode_background;
 			}
--- a/resources/js/components/Others/RenameItemPopup.vue
+++ b/resources/js/components/Others/RenameItemPopup.vue
@@ -185,7 +185,7 @@ export default {
    margin-bottom: 20px;
 }

-.dark-mode {
+.dark {
    .close-icon-wrapper {
        &:hover {

--- a/resources/js/components/Others/SectionTitle.vue
+++ b/resources/js/components/Others/SectionTitle.vue
@@ -26,7 +26,7 @@

    }

-    .dark-mode {
+    .dark {
        .text-label {
            color: $theme;
        }
--- a/resources/js/components/Others/StorageItemDetail.vue
+++ b/resources/js/components/Others/StorageItemDetail.vue
@@ -168,7 +168,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .header-storage-item {
            .type {
--- a/resources/js/components/Others/TabWrapper.vue
+++ b/resources/js/components/Others/TabWrapper.vue
@@ -102,7 +102,7 @@
    }


-    .dark-mode {
+    .dark {
        .tab-wrapper {
            background: $dark_mode_foreground;
            border-color: transparent;
--- a/resources/js/components/Others/Tables/DatatableCellImage.vue
+++ b/resources/js/components/Others/Tables/DatatableCellImage.vue
@@ -76,7 +76,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .cell-image-thumbnail {

--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/Others/Tables/DatatableWrapper.vue
@@ -424,7 +424,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {

    .table {

--- a/resources/js/components/Others/TextLabel.vue
+++ b/resources/js/components/Others/TextLabel.vue
@@ -29,7 +29,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .text-label {
            opacity: 0.35;
        }
--- a/resources/js/components/Others/ThumbnailItem.vue
+++ b/resources/js/components/Others/ThumbnailItem.vue
@@ -165,7 +165,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .file-item {
            .icon-item .file-icon {
                path {
@@ -206,7 +206,7 @@
    }

    @media (max-width: 690px) {
-		.dark-mode .file-item {
+		.dark .file-item {
            .icon-item .file-icon {
                path {
                    fill: $dark_mode_foreground;
--- a/resources/js/components/Others/TreeMenu.vue
+++ b/resources/js/components/Others/TreeMenu.vue
@@ -171,7 +171,7 @@
    }

    // Dark mode
-    .dark-mode {
+    .dark {

        .folder-item {

--- a/resources/js/components/Others/TreeMenuNavigator.vue
+++ b/resources/js/components/Others/TreeMenuNavigator.vue
@@ -230,7 +230,7 @@
 	}

 	// Dark mode
-	.dark-mode {
+	.dark {

 		.folder-item {

--- a/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
+++ b/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
@@ -192,7 +192,7 @@ export default {
 		}
 	}

-	.dark-mode {
+	.dark {
 		.codes-list {

 			li {
--- a/resources/js/components/Others/UpgradeSidebarBanner.vue
+++ b/resources/js/components/Others/UpgradeSidebarBanner.vue
@@ -94,7 +94,7 @@

    }

-    .dark-mode {
+    .dark {

    }
 </style>
--- a/resources/js/components/Others/UserAvatar.vue
+++ b/resources/js/components/Others/UserAvatar.vue
@@ -67,7 +67,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .user-avatar {

            .notification {
--- a/resources/js/components/Others/Vignette.vue
+++ b/resources/js/components/Others/Vignette.vue
@@ -61,7 +61,7 @@
    }

    // Dark mode
-    .dark-mode {
+    .dark {

        .vignette {
            background: $dark_mode_vignette;