Dark Theme for Discourse

Website, Documentation, and Discourse
1

https://github.com/SuperTux88/DiasporaDiscourseDarkTheme

https://userstyles.org/styles/140419/diaspora-discourse-forum-dark (No rainbow left bar version)

4 Likes
2

test
test
test
#test
##test

print("Hello World!")

-old code
+new code
1 2
a b 
test

test

test

  • List item
  1. 2
Summary

This text will be hidden

  • test poll
  • option2
  • option3

0 voters

Show results
3

Cool, is this on github somewhere?

I removed the

	* {
		border-color: #333 !important;
	}

at the beginning to fix the rainbow on the index page.

Then I added

	hr,
	.category-list tbody tr,
	.topic-list > tbody > tr,
	.topic-map .buttons .btn,
	.dropdown-menu,
	.popup-menu,
	#topic-progress,
	#topic-progress .bg,
	.admin-contents table tr td,
	.admin-list-item {
		border-color: #333 !important;
	}

to fix some borders again (Because I removed the *). I’m not sure if this is complete, but I fixed all borders that I found while clicking around a bit.

I also added this

	.category-list tbody .category h3 a[href] {
		color: #333;
	}
	
	body .boxed.white {
		background-color: #1B1B1B
	}
	
	.dashboard-stats table th,
	.admin-controls,
	.staff-actions .heading-container {
		background-color: #333
	}

to fix some admin styles :slight_smile:

5

Thx for the patch, added :grinning: I’m just too lazy to deal with borders :stuck_out_tongue: Also I don’t upload it to github. Unlike Diaspora*, it seems Discourse still doesn’t support customizing theme, so it basically depends on addon like Stylish to work. But still version control helps keep codes transparent, track bugs, etc. I’m not very interested to maintain one, if you like, you can create one and next time I will submit patch to it.

6

Thanks :slight_smile:

Github is a easy way for others to provide patches (I would have made a Pull-Request instead of posting the changes here). But maybe I create one if you don’t want to do it, when I need to change something next time. For now the current version works for me :thumbsup:

1 Like
7

Sorry, new users can only put one image in a post.

8

10

You broke the rainbow again?

The

	* {
		 border-color: #333 !important;
	}

is there again, the other styles are still there, but the * breaks the rainbow again :scream_cat:

11

Sorry, when I check deep some pages, there are really quite some bright borders need to modify. But it’s back now! Thanks to regular express support

@-moz-document regexp("https:\/\/discourse\.diasporafoundation\.org\/[0-9A-Za-z?!].*") {
        * {
        border-color: #333 !important;
    }
    
}
1 Like
12

Thanks, seems to work.

You removed the transparence from the user-cards:

This:

	#user-card .card-content {
		background: none repeat scroll 0% 0% #242424;
	}

should be:

	#user-card .card-content {
		background: none repeat scroll 0% 0% rgba(54, 54, 54, 0.85);
	}

Same for profile:

	.user-main .about.collapsed-info .details {
		background-color: #1b1b1b;
		border-bottom: 1px solid rgb(45, 45, 45);
	}

should be:

	.user-main .about.collapsed-info .details {
		background: none repeat scroll 0% 0% rgba(56, 56, 56, 0.85);
		border-bottom: 1px solid rgb(45, 45, 45);
	}

And:

	.user-main .about .details {
		background-color: #1b1b1b;
	}

should be:

	.user-main .about .details {
		background: none repeat scroll 0% 0% rgba(56, 56, 56, 0.85);
	}
13

No, the regex doesn’t work, because stylish loads the styles based on the page where you load the page. So when you open https://discourse.diasporafoundation.org, you have bright borders everywhere (even when you load a thread, because discourse loads it with ajax), and if you open a thread and then click on the logo, you have a broken rainbow :crying_cat_face: Only when you press F5 the rainbow works, because it is a fresh load and stylish loads the styles again then.

I just removed the * again locally. Where do you have bright borders that are too bright? Yes, I see a difference, but I think it doesn’t look bad without the * selector for the borders.

14

Wait a minute …
I understand now, that’s so funny :joy: I will try if I can do anything, if can’t, I still prefer sacrifice the rainbow border, anyway I guess those bright borders aren’t due to that block of code, and you know, there are really quite a lot.

And the transparence is added back, though I use some darker color.

1 Like
15

Thanks for the transparency.

I now edited it locally (after updating again from the userstyles website) and removed the second @-moz-document block with the regex and the *, and then it looks OK for me (so I’m happy :wink: ). I don’t see any disturbing bright borders. Can you tell me which borders you mean? Maybe we can style them darker explicitly, so we don’t need the * selector anymore.

16

It seems Chromium doesn’t suffer this problem, but have other problem XD like I’ve silented the animation of new post, and it doesn’t work on it. I think respectively it’s not efficient if I keep reporting border color problems to you, and I prefer to leave that cat there :stuck_out_tongue: until a better solution.

17

I’ve created a github repository without that block of code, and I will also update my code there. You can fork it and develop your own version, and I’ll add your repository link to my post and Userstyle.org page, and let other users report bright border issues to you :smile_cat: https://github.com/stbinan/DiasporaDiscourseDarkTheme

1 Like
18

Shouldn’t that be open upstream as a new possible theme for discourse?

19

Well, discourse has themes, but only the admins could change them and there was no way to make users able to change their themes. But 30 minutes ago, this changed. Check your user settings:

Some more fine-tunings will be made to that, but it’s a good start. :wink:

5 Likes
20

Just for the record, I’ve moved this post out of the playground since it’s now officially retired.