DataTables logo
≡

Styling issue with Dark mode in Bulma

Styling issue with Dark mode in Bulma

WernfriedWernfried Posts: 61Questions: 14Answers: 0
in Free community support

I use Bulma dark styling as advised in Dark mode:

<html class="theme-dark dark" data-color-scheme="dark" data-theme="dark">

<table class="table is-bordered is-striped is-hoverable" id="dataTable"></table>

and table looks like this

However, when I adddata-bs-theme="dark" then the table looks fine. But I don't think this is by intention.

Kind Regards
Wernfried

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 66,178Questions: 1Answers: 11,039 Site admin

    Hi Wernfried,

    On this page, with Bulma and dark mode selected, if I run:

    DataTable.Dom.s('#example').classAdd('table is-bordered is-striped is-hoverable')

    in the console, it appears okay.

    I see you've got arrows in the first column, which suggests Responsive might be getting used? I've just tried on a Responsive example as well, but it also seems fine (although the arrows should probably be lighter rather than darker!).

    Can you let me know how I can reproduce the error? Most likely I've just forgotten to include the Bulma dark mode flag somewhere, but I'm not sure where!

    Allan

  • WernfriedWernfried Posts: 61Questions: 14Answers: 0

    Hi Allan

    Sure, I use extension Buttons, ColReorder, ColumnControl, DateTime, FixedHeader, Responsive, Scroller, Select, StateRestore

    https://cdn.datatables.net/v/bm/dt-3.1.5/b-4.1.3/cr-3.1.2/cc-2.1.3/date-2.1.3/fh-5.1.2/r-4.1.1/sc-3.1.1/sl-4.1.1/sr-2.2.0/datatables.js
https://cdn.datatables.net/v/bm/dt-3.1.5/b-4.1.3/cr-3.1.2/cc-2.1.3/date-2.1.3/fh-5.1.2/r-4.1.1/sc-3.1.1/sl-4.1.1/sr-2.2.0/datatables.css

    Best Regards
    Wernfried

  • allanallan Posts: 66,178Questions: 1Answers: 11,039 Site admin
    Answer ✓

    Got it - thank you. The issue was in Scroller and I've committed a fix here. The fix will be in the next patch release of Scroller.

    Allan

Sign In or Register to comment.