{"action":"created","issue":{"url":"https://api.github.com/repos/vmware/clarity/issues/1976","repository_url":"https://api.github.com/repos/vmware/clarity","labels_url":"https://api.github.com/repos/vmware/clarity/issues/1976/labels{/name}","comments_url":"https://api.github.com/repos/vmware/clarity/issues/1976/comments","events_url":"https://api.github.com/repos/vmware/clarity/issues/1976/events","html_url":"https://github.com/vmware/clarity/issues/1976","id":295806093,"number":1976,"title":"[UX] Theme switcher in the clr-header","user":{"login":"SayakMukhopadhyay","id":13748882,"avatar_url":"https://avatars0.githubusercontent.com/u/13748882?v=4","gravatar_id":"","url":"https://api.github.com/users/SayakMukhopadhyay","html_url":"https://github.com/SayakMukhopadhyay","followers_url":"https://api.github.com/users/SayakMukhopadhyay/followers","following_url":"https://api.github.com/users/SayakMukhopadhyay/following{/other_user}","gists_url":"https://api.github.com/users/SayakMukhopadhyay/gists{/gist_id}","starred_url":"https://api.github.com/users/SayakMukhopadhyay/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SayakMukhopadhyay/subscriptions","organizations_url":"https://api.github.com/users/SayakMukhopadhyay/orgs","repos_url":"https://api.github.com/users/SayakMukhopadhyay/repos","events_url":"https://api.github.com/users/SayakMukhopadhyay/events{/privacy}","received_events_url":"https://api.github.com/users/SayakMukhopadhyay/received_events","type":"User","site_admin":false},"labels":[{"id":478605779,"url":"https://api.github.com/repos/vmware/clarity/labels/Needs%20UX%20Input","name":"Needs UX Input","color":"ff55b5","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-02-09T09:31:19Z","updated_at":"2018-03-03T16:02:42Z","closed_at":null,"author_association":"NONE","body":"<!--\r\nPLEASE FILL OUT THE FOLLOWING. WE MAY CLOSE INCOMPLETE ISSUES.\r\n-->\r\n\r\n**Select one ...**  (check one with \"x\")\r\n```\r\n[ ] bug\r\n[ ] feature request\r\n[x] enhancement\r\n[x] question\r\n```\r\nI am planning a theme switcher for my webapp to switch between the light and dark themes (only 2 themes for now). I am planning to put the switcher somewhere on the header. Is there any UX guideline regarding this?\r\nI have a few ideas but I am not sure if they are user friendly\r\n* Put a toggle button. Its a single click action but might look incredibly odd in the header.\r\n* Put an icon, sun and moon. But the problem is I am always confused on other sites using this if clicking on the sun is supposed to turn on the light mode or the sun represents that the light mode is active. Also Clarity Icons lack a sun and a (crescent) moon.\r\n* A dropdown. The Dropdown can list the names of the themes (might look cumbersome) or can show a colour patch. This is the only option which supports more than 2 themes.\r\n### Expected behavior\r\n<!-- Describe the expected behavior. -->\r\nGreat UX while theme switching.\r\n### Actual behavior\r\n<!-- Describe the actual behavior and provide a minimal app that demonstrates the issue. Fork one of the Clarity Plunker Templates and recreate the issue. Then submit your link with the issue. -->\r\n\r\n### Reproduction of behavior\r\n<!-- Include a working plunker link reproducing the behavior. -->\r\n<!-- Clarity Plunker Templates -->\r\n* Include a link to the reproduction scenario you created by forking one of the Clarity Plunker Templates:\r\n<!-- Clarity Version: [Light Theme v11](https://stackblitz.com/edit/clarity-light-theme-v11) -->\r\n<!-- Clarity Version: [Dark Theme v11](https://stackblitz.com/edit/clarity-dark-theme-v11) -->\r\n<!-- Clarity Version: [Light Theme v10](https://stackblitz.com/edit/clarity-light-theme-v10) -->\r\n<!-- Clarity Version: [Dark Theme v10](https://stackblitz.com/edit/clarity-dark-theme-v10) -->\r\n\r\n### Environment details\r\n\r\n* **Angular version:** 5.2.x\r\n\r\n* **Clarity version:**0.11.x\r\n\r\n* **OS and version:** Win10\r\n\r\n* **Browser:** [all]\r\n"},"comment":{"url":"https://api.github.com/repos/vmware/clarity/issues/comments/370158351","html_url":"https://github.com/vmware/clarity/issues/1976#issuecomment-370158351","issue_url":"https://api.github.com/repos/vmware/clarity/issues/1976","id":370158351,"user":{"login":"hippee-lee","id":433692,"avatar_url":"https://avatars1.githubusercontent.com/u/433692?v=4","gravatar_id":"","url":"https://api.github.com/users/hippee-lee","html_url":"https://github.com/hippee-lee","followers_url":"https://api.github.com/users/hippee-lee/followers","following_url":"https://api.github.com/users/hippee-lee/following{/other_user}","gists_url":"https://api.github.com/users/hippee-lee/gists{/gist_id}","starred_url":"https://api.github.com/users/hippee-lee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hippee-lee/subscriptions","organizations_url":"https://api.github.com/users/hippee-lee/orgs","repos_url":"https://api.github.com/users/hippee-lee/repos","events_url":"https://api.github.com/users/hippee-lee/events{/privacy}","received_events_url":"https://api.github.com/users/hippee-lee/received_events","type":"User","site_admin":false},"created_at":"2018-03-03T16:02:42Z","updated_at":"2018-03-03T16:02:42Z","author_association":"CONTRIBUTOR","body":"@SayakMukhopadhyay - In Jeremey's example [here](https://stackblitz.com/edit/clarity-theme-switcher?file=app%2Fapp.component.ts) he uses a drop down in the header. I've also seen a theme switcher implemented with a slider button. Either way the technique in Jeremy's example will be the same for both. If your app seems like a better fit for one or the other UI widgets for switching I'd use that. "}}
{"actor":{"display_login":"hippee-lee"}}