Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(dep-graph): add dark mode #8712

Merged
merged 3 commits into from Mar 31, 2022
Merged

feat(dep-graph): add dark mode #8712

merged 3 commits into from Mar 31, 2022

Commits on Mar 31, 2022

  1. feat(dep-graph): add dark mode 

    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
    @Lcarv20 @philipjfulcher
    Lcarv20 authored and philipjfulcher committed Mar 31, 2022
    Copy the full SHA
    2d800a6 View commit details
    Browse the repository at this point in the history

  2. fix(dep-graph): change dark mode styles

    @philipjfulcher
    philipjfulcher committed Mar 31, 2022
    Copy the full SHA
    28ff8a2 View commit details
    Browse the repository at this point in the history

  3. cleanup(dep-graph): cleanup e2e tests and naming

    @philipjfulcher
    philipjfulcher committed Mar 31, 2022
    Copy the full SHA
    6a72952 View commit details
    Browse the repository at this point in the history