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

Add theme select (dark CSS inside) #208

Closed
francislavoie opened this Issue Aug 17, 2017 · 8 comments

Comments

Projects
None yet
5 participants
@francislavoie
Copy link

francislavoie commented Aug 17, 2017

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

This comment has been minimized.

Copy link
Member

hacdias commented Aug 17, 2017

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

This comment has been minimized.

Copy link

francislavoie commented Sep 3, 2017

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

This comment has been minimized.

Copy link
Member

Equim-chan commented Oct 13, 2017

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

This comment has been minimized.

Copy link

francislavoie commented Oct 13, 2017

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

This comment has been minimized.

Copy link

TheChiefMeat commented Mar 22, 2018

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

This comment has been minimized.

Copy link

francislavoie commented Mar 22, 2018

Thanks! Updated my above comment.

@TheChiefMeat

This comment has been minimized.

Copy link

TheChiefMeat commented Mar 23, 2018

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

This comment has been minimized.

Copy link
Member

hacdias commented Jan 6, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment