Skip to content

v4.5.0 - Dark Mode
Compare
Choose a tag to compare
@github-actions github-actions released this 05 Mar 03:14
· 885 commits to master since this release
v4.5.0
882b8bc

4.5.0 (2024-03-05)

Dark Mode ✨

This is probably a UX change that many users will be happy to start using, however there are a few important notes to be aware of as shown below.

  • Dark Mode must be enabled via a darkMode grid option, it will not auto-detect the color scheme from the browser (you can however easily do it yourself). There are a couple of reasons as to why it was created as a grid option, it's mostly related to the fact that a few features in the lib require the creation of certain DOM Elements that are appended to the body (e.g. ColumnPicker, GridMenu, LongTextEditor, CompositeEditorModal, ...) and it requires extra code in place that SlickGrid will take care of it for you but can only work via a grid option, and for that reason it simply cannot be just simple CSS classes.
  • SVG icon color are using a lighter gray by default, if you're using a Font family for the icons then that won't affect you however keep reading. As mentioned earlier, the SVG icons are using a light gray and that is because the same color must be used for both Light & Dark theme because at the moment the project will create the SVG with a fixed fillColor defined in SASS and once it is set, you cannot change it... you might ask, well can that be fixed in the future? The answer is Yes but... I did find that we can convert all SVG to pure CSS (using UnoCSS, by AntFu) approach but that will introduce some breaking changes and considering that I recently released a major version, I will wait couple more months to proceed with another major. Part of the breaking changes will be to drop support for Fonts and keep only SVGs internally in a future major release.
  • the Dark Mode Theme was created using CSS variables, you might need to tweak some of these variables depending on your primary color, see Slickgrid-Universal CSS variables
  • also note that I'm not a Designer, so if you feel that some colors are off then please contribute a PR
  • you can see Dark Mode demo in Example 1, Example 7, Example 12 or Example 16. All examples have a Toggle Light/Dark Mode button and Example 1 also has the browser auto-detect Dark Mode on the 1st grid only.

Also worth knowing that I also improved multiple-select-vanilla by adding a new feature to replace tabIndex by arrow navigation highlight. This feature will let you use the keyboard (up/down arrows or mouse hover) to navigate the select options and choose any of them (via Enter key) and all of that without losing your current focus (which is a lot better than using tabIndex). This new feature should be a lot more UX friendly.

This is pretty much completing the roadmap of all the features that I wanted to add to this library, this project started 7 years ago and I added a lot of features over the years.

Bug Fixes

Features

Contributors

ghiscoding and ghiscoding-SE
Assets 2
Loading