-
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add Dark Mode grid option (#305)
* feat: add Dark Mode grid option
- Loading branch information
1 parent
753da07
commit d4bfdd1
Showing
12 changed files
with
491 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| ## Dark Mode | ||
|
|
||
| When enabled (defaults to false), it will show the grid in Dark Mode by adding `slick-dark-mode` CSS class to the grid. Note that it is defined as a grid option because the grid uses a few elements that could be appended to the DOM `body` (e.g. ColumnPicker, GridMenu, LongTextEditor, CompositeEditorModal, ...) and when Dark Mode is enabled, it needs to advise all of these features that we are using Dark Mode (or Light Mode by default). So whenever any of these features are in play, and before it is appended to the `body`, it will add a `slick-dark-mode` (or `ms-dark-mode` for ms-select) CSS class to that element to let it know that we are in Dark Mode. | ||
|
|
||
|
|
||
| ### Toggle Light/Dark Mode | ||
|
|
||
| You can easily toggle light/dark mode by using `grid.setOptions()` | ||
|
|
||
| ```ts | ||
| export class MyDemo { | ||
| isDarkModeEnabled = false; | ||
| gridOptions: GridOption; | ||
|
|
||
| prepareGrid() { | ||
| this.gridOptions = { | ||
| // ... | ||
| darkMode: this.isDarkModeEnabled; | ||
| } | ||
| } | ||
|
|
||
| toggleDarkMode() { | ||
| this.isDarkModeEnabled = !this.isDarkModeEnabled; | ||
| this.sgb.slickGrid?.setOptions({ darkMode: this.isDarkModeEnabled }); | ||
|
|
||
| // optionally update your local grid options as well | ||
| this.gridOptions = { ...this.gridOptions, darkMode: this.isDarkModeEnabled }; | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### How to Auto-Detect Dark Mode? | ||
|
|
||
| By default the grid will **not** automatically enable Dark Mode, neither read the browser's color scheme (the reason are mentioned in the description above). However, you could implement your own code to detect the color scheme (for modern browser only) when loading your browser and set it in your grid options. You can see a demo of that in the first grid of [Example 1](https://ghiscoding.github.io/slickgrid-universal/#/example01) | ||
|
|
||
| ```ts | ||
| export class MyDemo { | ||
| gridOptions: GridOption; | ||
|
|
||
| // auto-detect browser's color scheme function | ||
| isBrowserDarkModeEnabled() { | ||
| return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false; | ||
| } | ||
|
|
||
| prepareGrid() { | ||
| this.gridOptions = { | ||
| // ... | ||
| darkMode: this.isBrowserDarkModeEnabled(); | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Composite Editor Modal (for Bootstrap users) | ||
|
|
||
| For `Bootstrap` users, it will also require the developer to add a `data-bs-theme="dark"` attribute which is also another reason why we added `darkMode` as a grid option. So for Bootstrap users, you will have to add this required attribute by yourself for the Dark Mode to display properly. If you forget to add this attribute, you might see some of the filter inputs and other sections displayed with a white background instead of an expected dark gray backgroud. | ||
|
|
||
| > **Note** the `onRendered` is a new lifecycle callback of Composite Editor Modal that was added specifically for this Bootstrap use case | ||
| ```ts | ||
| this.compositeEditorInstance?.openDetails({ | ||
| // ... | ||
| onRendered: (modalElm) => modalElm.dataset.bsTheme = 'dark', | ||
| }); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,27 @@ | ||
| $button-border-color: #ababab !default; | ||
| $slick-button-border-color: #ababab !default; | ||
|
|
||
| .editable-field { | ||
| // box-shadow: inset 0 0 0 1px lightblue !important; | ||
| background-color: rgba(227, 240, 251, 0.569) !important; | ||
| } | ||
|
|
||
| .slick-dark-mode .editable-field { | ||
| background-color: rgb(105 123 145 / 57%) !important | ||
| } | ||
|
|
||
| .unsaved-editable-field { | ||
| background-color: #fbfdd1 !important; | ||
| } | ||
| .button-style { | ||
| cursor: pointer; | ||
| background-color: white; | ||
| border: 1px solid #{$button-border-color}; | ||
| border-radius: 2px; | ||
| justify-content: center; | ||
| text-align: center; | ||
| &:hover { | ||
| border-color: darken($button-border-color, 10%); | ||
| } | ||
|
|
||
| .slick-dark-mode .unsaved-editable-field { | ||
| background-color: rgba(255, 183, 50, 0.8) !important; | ||
| color: white; | ||
| } | ||
|
|
||
| .slick-dark-mode { | ||
| --bs-btn-color: #bebebe; | ||
| } | ||
|
|
||
| .panel-wm { | ||
| width: calc(100vw - 12px); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.