Skip to content

Commit

Permalink
docs: improve Dark Mode doc
Browse files Browse the repository at this point in the history
  • Loading branch information
ghiscoding committed Mar 5, 2024
1 parent e71c069 commit 0b48de8
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 3 deletions.
2 changes: 1 addition & 1 deletion docs/TOC.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@

## Styling

* [Styling CSS/SASS/Themes](styling/styling.md)
* [Dark Mode](styling/dark-mode.md)
* [Styling CSS/SASS/Themes](styling/styling.md)

## Column Functionalities

Expand Down
4 changes: 2 additions & 2 deletions docs/styling/dark-mode.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Dark Mode

When enabled (defaults to false), it will show the grid in Dark Mode by add `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 these features that we're 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're in 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
Expand Down Expand Up @@ -53,7 +53,7 @@ export class MyDemo {

### 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.
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
Expand Down

0 comments on commit 0b48de8

Please sign in to comment.