Usability - off switch for transparency

[laktak]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.

I am unable to use Nextcloud on older hardware. The rendering of the web UI is so slow that it becomes unusable. This is also true for VMs without hardware acceleration.

Describe the solution you'd like

Nextcloud should consider adding an off switch for UI effects (like transparency/animations).

Describe alternatives you've considered

I was able to fix the problem by using custom CSS.

If an off switch is not feasible maybe something like this can be added to the docs?

[data-theme-dark] {
  --color-main-background:#171717;
  --color-main-background-rgb:23,23,23;
  --color-main-background-translucent:#171717;
  --color-main-background-blur:#171717;
  --filter-background-blur:none;
  --gradient-main-background:none;
  --color-background-hover:#212121;
  --color-background-dark:#292929;
  --color-background-darker:#3b3b3b;
  --color-placeholder-light:#313131;
  --color-placeholder-dark:#4a4a4a;
  --color-main-text:#D8D8D8;
  --color-text-maxcontrast:#8c8c8c;
  --color-text-maxcontrast-default:#8c8c8c;
  --color-text-maxcontrast-background-blur:#919191;
  --color-text-light:#bfbfbf;
  --color-text-lighter:#a5a5a5;
  --color-scrollbar:#3d3d3d;
  --color-error:#e9322d;
  --color-error-rgb:233,50,45;
  --color-error-hover:#ed5a56;
  --color-warning:#eca700;
  --color-warning-rgb:236,167,0;
  --color-warning-hover:#efb832;
  --color-success:#46ba61;
  --color-success-rgb:70,186,97;
  --color-success-hover:#6ac780;
  --color-loading-light:#777;
  --color-loading-dark:#CCC;
  --color-box-shadow-rgb:0,0,0;
  --color-box-shadow:#000000;
  --color-border:#292929;
  --color-border-dark:#3b3b3b;
  --color-border-maxcontrast:#646464;
  --font-face:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --default-font-size:15px;
  --animation-quick:100ms;
  --animation-slow:300ms;
  --border-radius:3px;
  --border-radius-large:10px;
  --border-radius-pill:100px;
  --default-clickable-area:44px;
  --default-line-height:24px;
  --default-grid-baseline:4px;
  --header-height:50px;
  --navigation-width:300px;
  --sidebar-min-width:300px;
  --sidebar-max-width:500px;
  --list-min-width:200px;
  --list-max-width:300px;
  --header-menu-item-height:44px;
  --header-menu-profile-item-height:66px;
  --breakpoint-mobile:1024px;
  --background-invert-if-dark:invert(100%);
  --background-invert-if-bright:no;
  --background-image-invert-if-bright:no;
  --image-background:no;
  --image-background-default:no;
  --color-background-plain:#00070B;
  --primary-invert-if-bright:no;
  --color-primary:#00070B;
  --color-primary-default:#00304A;
  --color-primary-text:#ffffff;
  --color-primary-hover:#040a0d;
  --color-primary-light:#141515;
  --color-primary-light-text:#999b9d;
  --color-primary-light-hover:#1d1e1e;
  --color-primary-text-dark:#ededed;
  --color-primary-element:#00070B;
  --color-primary-element-default-hover:#042b3f;
  --color-primary-element-text:#ffffff;
  --color-primary-element-hover:#040a0d;
  --color-primary-element-light:#141515;
  --color-primary-element-light-text:#999b9d;
  --color-primary-element-light-hover:#1d1e1e;
  --color-primary-element-text-dark:#ededed;
  --gradient-primary-background:none;
}

