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.

Sign up for GitHub

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

Jump to bottom

Dark mode in new version of dataTables #1085

Open
stla opened this issue Sep 11, 2023 · 22 comments
Open

Dark mode in new version of dataTables #1085

stla opened this issue Sep 11, 2023 · 22 comments

Comments

@stla
Copy link
Collaborator

stla commented Sep 11, 2023 •
edited

@yihui

The latest version of dataTables has a dark mode. Do you think we can enable it and how if we upgrade?
@yihui
Copy link
Member

yihui commented Sep 11, 2023

Yes, we can try to upgrade DataTables.

@stla
Copy link
Collaborator Author

stla commented Sep 11, 2023

Ok, maybe I'll do the upgrade this week.

But how to assign the class dark?

@yihui
Copy link
Member

yihui commented Sep 11, 2023

But how to assign the class dark?

I don't think you can do it in DT. At least it's not straightforward. You'll have to use JavaScript as instructed at https://datatables.net/manual/styling/dark-mode

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

Nothing works :-(

issueDTdark

Should I download everything here:

DTdownload

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

Wait, I did something wrong. I restart.

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

It works, but I don't see any darkness

dt_not_dark

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

I did

library(shiny)
library(bslib)
library(DT)

js <- '
$(document).ready(function() {
  $("html").attr("data-bs-theme", "dark");
});
'

ui <- page_sidebar(
  tags$head(
    tags$script(
      HTML(js)
    )
  ),
  DTOutput("dtable"),
  sidebar = sidebar()
)

server <- function(input, output, session) {
  
  output[["dtable"]] <- renderDT({
    datatable(iris)
  })
  
}

shinyApp(ui, server)

Not dark. Looks like a css is missing?

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

Hmm when I select some rows they are darker than usual:

dtdarkselect

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

I tried

$("html").attr("data-bs-theme", "dark")

and $("html").addClass("dark")

That' strange because I can see the html.dark in the inpector tools. I also tried different values of the styling argument of datatable. I tried with and without bslib.

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

Now I get some errors. This is totally crazy.

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023 •
edited

I managed to get something dark outside shiny, using Bootstrap 5-3-2. But this is too dark!

dtedge

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

I abdandon.

@yihui
Copy link
Member

yihui commented Sep 18, 2023 •
edited

Well, this looks complicated indeed, but I think at least you need to tell DT to use the Bootstrap theme (e.g., datatable(style = 'bootstrap'). I don't think the default theme will work with the dark mode.

I also tried different values of the styling argument of datatable. I tried with and without bslib.

It's style instead of styling (not sure if it was just a typo).

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

Yes, it was just a typo.

I've just managed to get it outside Shiny !!:

dtdark

Beautiful! Except the paging.

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023 •
edited

Note that I got this one with Bootstrap 5-3-2 (downloaded the files on the datatables website).

What should I download otherwise ? bslib only supports 5-2 I believe.

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023 •
edited

No way with Bootstrap 4. I think it requires Bootstrap 4-6-0 and I see older versions in the <head>.

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

I abandon again.

So to sum up you have to add Bootstrap 5-3-2 as a HTML dependency and it works outside Shiny (up to the ugly pagination).

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

With style = "bootstrap4 the pagination is nice (still outside Shiny):

dtdarkbs4

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

WORKS IN SHINY !!!!!!!

The "trick" was to put Bootstrap-5.3.2 in the www folder.

dtdarkshiny

library(shiny)
library(DT)

ui <- fluidPage(
  tags$head(
    tags$link(href="bootstrap-5-3-2/css/bootstrap.min.css", rel="stylesheet"),
    tags$script(src="bootstrap-5-3-2/js/bootstrap.min.js")
  ),
  DTOutput("dtable"),
)

server <- function(input, output, session) {
  
  output[["dtable"]] <- renderDT({
    dtable <- datatable(
      iris, style= "bootstrap4", 
      options = list(initComplete = JS(
        'function() {$("html").attr("data-bs-theme", "dark");}')
      ))
  })
  
}

shinyApp(ui, server)

@stla
Copy link
Collaborator Author

stla commented Sep 18, 2023

What do we do? Even if the dark mode is suspicious, we can upgrade DataTables. We are not obliged to use the dark mode. I do a PR or not?

@yihui
Copy link
Member

yihui commented Oct 3, 2023

You can try to upgrade: https://github.com/rstudio/DT/blob/main/tools/update_DT.R The tricky thing is always testing. Thanks!

@stla
Copy link
Collaborator Author

stla commented Oct 3, 2023

Ok, will do soon. And maybe the dark mode works with bslib, I don't remember whether I tried or not...

@gadenbuie gadenbuie mentioned this issue Oct 3, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yihui @stla