feat(dep-graph): add dark mode #8712
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/nrwl/nx-dev/ESeNUyZ6EqM79aUizTSWdCXpx9ig [Deployment for 6a72952 canceled] |
|
Please update your PR title to match our commit guidelines, something like "feat(dep-graph): add dark mode" |
|
This is a good start and takes care of changing our React components to dark mode. I'll work with our designer to determine some colors that fit the Nrwl color palette. One more thing we need to figure out is passing the dark mode setting to the graph to be able to alter the colors there. The graph is powered by a library called Cytoscape which uses a canvas to render the graph. So it won't accept our CSS rules to change colors, but it does accept a very similar syntax for styles. You can find the existing styles for nodes and edges in The style rules accept a function as a setter. So for example, right now the background color on Let me know if that is a good enough starting off point. |
|
Hey @philipjfulcher, thanks for the hint. I did something like you mention in the previous comment, however the instances do not update dynamically, and the nodes, edges and arrows will only update after you hover. I didn't quite yet figure a way to dynamically update those. Also, I added my own colour scheme but you can always update them easily, or if you have a pallet in mind just tell me and I can make those changes. |
|
@Lcarv20 - I pushed up a commit that should refresh the colors on the graph immediately. I also rebased on master to get the latest changes in and ran a format, which I'm hoping should clean-up the e2e failures. |
Squash commits: feat(dep-graph): Updating tailwind config file. As of version 3.0 higher tailwind jit mode is default. Instead of purge is now content and as dark mode will be added as class. feat(dep-graph): Enabling toggable dark mode. As darkmode (tailwind.congig.json) is set as class, we need to add the script to the head tag on index.html. see: https://tailwindcss.com/docs/dark-mode feat(dep-graph): Adding theme Initializer and creating support functions All functions related to theme changing and initialization are located on the theme-resolver.tsx The themeInit function will run when page is loaded and apply add class to the <html> tag as dark or light accordignly. Theme resolver applies the changes and keeps localstorage and <html class> in sync. feat(dep-graph): Adding theme panel The pannel allows users to switch themes. Currently it only changes the html class and localstorage. feat(dep-graph): Creating tailwind dark colors pallete The current colors remain as light. The dark colors are an attempt to contrast the light ones. feat(dep-graph): Adding additional styles to sidebar feat(dep-graph): Define styling presets for darkmode to allow consistent and concise classNames. feat(dep-graph): Apply dark styling classes to sidebar feat(dep-graph): Added dark mode styles to the debugger feat(dep-graph): Added Color to tailwind config and adjusting imports. feat(dep-graph): Created theme tracker feat(dep-graph): Added dark classes to graph container feat(dep-graph): Adjusted some edge styles for better UX. Added dynamic selection of colors according to the current theme. feat(dep-graph): Added transition when switching themes. feat(dep-graph): Readded auto roation for implicit label and dynamic background. feat(dep-graph): Assigned generic types to selectDynbamically, and added new color to the pallete. feat(dep-graph): Added dynamic styles for theming. feat(dep-graph): Added mock for matchMedia. Tests will fail otherwise. feat(dep-graph): Added styles to tippy. feat(dep-graph): Moved theme related functions to theme-resolver file feat(dep-graph): Implement dark mode on tooltips. feat(dep-graph): re-evaluate graph colors on theme change cleanup(dep-graph): Removed duplicate style chore(dep-graph): Testing theme preferences Adding test cases for theme initialization, and the ability to change. cleanup(dep-graph): removing repeated style classes Fixed issue with webpack plugin (#8231) feat(npm): resolved issue with live reload failing Fixed the issue with live reload when adding scripts in project.json Closes #8230 chore(repo): update nx to 13.10.0-beta.1 (#9407) feat(dep-graph): re-evaluate graph colors on theme change fix(dep-graph): use theme background color in image download
* feat(dep-graph): add dark mode Squashed commits: feat(dep-graph): Updating tailwind config file. As of version 3.0 higher tailwind jit mode is default. Instead of purge is now content and as dark mode will be added as class. feat(dep-graph): Enabling toggable dark mode. As darkmode (tailwind.congig.json) is set as class, we need to add the script to the head tag on index.html. see: https://tailwindcss.com/docs/dark-mode feat(dep-graph): Adding theme Initializer and creating support functions All functions related to theme changing and initialization are located on the theme-resolver.tsx The themeInit function will run when page is loaded and apply add class to the <html> tag as dark or light accordignly. Theme resolver applies the changes and keeps localstorage and <html class> in sync. feat(dep-graph): Adding theme panel The pannel allows users to switch themes. Currently it only changes the html class and localstorage. feat(dep-graph): Creating tailwind dark colors pallete The current colors remain as light. The dark colors are an attempt to contrast the light ones. feat(dep-graph): Adding additional styles to sidebar feat(dep-graph): Define styling presets for darkmode to allow consistent and concise classNames. feat(dep-graph): Apply dark styling classes to sidebar feat(dep-graph): Added dark mode styles to the debugger feat(dep-graph): Added Color to tailwind config and adjusting imports. feat(dep-graph): Created theme tracker feat(dep-graph): Added dark classes to graph container feat(dep-graph): Adjusted some edge styles for better UX. Added dynamic selection of colors according to the current theme. feat(dep-graph): Added transition when switching themes. feat(dep-graph): Readded auto roation for implicit label and dynamic background. feat(dep-graph): Assigned generic types to selectDynbamically, and added new color to the pallete. feat(dep-graph): Added dynamic styles for theming. feat(dep-graph): Added mock for matchMedia. Tests will fail otherwise. feat(dep-graph): Added styles to tippy. feat(dep-graph): Moved theme related functions to theme-resolver file feat(dep-graph): Implement dark mode on tooltips. feat(dep-graph): re-evaluate graph colors on theme change cleanup(dep-graph): Removed duplicate style chore(dep-graph): Testing theme preferences Adding test cases for theme initialization, and the ability to change. cleanup(dep-graph): removing repeated style classes Fixed issue with webpack plugin (nrwl#8231) feat(npm): resolved issue with live reload failing Fixed the issue with live reload when adding scripts in project.json Closes nrwl#8230 chore(repo): update nx to 13.10.0-beta.1 (nrwl#9407) feat(dep-graph): re-evaluate graph colors on theme change fix(dep-graph): use theme background color in image download * fix(dep-graph): change dark mode styles * cleanup(dep-graph): cleanup e2e tests and naming Co-authored-by: Philip Fulcher <philip@nrwl.io>
|
This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request. |
Current Behavior
Currently there is no possibility to use different themes.
Expected Behavior
Users can toggle between dark and light themes, or select to dynamically follow the system setting.
Related Issue(s)
Fixes #