[data-theme-light] {
  --color-main-background: #ffffff;
  --color-main-background-rgb: 255,255,255;
  --color-main-background-translucent: #ffffff;
  --color-main-background-blur: #ffffff;
  --filter-background-blur: none;
  --gradient-main-background: none;
  --color-background-hover: #f5f5f5;
  --color-background-dark: #ededed;
  --color-background-darker: #dbdbdb;
  --color-placeholder-light: #e6e6e6;
  --color-placeholder-dark: #cccccc;
  --color-main-text: #222222;
  --color-text-maxcontrast: #767676;
  --color-text-maxcontrast-default: #767676;
  --color-text-maxcontrast-background-blur: #646464;
  --color-text-light: #222222;
  --color-text-lighter: #767676;
  --color-scrollbar: rgba(34,34,34, .15);
  --color-error: #e9322d;
  --color-error-rgb: 233,50,45;
  --color-error-hover: #ed5a56;
  --color-warning: #eca700;
  --color-warning-rgb: 236,167,0;
  --color-warning-hover: #efb832;
  --color-success: #46ba61;
  --color-success-rgb: 70,186,97;
  --color-success-hover: #6ac780;
  --color-loading-light: #cccccc;
  --color-loading-dark: #444444;
  --color-box-shadow-rgb: 77,77,77;
  --color-box-shadow: #777777;
  --color-border: #ededed;
  --color-border-dark: #dbdbdb;
  --color-border-maxcontrast: #949494;
  --font-face: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', Arial, sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --default-font-size: 15px;
  --animation-quick: 100ms;
  --animation-slow: 300ms;
  --border-radius: 3px;
  --border-radius-large: 10px;
  --border-radius-pill: 100px;
  --default-clickable-area: 44px;
  --default-line-height: 24px;
  --default-grid-baseline: 4px;
  --header-height: 50px;
  --navigation-width: 300px;
  --sidebar-min-width: 300px;
  --sidebar-max-width: 500px;
  --list-min-width: 200px;
  --list-max-width: 300px;
  --header-menu-item-height: 44px;
  --header-menu-profile-item-height: 66px;
  --breakpoint-mobile: 1024px;
  --background-invert-if-dark: no;
  --background-invert-if-bright: invert(100%);
  --background-image-invert-if-bright: no;
  --image-background: no;
  --image-background-default: no;
  --color-background-plain: #9c4236;
  --primary-invert-if-bright: no;
  --color-primary: #9c4236;
  --color-primary-default: #00304A;
  --color-primary-text: #ffffff;
  --color-primary-hover: #af675e;
  --color-primary-light: #f5ecea;
  --color-primary-light-text: #3e1a15;
  --color-primary-light-hover: #eae1df;
  --color-primary-text-dark: #ededed;
  --color-primary-element: #9c4236;
  --color-primary-element-default-hover: #32596e;
  --color-primary-element-text: #ffffff;
  --color-primary-element-hover: #af675e;
  --color-primary-element-light: #f5ecea;
  --color-primary-element-light-text: #3e1a15;
  --color-primary-element-light-hover: #eae1df;
  --color-primary-element-text-dark: #ededed;
  --gradient-primary-background: none;
}

[madscientist159]

I'm seeing this on some farily powerful modern hardware and a 4k screen, with 6+ tiled Chromium windows open per my normal workflow. On NC24 everything is perfectly smooth, on NC25 every single Chromium window stutters and stalls while the single NC window is refreshing, including the other windows playing video. This makes NC effectively unusable on Chromium. The only workaround I found was switching to High Contrast mode, which (while ugly) at least allows me to keep the NC window open to monitor the dashboard.

My suspicion is when the GPU is overloaded the render threads stall, and NC currently seems very good at overloading a GPU at higher resolutions.

[madscientist159]

Even in high contrast mode, the performance problem comes back on the Talk video screen. For some reason the Talk video screen doesn't honor the high contrast option, resulting in a slideshow as long as the Talk video screen is open. Note that upload is completely smooth, it's a client side rendering problem likely caused by the semitransparent background.

[laktak]

@madscientist159 did you try the custom css as a workaround? At least on 24 I don't have any performance problems any more.

[susnux]

You can try to just use the highcontrast themes we provide. they do not use transparency.