Introduce ThemeSwitcher to toggle light/dark theme

owncloud · Jan 19, 2022 · bf6b1a9 · bf6b1a9
1 parent 575c610
commit bf6b1a9
Show file tree

Hide file tree

Showing 33 changed files with 372 additions and 111 deletions.
diff --git a/changelog/unreleased/enhancement-darkmode-themeswitcher b/changelog/unreleased/enhancement-darkmode-themeswitcher
@@ -0,0 +1,5 @@
+Enhancement: Darkmode theme switcher
+
+We've added a theme switcher and now initialize the user interface theme based on the user's browser preferences.
+
+https://github.com/owncloud/web/pull/6240
diff --git a/docs/theming/_index.md b/docs/theming/_index.md
@@ -133,6 +133,7 @@ Again, you can use the [ownCloud design tokens](https://owncloud.design/#/Design
 ```json
 {
   "colorPalette": {
+    "background-accentuate": "",
     "background-default": "",
     "background-highlight": "",
     "background-muted": "",
@@ -155,6 +156,7 @@ Again, you can use the [ownCloud design tokens](https://owncloud.design/#/Design
     "swatch-primary-default": "",
     "swatch-primary-hover": "",
     "swatch-primary-muted": "",
+    "swatch-primary-gradient": "",
     "swatch-success-default": "",
     "swatch-success-hover": "",
     "swatch-success-muted": "",
@@ -257,6 +259,7 @@ An empty template for your custom theme is provided below, and you can use the i
         "xlarge": ""
       },
       "colorPalette": {
+        "background-accentuate": "",
         "background-default": "",
         "background-highlight": "",
         "background-muted": "",
@@ -279,6 +282,7 @@ An empty template for your custom theme is provided below, and you can use the i
         "swatch-primary-default": "",
         "swatch-primary-hover": "",
         "swatch-primary-muted": "",
+        "swatch-primary-gradient": "",
         "swatch-success-default": "",
         "swatch-success-hover": "",
         "swatch-success-muted": "",

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -37,10 +37,9 @@
               key="new-file-menu-btn-enabled"
               v-oc-tooltip="newButtonTooltip"
               :aria-label="newButtonAriaLabel"
-              variation="primary"
-              appearance="filled"
+              variation="inverse"
               :disabled="isNewBtnDisabled"
-              class="oc-mb-xs"
+              class="oc-mb-xs oc-background-primary-gradient"
             >
               <oc-icon name="add" />
               <translate>New</translate>
@@ -575,6 +574,7 @@ export default {
 .files-app-bar {
   background-color: var(--oc-color-background-default);
   box-sizing: border-box;
+  transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
   z-index: 2;
 
   &-actions {

diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -653,6 +653,11 @@ export default {
 }
 </script>
 <style lang="scss">
+// To be backported to ODS probably
+.oc-table-sticky .oc-table-header-cell {
+  transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
+}
+
 .resource-table {
   &-people {
     position: absolute;

diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
@@ -68,7 +68,7 @@
       </div>
     </div>
     <div class="oc-text-center">
-      <p v-text="configuration.theme.general.slogan" />
+      <p v-text="configuration.currentTheme.general.slogan" />
     </div>
   </div>
 </template>

diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
@@ -104,7 +104,7 @@ import { createLocationPublic, createLocationSpaces } from '../router'
 
 export default {
   metaInfo() {
-    const title = `${this.title} - ${this.configuration.theme.general.name}`
+    const title = `${this.title} - ${this.configuration.currentTheme.general.name}`
 
     return { title }
   },

diff --git a/packages/web-app-files/src/views/PrivateLink.vue b/packages/web-app-files/src/views/PrivateLink.vue
@@ -41,11 +41,11 @@ export default {
     },
 
     backgroundImg() {
-      return this.configuration.theme.loginPage.backgroundImg
+      return this.configuration.currentTheme.loginPage.backgroundImg
     },
 
     logoImg() {
-      return this.configuration.theme.logo.login
+      return this.configuration.currentTheme.logo.login
     }
   },
   mounted() {

diff --git a/packages/web-app-files/src/views/PublicLink.vue b/packages/web-app-files/src/views/PublicLink.vue
@@ -45,7 +45,7 @@
       </div>
       <div class="oc-login-card-footer">
         <p>
-          {{ configuration.theme.general.slogan }}
+          {{ configuration.currentTheme.general.slogan }}
         </p>
       </div>
     </div>
@@ -83,11 +83,11 @@ export default {
     },
 
     backgroundImg() {
-      return this.configuration.theme.loginPage.backgroundImg
+      return this.configuration.currentTheme.loginPage.backgroundImg
     },
 
     logoImg() {
-      return this.configuration.theme.logo.login
+      return this.configuration.currentTheme.logo.login
     }
   },
   mounted() {

diff --git a/packages/web-app-files/tests/unit/views/views.setup.js b/packages/web-app-files/tests/unit/views/views.setup.js
@@ -68,7 +68,7 @@ export const getStore = function ({
     },
     getters: {
       configuration: () => ({
-        theme: {
+        currentTheme: {
           loginPage: {
             backgroundImg: loginBackgroundImg
           },

diff --git a/packages/web-app-media-viewer/src/App.vue b/packages/web-app-media-viewer/src/App.vue
@@ -66,7 +66,7 @@
         >
           <oc-icon size="large" name="arrow-drop-left" />
         </oc-button>
-        <p v-if="!isFolderLoading" class="oc-m-rm oc-light">
+        <p v-if="!isFolderLoading" class="oc-m-rm media-viewer-controls-action-count">
           <span aria-hidden="true" v-text="ariaHiddenFileCount" />
           <span class="oc-invisible-sr" v-text="screenreaderFileCount" />
         </p>
@@ -358,6 +358,10 @@ export default {
   }
 }
 
+.media-viewer-controls-action-count {
+  color: var(--oc-color-swatch-inverse-default);
+}
+
 @media (max-width: 959px) {
   .media-viewer-player {
     max-width: 100vw;

diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
@@ -212,51 +212,66 @@ export default {
   #files-global-search-bar {
     width: 452px;
     @media (max-width: 959px) {
-      width: 50px;
+      min-width: 2.5rem;
+      width: 2.5rem;
+      background-color: var(--oc-color-swatch-brand-default);
 
-      &:focus {
-        min-width: 252px !important;
+      input,
+      .oc-width-expand {
+        width: 2.5rem;
       }
 
-      &:focus-within input,
-      input:not(:placeholder-shown) {
-        background-color: var(--oc-color-background-muted);
-        border: 1px solid rgba(75, 94, 120, 0.6);
-        top: -20px;
-        z-index: var(--oc-z-index-modal);
-        min-width: 252px !important;
+      .oc-search-input-icon {
+        padding: 0 var(--oc-space-large);
       }
 
       .oc-search-clear {
-        right: -200px;
+        right: var(--oc-space-medium);
       }
-    }
-  }
 
-  .oc-search {
-    min-width: 40px;
+      &:focus-within {
+        position: absolute;
+        height: 60px;
+        left: var(--oc-space-medium);
+        margin: 0 auto;
+        top: 0;
+        width: 100vw !important;
+
+        .oc-search-input-icon {
+          padding: 0 var(--oc-space-xlarge);
+        }
+      }
+
+      &:focus-within input,
+      input:not(:placeholder-shown) {
+        background-color: var(--oc-color-input-bg);
+        border: 1px solid var(--oc-color-input-border);
+        z-index: var(--oc-z-index-modal);
+        width: 95%;
+        margin: 0 auto;
+      }
+    }
   }
 
   .oc-search-input {
     transition: 0s;
 
     @media (max-width: 959px) {
-      background: white;
+      background: var(--oc-color-input-bg);
       border: none;
       display: inline;
-      width: 2rem;
     }
   }
 
   &.options-visible {
     .oc-search-input {
-      border: 1px solid rgba(75, 94, 120, 0.6);
+      border: 1px solid var(--oc-color-input-border);
     }
   }
 }
 
 #files-global-search-options {
-  border: 1px solid rgba(75, 94, 120, 0.6);
+  border: 1px solid var(--oc-color-input-border);
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
   background-color: var(--oc-color-input-bg);
@@ -266,8 +281,10 @@ export default {
   width: 450px;
 
   @media (max-width: 959px) {
-    min-width: 250px !important;
-    max-width: 250px !important;
+    left: var(--oc-space-medium);
+    min-width: 95% !important;
+    max-width: 95% !important;
+    top: 55px;
   }
 
   ul {
@@ -320,7 +337,7 @@ export default {
         text-align: center;
 
         &.spinner {
-          border-top-color: rgba(75, 94, 120, 0.2);
+          border-top-color: var(--oc-color-input-border);
         }
       }
 
@@ -359,7 +376,7 @@ export default {
         background-color: var(--oc-color-background-muted);
 
         &.first {
-          border-top-color: rgba(75, 94, 120, 0.6);
+          border-top-color: var(--oc-color-input-border);
         }
 
         &:hover {

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -8,7 +8,7 @@
       v-if="user.isAuthenticated && !user.userReady"
       class="loading-overlay oc-flex oc-flex-middle oc-flex-center"
       :style="{
-        backgroundImage: 'url(' + configuration.theme.loginPage.backgroundImg + ')'
+        backgroundImage: 'url(' + configuration.currentTheme.loginPage.backgroundImg + ')'
       }"
     >
       <oc-spinner size="xlarge" :aria-label="$gettext('Loading')" />
@@ -34,7 +34,7 @@
             :nav-items="sidebarNavItems"
           />
           <router-view
-            class="app-content oc-width-1-1"
+            class="app-content oc-width-1-1 oc-pl-m"
             :class="{ 'app-content-standalone': !isSidebarVisible }"
             name="app"
           />
@@ -125,7 +125,7 @@ export default {
     },
 
     favicon() {
-      return this.configuration.theme.logo.favicon
+      return this.configuration.currentTheme.logo.favicon
     },
 
     sidebarNavItems() {
@@ -280,7 +280,7 @@ export default {
       const titleSegments = [routeTitle]
 
       if (includeGeneralName) {
-        titleSegments.push(this.configuration.theme.general.name)
+        titleSegments.push(this.configuration.currentTheme.general.name)
       }
 
       if (route.params.item) {
@@ -306,7 +306,7 @@ body {
 }
 
 #web {
-  background-color: #202020;
+  background-color: var(--oc-color-swatch-brand-default);
   height: 100vh;
   max-height: 100vh;
   overflow-y: hidden;
@@ -344,6 +344,7 @@ body {
         border-bottom-right-radius: 15px;
         padding-top: 15px;
         padding-bottom: 15px;
+        transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
 
         &-standalone {
           border-radius: 15px;

diff --git a/packages/web-runtime/src/components/FeedbackLink.vue b/packages/web-runtime/src/components/FeedbackLink.vue
@@ -6,10 +6,11 @@
       :href="href"
       target="_blank"
       appearance="raw"
+      variation="inverse"
       :aria-label="ariaLabel"
       aria-describedby="oc-feedback-link-description"
     >
-      <oc-icon name="feedback" variation="inverse" />
+      <oc-icon name="feedback" />
     </oc-button>
     <p id="oc-feedback-link-description" class="oc-invisible-sr" v-text="description" />
   </div>

diff --git a/packages/web-runtime/src/components/Notifications.vue b/packages/web-runtime/src/components/Notifications.vue
@@ -4,10 +4,10 @@
       id="oc-notification-bell"
       v-oc-tooltip="notificationsLabel"
       appearance="raw"
+      variation="inverse"
       :aria-label="notificationsLabel"
     >
       <oc-icon
-        variation="inverse"
         class="oc-cursor-pointer oc-flex oc-flex-middle"
         name="notification-3"
         fill-type="line"

diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -7,7 +7,6 @@
     }"
   >
     <oc-button
-      variation="inverse"
       appearance="raw"
       :class="toggleSidebarButtonClass"
       class="toggle-sidebar-button oc-py-s"
@@ -78,14 +77,11 @@ export default {
 
 <style lang="scss">
 #web-nav-sidebar {
-  background-color: #2d2d2d;
+  background-color: var(--oc-color-background-default);
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
-  color: var(--oc-color-text-inverse);
   display: flex;
   flex-direction: column;
-  position: sticky;
-  top: 0;
   transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
   box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
   z-index: 4;
@@ -94,7 +90,7 @@ export default {
     transition: all 0.2s ease-out;
     &:hover {
       border-top-left-radius: 15px;
-      background: #383838;
+      background-color: var(--oc-color-background-highlight) !important;
     }
   }
   .toggle-sidebar-button-expanded {