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.

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

Dark mode supports #15

Open
leandrocmaia opened this issue Nov 15, 2023 · 2 comments
Open

Dark mode supports #15

leandrocmaia opened this issue Nov 15, 2023 · 2 comments
Labels
enhancement New feature or request

Comments

@leandrocmaia
Copy link

Hi, is there a way to integrate it with tailwindcss? More specifically to enable darkmode in my app.

Thank you

@leandrocmaia leandrocmaia changed the title Dark mode Tailwind integration Nov 15, 2023
@bhaveshpatel200 bhaveshpatel200 added the enhancement New feature or request label Nov 20, 2023
@bhaveshpatel200
Copy link
Owner

Hi Leandro Maia,

Currently we are not providing darkmode but will add in near future.
But you can add darkmode class in table and add css based on that class for all inner elements using tailwind css.
you can check all framework guides for tailwind css from below url.
https://tailwindcss.com/docs/installation/framework-guides

@bhaveshpatel200 bhaveshpatel200 changed the title Tailwind integration Dark mode supports Dec 15, 2023
@FZ-Iskandar
Copy link

I'm leaving this here just in case it can help another in the future.

This is how I have made my dark theme for a vuetify style vue app:

.v-theme--dark .bh-datatable {
  & table thead tr,
    table tbody tr,
    table tfoot tr {
    background-color: #1f1f1f;
    color: #fff;
  }

  & table tbody tr:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(99, 99, 99, var(--tw-bg-opacity))!important;
  }

  & .bh-form-control {
    background-color: #2c2c2c !important;
    color: #fff !important;
  }

  & .bh-filter-menu button {
    background-color: #1f1f1f;
    color: #fff;
  }

  & .bh-pagination {
    background-color: #2b2b2b;
    color: #fff;
  }
  
  & .\!bh-bg-white {
    background-color: #2c2c2c!important;
    color: #fff!important;

    & .bh-skeleton-box {
      background-color: #3e3e3e!important;
      color: #fff!important;
    }
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants