Dark theme for web UI

Development UX
1

Hi guys,
I made a white-on-black theme for the syncthing UI (screenshot attached), for use with the stylish add-on. The theme is available on userstyles.org.
I hope someone can find it useful or send suggestions to improve it.


screen.png1366Ă—720 82.3 KB

6 Likes
2

Looks great, we should really add better theme support.

3

Yes, it’s great indeed! Nevertheless I would avoid absolutely black background preferring dark gray one. Then it can be default official theme :slight_smile:

4

Using it now. Great theme. I feel happier on the dark side…

5

Bravo. Well done.

6

Excellent. I am a great fan of dark themes. Installed it and it looks great! Thank you very much. I had been wanting something like this but am not familiar enough with css to create it myself.

7

You can easily edit the theme (your stylish add-on gives you the option of editing all your styles) - there is a dark background color at the top of the theme. You can experiment replacing that with “grey” or a hex number that corresponds to a color you like. You can find the number corresponding to a color for example here: https://duckduckgo.com/?q=color+picker+hex&t=ffnt&ia=colorpicker.

8

Just don’t want to make a browser depending on additional extension.

9
1 Like
10

So this is now part of Syncthing. One thing I’ve noticed wasn’t styled, was the tooltips when you hover on failed discovery servers for example.

1 Like
11

What does that mean? We’ll see theme choices in the next update?

12

Yes.

13

Here is a slight improvement for this Theme. (Increased Brightness for Background and Borders)

Complete Black Background is imho a little bit too dark… :smiley:

(Left: new, Right: Original)

sttheme.jpg1224Ă—476 190 KB

--- stold.css   2016-01-11 18:30:08.464203355 +0100
+++ stnew.css   2016-01-11 18:42:53.156194436 +0100
@@ -2,7 +2,7 @@

   body {
         color: #aaa !important;
-        background-color: black !important;
+        background-color: #171717 !important;
   }
   a:hover,a:focus,a.focus{
         outline: none !important;
@@ -53,7 +53,7 @@
              border-width: 2px !important;
   }
   .panel-default {
-        border-color: #222 !important;
+        border-color: #272727 !important;

   }
   .panel-default>.panel-heading {
1 Like
14

@fti7, I share your feeling absolutely! :slightly_smiling:

15

I’ll adopt the changes, once the bikeshedding has converged. :wink:

(Or in a day or two)

16

Well, if it were put to a vote, I like the dark one. The new one looks sun-bleached.

17

I’m glad my theme was appreciated and is now built into Syncthing :slight_smile:
I personally prefer the full dark background, but of course anyone can make his own variations.

18

I would prefer the darker one as well. The slightly lighter one just feels “faded”.

19

There is a ticket for that:

20

I meant they are unstyled in the dark theme