fix dark mode for Bootstrap 5

[DastardlySky]

This issue has been raised before on here and on SO:
#4380

https://stackoverflow.com/questions/77524543/tabulator-js-5-apply-bootstrap-js-5-dark-theme

However, the issue still seems to persist when applying table-dark to bootstrap tables.

Currently, this is what a table looks like with the "table-dark" class:
https://jsfiddle.net/Lz8eacs7/

With the changes to the .scss files, when the compiled .css file is used it looks like this:
https://jsfiddle.net/tyvawr40

[liepumartins]

Initially I happily though this will solve my problem and I urged to merge this.

However this does not switch between dark/light modes data-bs-theme="light" and data-bs-theme="dark". Rather it provides a fixed class .table-dark that stays dark even on light page.

EDIT:
what I meant is something along the lines

Add to scss file overrides for dark mode, referenced variables come from bootstrap _variables_dark.scss file:

[data-bs-theme="dark"] {
    .tabulator {
        background-color: $body-bg-dark;
        color: $body-color-dark;
        border-color: $border-color-dark;

        .tabulator-row {
            background-color: $body-bg-dark;
            color: $body-color-dark;
            border-color: $border-color-dark;

            &:hover {
                background-color: $body-tertiary-bg-dark;
                color: $body-color-dark;
                border-color: $border-color-dark;
            }
        }



        &:not(.thead-light) .tabulator-header {
            background-color: $body-bg-dark;
            color: $body-color-dark;
            border-color: $border-color-dark;

            .tabulator-col {
                background-color: $body-bg-dark;
                &:hover {
                    background-color: $body-tertiary-bg-dark;
                    color: $body-color-dark;
                    border-color: $border-color-dark;
                }

                .tabulator-header-filter {
                    input {
                        background-color: $body-bg-dark;
                        border: 1px solid $border-color-dark;
                        color: $body-color-dark;
                        &:focus {
                            color: $body-color-dark;
                            background-color: $body-bg-dark;
                            border: 1px solid $primary;
                        }
                    }
                }
            }
        }

        .tabulator-footer {
            background-color: $body-tertiary-bg-dark;
            color: $body-color-dark;
            border-color: $border-color-dark;
        }

        .tabulator-cell {
            background-color: $body-bg-dark;
            color: $body-color-dark;
            border-color: $border-color-dark;

            &:hover {
                background-color: $body-tertiary-bg-dark;
                color: $body-color-dark;
                border-color: $border-color-dark;
            }
        }
    }
}

This is a crude example and something might still be light, but the idea.

[BartNSTCL]

Looking to see when this will be merged into a release

[DastardlySky]

@liepumartins, thanks for pointing that out, I've now amended it so that it will also work with Bootstrap 5's color modes e.g. the data-bs-theme attribute

[DastardlySky]

Minimal reproducible example:
https://jsfiddle.net/2uwrjp4z/115/

data-bs-theme="light"

data-bs-theme="dark"

[rathboma]

Thanks for the contribution! This looks fine for me. Thanks for the community review.