Add theme select (dark CSS inside)

[francislavoie]

I love the default look, but I'd love a dark theme even more. Are there plans to make a few basic themes built-in? Or has someone already made a dark theme I could use? I'm not too sure where I should be looking.

Thanks!

[hacdias]

I don't know if someone had made a dark theme. However, if you're willing to, you can build your own theme and add the CSS on Settings.

[francislavoie]

I ended up tossing together a dark theme. Here's an example:

body, #login {
  background-color: #303030;
}

header {
  background-color: #1b1b1b;
}

.action,
#breadcrumbs,
#breadcrumbs span,
.dashboard #nav,
#listing.mosaic h2,
#login h1 {
  color: rgba(255, 255, 255, 0.7);
}

#listing.list .item.header {
  color: rgba(255, 255, 255, 0.7);
  background: #616161;
}

#listing.list .item,
#listing.mosaic .item {
  background-color: #424242;
  color: rgba(255, 255, 255, 0.7);
}

.dashboard {
  background: #424242;
  color: rgba(255, 255, 255, 1.0);
}

select,
textarea,
input,
.dashboard textarea,
.dashboard #locale,
.dashboard input[type=password],
.dashboard input[type=text] {
  background: #212121;
  color: rgba(255, 255, 255, 0.9);
  border-color: #303030;
}

select,
.dashboard input[type=password],
.dashboard input[type=text],
.dashboard select {
  padding: 8px;
}

#search #input {
  background-color: #424242;
  color: rgba(255, 255, 255, 0.7);
}

#search.active #input>.action i,
#search.active input,
#search.active #input,
#login input[type=password], #login input[type=text] {
  background-color: #303030;
  color: rgba(255, 255, 255, 0.7);
}

#search #result {
  background-color: #212121;
  color: rgba(255, 255, 255, 0.7);
}

#search #result .boxes,
.card {
  background-color: #424242;
  padding: 0 15px 15px 15px;
}

#search #result .boxes h3,
.card h2,
.card h3,
.card p,
.card-content {
  color: rgba(255, 255, 255, 0.7);
}

#nav li {
  padding-top: 1em !important;
}

nav.active, #dropdown.active {
    background-color: rgb(51, 51, 51);
}

#file-selection {
    background: #303030;
}

@hacdias if you look at the spots I added padding, I'd suggest considering using those in your base theme, to give a few of the elements a bit more room to breathe. The rest is just color changes.

[Equim-chan]

I would like to do some edit.

diff --git a/a b/b
index f25b97b..f02931f 100644
--- a/a
+++ b/b
@@ -57,7 +57,8 @@ select,

 #search.active #input>.action i,
 #search.active input,
-#search.active #input {
+#search.active #input,
+#login input[type=password], #login input[type=text] {
   background-color: #303030;
   color: rgba(255, 255, 255, 0.7);
 }
@@ -67,11 +68,15 @@ select,
   color: rgba(255, 255, 255, 0.7);
 }

-#search #result .boxes {
+#search #result .boxes,
+.card {
   background-color: #424242;
   padding: 0 15px 15px 15px;
 }

-#search #result .boxes h3 {
+#search #result .boxes h3,
+.card h2,
+.card h3,
+.card p {
   color: rgba(255, 255, 255, 0.7);
-}
\ No newline at end of file
+}

[francislavoie]

Thanks @Equim-chan, I hadn't updated to the latest version of the plugin. I made your fixes, plus added another at the bottom to fix a weird thing with the nav on the settings page. Updated my above comment.

[TheChiefMeat]

I would like to add a small addition to the Dark Theme, specifically the following code that fixes the popout menus for mobile devices; before they were entirely white, but now it follows the same colour scheme.

nav.active, #dropdown.active {
    background-color: rgb(51, 51, 51);
}

[francislavoie]

Thanks! Updated my above comment.

[TheChiefMeat]

No worries, have another small update for you; This fixes the white box on mobile when selecting an image. Before you were unable to see any of the buttons to share etc.

#file-selection {
background: #303030;
}

[hacdias]

The new version will support global styles set by the admin via custom CSS files and you will also be able to replace the logo. If someone makes a good dark theme, please open a PR/issue on filebrowser/frontend.