Introduce themeswitcher #6240

pascalwengerter · 2022-01-12T15:15:48Z

Description

This is currently WIP, but allows users to switch between a dark and light theme (provided this is found in the theming configuration). It initializes with the browser preference

Related Issue

Fixes add possibility to switch dark/light theme #6242

Types of changes

New feature (non-breaking change which adds functionality)
Technical debt (removes workarounds related to theming/colors in the redesign)

Checklist:

update-docs · 2022-01-12T15:15:52Z

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

tbsbdr · 2022-01-13T15:08:38Z

👏
I propose the following switch:
switch shows the currently applied theme (not the to-be-switched theme); if your are in the dark mode, switch label is "Dark mode 🌚"

CLAassistant · 2022-01-13T17:27:18Z

All committers have signed the CLA.

kulmann · 2022-01-13T22:55:08Z

packages/web-runtime/src/helpers/theme.js

@@ -17,6 +17,7 @@ export const loadTheme = async (location = '') => {
      return defaults
    }
    const theme = await response.json()
+    console.log('theme', theme)


dev leftover (well... still WIP... but shouldn't be committed)

kulmann · 2022-01-13T22:57:26Z

packages/web-runtime/src/store/config.js

@@ -109,7 +118,7 @@ const getters = {
    return parsed
  },
  theme: (state) => {


Is the theme getter used at all? You were accessing the theme with configuration.currentTheme everywhere. If that's intended you might want to drop this getter entirely. Or map & use it instead of configuration.

kulmann

This looks so awesome already ❤️

pascalwengerter · 2022-01-14T11:42:16Z

Could someone thoroughly test this with a locally linked owncloud/owncloud-design-system#1886 ? Rebased, animations fixed, extracted some things and fixed stuff the theme switch revealed in the ODS (so we'll need another release there)

kulmann

Things that I found in the UI while testing:

(~~search bar is gone?~~ sorry for the noise, was in ocis on a page that has no filtering)
can we have a small right margin for the left sidebar, so that (when the app has a left sidebar nav) the app content gets a little more distance from the sidebar? At the moment it looks too compact IMO.
when switching the theme the left sidebar has a slight delay / takes a little bit longer, compared to the rest of the UI

Dark mode:

form input fields background color is a dark blue, I'd have expected something gray-ish (was looking at e.g. invite input field for people sharing and the page size dropdown in view options)
OcDrop background same or too similar to the main background color, drop shadow exists but has no to little effect
"+ New" button has black text on blue button but should have white text afaik
the left sidebar nav items don't have the thick shadow on the right side of the nav icon
OcSwitch background in enabled state has very little contrast to the main background color
mediaviewer shows the label 1 of 3 in black instead of white
modals look broken

Light mode:
found nothing ✅

Edit:

OcDrop styling is part of another story, if there are no easy fixes here, then keep it for later.

pascalwengerter · 2022-01-17T09:39:24Z

Things that I found in the UI while testing:

* (~search bar is gone?~ sorry for the noise, was in ocis on a page that has no filtering)

* can we have a small right margin for the left sidebar, so that (when the app has a left sidebar nav) the app content gets a little more distance from the sidebar? At the moment it looks too compact IMO.

* when switching the theme the left sidebar has a slight delay / takes a little bit longer, compared to the rest of the UI

Dark mode:

* form input fields background color is a dark blue, I'd have expected something gray-ish (was looking at e.g. invite input field for people sharing and the page size dropdown in view options)

* OcDrop background same or too similar to the main background color, drop shadow exists but has no to little effect

* "+ New" button has black text on blue button but should have white text afaik

* the left sidebar nav items don't have the thick shadow on the right side of the nav icon

* OcSwitch background in enabled state has very little contrast to the main background color

* mediaviewer shows the label `1 of 3` in black instead of white

* modals look broken

Light mode: found nothing white_check_mark

Edit:

* OcDrop styling is part of another story, if there are no easy fixes here, then keep it for later.

Thanks for testing @kulmann, did you try it with owncloud/owncloud-design-system#1887 locally linked?

kulmann · 2022-01-17T10:18:00Z

Thanks for testing @kulmann, did you try it with owncloud/owncloud-design-system#1887 locally linked?

Yes 😇
You meant 1886. 1887 is an issue in ODS.

pascalwengerter · 2022-01-18T09:03:27Z

Things that I found in the UI while testing:
* (~search bar is gone?~ sorry for the noise, was in ocis on a page that has no filtering) 

✅

* can we have a small right margin for the left sidebar, so that (when the app has a left sidebar nav) the app content gets a little more distance from the sidebar? At the moment it looks too compact IMO.

✅ rather added a padding to the router-view, right margin on the sidebar messed with the border-shadow

* when switching the theme the left sidebar has a slight delay / takes a little bit longer, compared to the rest of the UI

✅ added the same to the app content area now, please check if it's to your liking

Dark mode:

* form input fields background color is a dark blue, I'd have expected something gray-ish (was looking at e.g. invite input field for people sharing and the page size dropdown in view options)

✅ now has one of the "standard dark theme background colors", similar to the form field background in light mode

* OcDrop background same or too similar to the main background color, drop shadow exists but has no to little effect

✅ not to resolve in this ticket, can't find the exalated ticket yet though

* "+ New" button has black text on blue button but should have white text afaik

✅ should be resolved now

* the left sidebar nav items don't have the thick shadow on the right side of the nav icon

✅ resolved

* OcSwitch background in enabled state has very little contrast to the main background color

owncloud/owncloud-design-system#1887, ✅ resolved by changing colors & adding a small border around it

* mediaviewer shows the label `1 of 3` in black instead of white

✅ resolved

* modals look broken

✅ resolved in the ODS, needed a background color

Light mode: found nothing white_check_mark

Edit:
* OcDrop styling is part of another story, if there are no easy fixes here, then keep it for later.

Commits for review incoming

pascalwengerter · 2022-01-18T09:45:06Z

@kulmann what do you think in terms of a11y, add a tooltip&aria-label to the button and make the text aria hidden?

kulmann

Some more minor things:

dark mode

pagination has dark colors / no contrast
notification bell has dark colors / no contrast
search indicators in table header has dark colors / no contrast
people invite form field has dark text color in autocomplete items (usernames and sharee type)
OcSwitch color contrast is still bad

pascalwengerter · 2022-01-18T15:23:22Z

Some more minor things:

dark mode
* pagination has dark colors / no contrast

✅ consider it fixed in ODS

* notification bell has dark colors / no contrast

✅ consider it fixed in web

* search indicators in table header has dark colors / no contrast

You mean sorting buttons? That's a tough one since we render (colored) SVGs here...

* people invite form field has dark text color in autocomplete items (usernames and sharee type)

I don't find it too bad, what would you like to change?

* OcSwitch color contrast is still bad

Any suggestions how to go about it?

kulmann · 2022-01-18T15:30:48Z

* search indicators in table header has dark colors / no contrast
You mean sorting buttons? That's a tough one since we render (colored) SVGs here...

Yes, the sorting buttons. Would suggest to add a white outline to the icons, so that they are compatible with light and dark mode at the same time.

* people invite form field has dark text color in autocomplete items (usernames and sharee type)
I don't find it too bad, what would you like to change?

True, keep it like it is.

* OcSwitch color contrast is still bad
Any suggestions how to go about it?

Same as for the sorting icons, add a white outline, so that it's compatible with light and dark mode at the same time. The knob in the middle is not that easily visible as well, though.

kulmann

Unit tests need fixing, but otherwise this is gold 🥇 happy to get it merged asap!

fschade

❤️ LGTM

ownclouders · 2022-01-19T09:31:53Z

Results for oCISTrashbinUploadMoveJourney https://drone.owncloud.com/owncloud/web/22016/66/1
💥 The acceptance tests pipeline failed. The build has been cancelled.

ownclouders · 2022-01-19T10:02:44Z

Results for oC10iPhone1 https://drone.owncloud.com/owncloud/web/22017/47/1
💥 The acceptance tests pipeline failed. The build has been cancelled.

sonarqubecloud · 2022-01-19T14:11:29Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

51.5% Coverage
0.0% Duplication

Merge: ab6974b bf6b1a9 Author: Pascal Wengerter <pwengerter@owncloud.com> Date: Wed Jan 19 16:20:10 2022 +0100 Merge pull request #6240 from owncloud/introduce-themeswitcher Introduce themeswitcher

pascalwengerter mentioned this pull request Jan 13, 2022

Release 5.0.0 #6248

Closed

25 tasks

pascalwengerter force-pushed the introduce-themeswitcher branch from d3e2928 to c30d211 Compare January 13, 2022 14:16

kulmann reviewed Jan 13, 2022

View reviewed changes

This was referenced Jan 14, 2022

OcSelect doesn't respect themed input text color owncloud/owncloud-design-system#1885

Closed

Fix coloring issues & add branded gradient owncloud/owncloud-design-system#1886

Merged

pascalwengerter force-pushed the introduce-themeswitcher branch from 2a64d29 to 7951d7d Compare January 14, 2022 11:41

This was referenced Jan 14, 2022

Redesign finetuning: Icons + white bar #6256

Closed

OcSwitch doesn't respect theme colors owncloud/owncloud-design-system#1887

Closed

kulmann suggested changes Jan 17, 2022

View reviewed changes

pascalwengerter force-pushed the introduce-themeswitcher branch from 7951d7d to 07ff96f Compare January 18, 2022 09:16

kulmann suggested changes Jan 18, 2022

View reviewed changes

pascalwengerter force-pushed the introduce-themeswitcher branch from e334466 to 280ee7c Compare January 18, 2022 15:44

pascalwengerter marked this pull request as ready for review January 18, 2022 16:22

pascalwengerter requested a review from fschade as a code owner January 18, 2022 16:22

pascalwengerter force-pushed the introduce-themeswitcher branch from 280ee7c to c1be7b4 Compare January 18, 2022 17:26

kulmann approved these changes Jan 18, 2022

View reviewed changes

pascalwengerter force-pushed the introduce-themeswitcher branch from c1be7b4 to cb7d04e Compare January 19, 2022 09:08

fschade approved these changes Jan 19, 2022

View reviewed changes

pascalwengerter force-pushed the introduce-themeswitcher branch from cb7d04e to d90097c Compare January 19, 2022 09:33

pascalwengerter added 3 commits January 19, 2022 15:01

Update .gitignore to include ownCloud theming folder

81a4881

Add new dark theme to theme.json, bump ODS to v12.0.0-alpha14

575c610

Introduce ThemeSwitcher to toggle light/dark theme

bf6b1a9

pascalwengerter force-pushed the introduce-themeswitcher branch from d90097c to bf6b1a9 Compare January 19, 2022 14:02

pascalwengerter merged commit 072b947 into master Jan 19, 2022

delete-merged-branch bot deleted the introduce-themeswitcher branch January 19, 2022 15:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Introduce themeswitcher #6240

Introduce themeswitcher #6240

pascalwengerter commented Jan 12, 2022 •

edited

Loading

update-docs bot commented Jan 12, 2022

tbsbdr commented Jan 13, 2022 •

edited

Loading

CLAassistant commented Jan 13, 2022 •

edited

Loading

kulmann Jan 13, 2022

kulmann Jan 13, 2022

kulmann left a comment

pascalwengerter commented Jan 14, 2022

kulmann left a comment •

edited

Loading

pascalwengerter commented Jan 17, 2022

kulmann commented Jan 17, 2022 •

edited

Loading

pascalwengerter commented Jan 18, 2022

pascalwengerter commented Jan 18, 2022

kulmann left a comment

pascalwengerter commented Jan 18, 2022

dark mode

kulmann commented Jan 18, 2022

kulmann left a comment

fschade left a comment

ownclouders commented Jan 19, 2022

ownclouders commented Jan 19, 2022

sonarqubecloud bot commented Jan 19, 2022

Introduce themeswitcher #6240

Introduce themeswitcher #6240

Conversation

pascalwengerter commented Jan 12, 2022 • edited Loading

Description

Related Issue

Types of changes

Checklist:

update-docs bot commented Jan 12, 2022

tbsbdr commented Jan 13, 2022 • edited Loading

CLAassistant commented Jan 13, 2022 • edited Loading

kulmann Jan 13, 2022

Choose a reason for hiding this comment

kulmann Jan 13, 2022

Choose a reason for hiding this comment

kulmann left a comment

Choose a reason for hiding this comment

pascalwengerter commented Jan 14, 2022

kulmann left a comment • edited Loading

Choose a reason for hiding this comment

pascalwengerter commented Jan 17, 2022

kulmann commented Jan 17, 2022 • edited Loading

pascalwengerter commented Jan 18, 2022

pascalwengerter commented Jan 18, 2022

kulmann left a comment

Choose a reason for hiding this comment

dark mode

pascalwengerter commented Jan 18, 2022

dark mode

kulmann commented Jan 18, 2022

kulmann left a comment

Choose a reason for hiding this comment

fschade left a comment

Choose a reason for hiding this comment

ownclouders commented Jan 19, 2022

ownclouders commented Jan 19, 2022

sonarqubecloud bot commented Jan 19, 2022

pascalwengerter commented Jan 12, 2022 •

edited

Loading

tbsbdr commented Jan 13, 2022 •

edited

Loading

CLAassistant commented Jan 13, 2022 •

edited

Loading

kulmann left a comment •

edited

Loading

kulmann commented Jan 17, 2022 •

edited

Loading