dark mode for teams

2026-04-20 17:02: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/Admin/WidgetLatestRegistrations.vue
+++ b/resources/js/components/Admin/WidgetLatestRegistrations.vue
@@ -113,7 +113,7 @@
    @import '/resources/sass/vuefilemanager/_variables';
    @import '/resources/sass/vuefilemanager/_mixins';

-    .dark-mode {
+    .dark {

    }
 </style>
--- a/resources/js/components/Admin/WidgetTotals.vue
+++ b/resources/js/components/Admin/WidgetTotals.vue
@@ -65,7 +65,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .widget-value {

            span {
--- a/resources/js/components/Admin/WidgetWrapper.vue
+++ b/resources/js/components/Admin/WidgetWrapper.vue
@@ -58,7 +58,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .widget-content {
            background: $dark_mode_foreground;
        }
--- a/resources/js/components/Auth/AuthButton.vue
+++ b/resources/js/components/Auth/AuthButton.vue
@@ -88,7 +88,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .button {

            &.outline {
--- a/resources/js/components/Desktop/PopoverItem.vue
+++ b/resources/js/components/Desktop/PopoverItem.vue
@@ -55,7 +55,7 @@
 		}
 	}

-	.dark-mode {
+	.dark {
 		.popover-item {
 			background: $dark_mode_foreground;
 		}
--- a/resources/js/components/FilePreview/FilePreview.vue
+++ b/resources/js/components/FilePreview/FilePreview.vue
@@ -64,7 +64,7 @@
        background-color: white;
    }

-    .dark-mode {
+    .dark {
        .file-preview {
            background-color: $dark_mode_background;
        }
--- a/resources/js/components/FilePreview/FilePreviewMedia.vue
+++ b/resources/js/components/FilePreview/FilePreviewMedia.vue
@@ -241,7 +241,7 @@ export default {
 }


-.dark-mode {
+.dark {

    .navigation-arrows {
        .prev, .next {
--- a/resources/js/components/FilePreview/FilePreviewToolbar.vue
+++ b/resources/js/components/FilePreview/FilePreviewToolbar.vue
@@ -341,7 +341,7 @@
    }
 }

-.dark-mode {
+.dark {
    .navigation-panel {
        background-color: $dark_mode_background;
        color: $dark_mode_text_primary;
--- a/resources/js/components/FilesView/Alert.vue
+++ b/resources/js/components/FilesView/Alert.vue
@@ -167,7 +167,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .popup-wrapper {
            background: $dark_mode_foreground;
        }
--- a/resources/js/components/FilesView/ButtonBase.vue
+++ b/resources/js/components/FilesView/ButtonBase.vue
@@ -104,7 +104,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .button-base {

--- 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%);
 }

-.dark-mode {
+.dark {
    
    .is-deactive {
        background-color: lighten($dark_mode_foreground, 10%);
--- a/resources/js/components/FilesView/ContextMenu.vue
+++ b/resources/js/components/FilesView/ContextMenu.vue
@@ -157,7 +157,7 @@ export default {
 	padding: 0;
 }

-.dark-mode {
+.dark {
 	.contextmenu {
 		background: $dark_mode_foreground;
 	}
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -361,7 +361,7 @@
 	}
 }

-.dark-mode {
+.dark {
 	.team-preview:hover {
 		background: $dark_mode_foreground;

--- a/resources/js/components/FilesView/DragUI.vue
+++ b/resources/js/components/FilesView/DragUI.vue
@@ -95,7 +95,7 @@ export default {
    background: white;
 }

-.dark-mode {
+.dark {
    #drag-ui {
        background: $dark_mode_foreground;
    }
--- a/resources/js/components/FilesView/EmptyFilePage.vue
+++ b/resources/js/components/FilesView/EmptyFilePage.vue
@@ -72,7 +72,7 @@
 		}
 	}

-	.dark-mode {
+	.dark {
 		.text-content {

 			.title {
--- a/resources/js/components/FilesView/EmptyMessage.vue
+++ b/resources/js/components/FilesView/EmptyMessage.vue
@@ -50,7 +50,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .empty-message {

            .message {
--- a/resources/js/components/FilesView/FileActionsMobile.vue
+++ b/resources/js/components/FilesView/FileActionsMobile.vue
@@ -105,7 +105,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        #mobile-actions-wrapper {
            background: $dark_mode_background;
        }
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -554,7 +554,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {

    .file-wrapper {

--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -21,7 +21,7 @@
 					:size="28"
 					:is-border="true"
 					:member="item.data.relationships.user"
-					class="absolute -right-2 -bottom-2"
+					class="absolute -right-2 -bottom-2 z-10"
 				/>

                <!--If is file or image, then link item-->
@@ -524,7 +524,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {

    .file-wrapper {
        .icon-item {
--- a/resources/js/components/FilesView/FolderIcon.vue
+++ b/resources/js/components/FilesView/FolderIcon.vue
@@ -120,7 +120,7 @@
 	}
 }

-.dark-mode {
+.dark {

    .folder-icon {
        &.is-deleted {
--- a/resources/js/components/FilesView/ImageMetaData.vue
+++ b/resources/js/components/FilesView/ImageMetaData.vue
@@ -129,7 +129,7 @@ export default {
 	}
 }

-.dark-mode {
+.dark {

 	.meta-data-list {
 		li {
--- a/resources/js/components/FilesView/MemberAvatar.vue
+++ b/resources/js/components/FilesView/MemberAvatar.vue
@@ -5,7 +5,7 @@
 			v-if="member.data.attributes.avatar"
 			:src="member.data.attributes.avatar"
 			:alt="member.data.attributes.name"
-			:class="[borderRadius, {'border-3 border-white': isBorder}]"
+			:class="[borderRadius, {'border-3 border-white dark:border-dark-background': isBorder}]"
 			class=""
 		>
 		<div
--- a/resources/js/components/FilesView/MobileActionButton.vue
+++ b/resources/js/components/FilesView/MobileActionButton.vue
@@ -98,7 +98,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .mobile-action-button {
            background: $dark_mode_foreground;

--- a/resources/js/components/FilesView/MobileActionButtonUpload.vue
+++ b/resources/js/components/FilesView/MobileActionButtonUpload.vue
@@ -64,7 +64,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .mobile-action-button {
            background: $dark_mode_foreground;

--- a/resources/js/components/FilesView/MobileMultiSelectToolbar.vue
+++ b/resources/js/components/FilesView/MobileMultiSelectToolbar.vue
@@ -88,7 +88,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {

    .multiselect-actions {
        background: $dark_mode_foreground;
--- a/resources/js/components/FilesView/MobileToolbar.vue
+++ b/resources/js/components/FilesView/MobileToolbar.vue
@@ -141,7 +141,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .mobile-toolbar {
            background: $dark_mode_background;
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/FilesView/Option.vue
@@ -187,7 +187,7 @@ import {
    }
 }

-.dark-mode {
+.dark {

    .menu-option {
        color: $dark_mode_text_primary;
--- a/resources/js/components/FilesView/OptionGroup.vue
+++ b/resources/js/components/FilesView/OptionGroup.vue
@@ -28,7 +28,7 @@
    }
 }

-.dark-mode {
+.dark {
    .menu-option-group {
        border-color: $dark_mode_border_color;
    }
--- a/resources/js/components/FilesView/OptionUpload.vue
+++ b/resources/js/components/FilesView/OptionUpload.vue
@@ -74,7 +74,7 @@ import {
    }
 }

-.dark-mode {
+.dark {

    .menu-option {
        color: $dark_mode_text_primary;
--- a/resources/js/components/FilesView/ProcessingPopup.vue
+++ b/resources/js/components/FilesView/ProcessingPopup.vue
@@ -101,7 +101,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {
    .popup-wrapper {
        background: $dark_mode_foreground;
    }
--- a/resources/js/components/FilesView/ProgressBar.vue
+++ b/resources/js/components/FilesView/ProgressBar.vue
@@ -30,7 +30,7 @@ export default {
 		}
 	}

-	.dark-mode {
+	.dark {

 		.progress-bar {
 			background: $dark_mode_foreground;
@@ -39,7 +39,7 @@ export default {

 	@media only screen and (min-width: 680px) {

-		.dark-mode .progress-bar {
+		.dark .progress-bar {
 			background: $dark_mode_foreground;
 		}
 	}
--- a/resources/js/components/FilesView/SearchBar.vue
+++ b/resources/js/components/FilesView/SearchBar.vue
@@ -82,7 +82,7 @@
 		}
    }

-    .dark-mode {
+    .dark {
        .search-bar {
 			background: $dark_mode_foreground;

--- a/resources/js/components/FilesView/TitlePreview.vue
+++ b/resources/js/components/FilesView/TitlePreview.vue
@@ -77,7 +77,7 @@ export default {
    }
 }

-.dark-mode {
+.dark {
    .wrapper {
        .text {
            .title {
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/FilesView/ToolbarButton.vue
@@ -115,7 +115,7 @@
    }
 }

-.dark-mode {
+.dark {
    .button {
        background: transparent;

--- a/resources/js/components/FilesView/UploadProgress.vue
+++ b/resources/js/components/FilesView/UploadProgress.vue
@@ -129,7 +129,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .progress-bar {
            background: $dark_mode_foreground;
        }
--- a/resources/js/components/Index/Components/PricingTables.vue
+++ b/resources/js/components/Index/Components/PricingTables.vue
@@ -149,7 +149,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .plans-wrapper {
            background: $dark_mode_foreground;
--- a/resources/js/components/Index/IndexHeroScreenshot.vue
+++ b/resources/js/components/Index/IndexHeroScreenshot.vue
@@ -206,7 +206,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .hero-screenshot {

--- a/resources/js/components/Index/IndexMainFeatures.vue
+++ b/resources/js/components/Index/IndexMainFeatures.vue
@@ -176,7 +176,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .features {

--- a/resources/js/components/Index/IndexPageFooter.vue
+++ b/resources/js/components/Index/IndexPageFooter.vue
@@ -104,7 +104,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .copyright {
            color: $dark_mode_text_secondary;
--- a/resources/js/components/Mobile/MenuMobile.vue
+++ b/resources/js/components/Mobile/MenuMobile.vue
@@ -84,7 +84,7 @@
        position: absolute;
    }

-    .dark-mode {
+    .dark {

        .options {
            background: $dark_mode_foreground;
--- a/resources/js/components/Mobile/MobileHeader.vue
+++ b/resources/js/components/Mobile/MobileHeader.vue
@@ -98,7 +98,7 @@
        }
    }

-    .dark-mode {
+    .dark {
        .mobile-header {
            background: $dark_mode_background;

--- 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;
--- a/resources/js/components/Sidebar/ContentSidebar.vue
+++ b/resources/js/components/Sidebar/ContentSidebar.vue
@@ -35,7 +35,7 @@
        }
    }

-    .dark-mode {
+    .dark {

        .content-sidebar {
            background: rgba($dark_mode_foreground, 0.2);
--- a/resources/js/components/Sidebar/SidebarNavigation.vue
+++ b/resources/js/components/Sidebar/SidebarNavigation.vue
@@ -94,7 +94,7 @@
    @import '/resources/sass/vuefilemanager/_variables';
    @import '/resources/sass/vuefilemanager/_mixins';

-	.dark-mode-switcher {
+	.dark-switcher {
 		padding-top: 20px;
 		border-top: 1px solid darken($light_mode_border, 7%);
 		margin: 20px 15px 0;
@@ -212,9 +212,9 @@
        }
    }

-    .dark-mode {
+    .dark {

-		.dark-mode-switcher {
+		.dark-switcher {
 			border-color:lighten($dark_mode_foreground, 2%);
 		}

--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -293,7 +293,7 @@ export default {
 	@include font-size(13);
 }

-.dark-mode {
+.dark {

 	#spotlight .spotlight-wrapper {
 		background: $dark_mode_foreground;
--- a/resources/js/components/Teams/Components/PermissionToggleButton.vue
+++ b/resources/js/components/Teams/Components/PermissionToggleButton.vue
@@ -71,7 +71,7 @@
 		}
 	}

-	.dark-mode {
+	.dark {

 		.permission-toggle .privilege {
 			color: $dark_mode_text_secondary;
--- a/resources/js/components/Teams/Components/TeamFolderPreview.vue
+++ b/resources/js/components/Teams/Components/TeamFolderPreview.vue
@@ -1,8 +1,12 @@
 <template>
-	<div class="team-folder-preview">
+	<div class="team-folder-preview text-left py-3 px-5">
 		<div class="info">
-			<b class="title">{{ teamFolder.data.attributes.name }}</b>
-			<span class="subtitle">Created at {{ teamFolder.data.attributes.created_at }}</span>
+			<b class="title text-sm">
+				{{ teamFolder.data.attributes.name }}
+			</b>
+			<span class="subtitle text-tiny block mb-2 dark:text-gray-500 text-gray-600">
+				Created at {{ teamFolder.data.attributes.created_at }}
+			</span>
 			<TeamMembersPreview :folder="teamFolder" :avatar-size="32" class="members" />
 		</div>
 	</div>
@@ -34,27 +38,10 @@
 	@import "resources/sass/vuefilemanager/_mixins";

 	.team-folder-preview {
-		text-align: left;
-		padding: 15px 20px;
 		border-bottom: 1px solid $light_mode_border;
-
-		.info {
-
-			.title {
-				@include font-size(14);
-			}
-
-			.subtitle {
-				@include font-size(11);
-				color: $text-muted;
-				display: block;
-				margin-bottom: 10px;
-				line-height: 1;
-			}
-		}
 	}

-	.dark-mode {
+	.dark {
 		.team-folder-preview {
 			border-color: $dark_mode_border_color;
 		}
--- a/resources/js/components/Teams/Components/TeamList.vue
+++ b/resources/js/components/Teams/Components/TeamList.vue
@@ -17,7 +17,7 @@
 					<b class="title">
 						{{ entry.name }}
 					</b>
-					<span class="subtitle">
+					<span class="subtitle dark:text-gray-500 text-gray-600">
 						{{ entry.email }}
 					</span>
 				</div>
@@ -124,7 +124,6 @@

 				.subtitle {
 					@include font-size(12);
-					color: $text-muted;
 					display: block;
 				}
 			}
@@ -135,7 +134,7 @@
 		}
 	}

-	.dark-mode {
+	.dark {

 		.member-item .info .email {
 			color: $dark_mode_text_secondary;
--- a/resources/js/components/Teams/Components/TeamMembersPreview.vue
+++ b/resources/js/components/Teams/Components/TeamMembersPreview.vue
@@ -80,7 +80,7 @@
 		}
 	}

-	.dark-mode {
+	.dark {

 		.team-folder {