Dark Material Design


(@SenpaiMass) #1

Before I go any further, These codes do not belong to me, I just merged both the codes, add changes Color codes thats about it. So the real credit goes to @rewphus and @erlend_sh.

This is to kick start your forum if you want a dark theme, if you want a light theme please visit the link below for original codes by folks who made this. So you don’t have to go to the trouble of searching every corner possible. I will also explain the icons used in forums and the dimensions used with best of my knowledge.

For Material design:

For Dark Theme:
https://meta.discourse.org/t/css-theme-for-hub-jmonkeyengine-org/24468?source_topic_id=36531

How it looks?


Live
https://discuss.moe
Edit: i am on a 720p resolution so the Create topic seems closer but on a bigger setup its just fine.

Latest

Categories

Admin Panel


Codes

PS- You have to apply all these to get the results as shown in the images above.

1. Basic Black Theme -

CSS Desktop

//overrides all fonts
//@import url(https://fonts.googleapis.com/css?family=Orbitron:300italic,400italic,700italic,300,400,800,700);
//html * {
//   font-family: "Orbitron", Helvetica, arial,sans-serif;
//}

code font for this text area
.ace_scroller{
    font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
}
//changed the back ground of banner posts as it was too bright
#banner{
background : #9999b9;    
}

//fixed and issue on sfarie that made the text blik when the animation was performed
.discourse-no-touch .post-cloak .gutter .reply-new {
transition: none;
}

//code font for code blocks
body code *, body pre  *{
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
word-wrap: initial;
white-space: pre;
font-size:0.9rem;
}
//hide suggested posts block
.ember-view > #suggested-topics{
    display:none;
}
//badges title
.ember-view > .user-title{
 background: #333333;
color: #585858;
font-weight: bold;
padding-left: 6px;
}

//fix for github code blocks
pre.onebox code ol.lines li:before {
    background: #222;
    line-height: 1.5em;
}
pre.onebox code ol.lines li {
    border-left: 1px solid #555;
    min-height: 1em;
}
pre.onebox code li {
    background-color: #222;
}

//Code Highlighting Style (see https://highlightjs.org/static/demo/ and https://github.com/isagalaev/highlight.js/tree/master/src/styles)
/*
vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
*/

/*background color*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #1d1f21;
  -webkit-text-size-adjust: none;
}

/*selection color*/
.hljs::selection,
.hljs span::selection {
	background: #373b41;
}
.hljs::-moz-selection,
.hljs span::-moz-selection {
	background: #373b41;
}

/*foreground color*/
.hljs,
.hljs-setting .hljs-value,
.hljs-expression .hljs-variable,
.hljs-expression .hljs-begin-block,
.hljs-expression .hljs-end-block,
.hljs-class .hljs-params,
.hljs-function .hljs-params,
.hljs-at_rule .hljs-preprocessor {
  color: #c5c8c6;
}

/*color: fg_yellow*/
.hljs-title,
.hljs-function .hljs-title,
.hljs-keyword .hljs-common,
.hljs-class .hljs-title,
.hljs-decorator,
.hljs-tag .hljs-title,
.hljs-header,
.hljs-sub,
.hljs-function {
  color: #f0c674;
}

/*color: fg_comment*/
.hljs-comment,
.hljs-javadoc,
.hljs-output .hljs-value,
.hljs-pi,
.hljs-shebang,
.hljs-doctype {
  color: #707880;
}

/*color: fg_red*/
.hljs-number,
.hljs-symbol,
.hljs-literal,
.hljs-deletion,
.hljs-link_url,
.hljs-symbol .hljs-string,
.hljs-argument,
.hljs-hexcolor,
.hljs-input .hljs-prompt,
.hljs-char {
 color: #cc6666
}

/*color: fg_green*/
.hljs-string,
.hljs-special,
.hljs-javadoctag,
.hljs-addition,
.hljs-important,
.hljs-tag .hljs-value,
.hljs-at.rule .hljs-keyword,
.hljs-regexp,
.hljs-attr_selector {
  color: #b5bd68;
}

/*color: fg_purple*/
.hljs-variable,
.hljs-property,
.hljs-envar,
.hljs-code,
.hljs-expression,
.hljs-localvars,
.hljs-id,
.hljs-variable .hljs-filter,
.hljs-variable .hljs-filter .hljs-keyword,
.hljs-template_tag .hljs-filter .hljs-keyword {
 color: #b294bb;
}

/*color: fg_blue*/
.hljs-statement,
.hljs-label,
.hljs-keyword,
.hljs-xmlDocTag,
.hljs-function .hljs-keyword,
.hljs-chunk,
.hljs-cdata,
.hljs-link_label,
.hljs-bullet,
.hljs-class .hljs-keyword,
.hljs-smartquote,
.hljs-method,
.hljs-list .hljs-title,
.hljs-tag {
 color: #81a2be;
}

/*color: fg_aqua*/
.hljs-pseudo,
.hljs-exception,
.hljs-annotation,
.hljs-subst,
.hljs-change,
.hljs-cbracket,
.hljs-operator,
.hljs-horizontal_rule,
.hljs-preprocessor .hljs-keyword,
.hljs-typedef,
.hljs-template_tag,
.hljs-variable,
.hljs-variable .hljs-filter .hljs-argument,
.hljs-at_rule,
.hljs-at_rule .hljs-string,
.hljs-at_rule .hljs-keyword {
  color: #8abeb7;
}


/*color: fg_orange*/
.hljs-type,
.hljs-typename,
.hljs-inheritance .hljs-parent,
.hljs-constant,
.hljs-built_in,
.hljs-setting,
.hljs-structure,
.hljs-link_reference,
.hljs-attribute,
.hljs-blockquote,
.hljs-quoted,
.hljs-class,
.hljs-header {
  color: #de935f;
}

.hljs-emphasis
{
  font-style: italic;
}

.hljs-strong
{
  font-weight: bold;
}

CSS Mobile

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,800,700);

html * {
   font-family: "Open Sans", Helvetica, arial,sans-serif;
}
.ember-view > #suggested-topics{
    display:none;
}

#reply-control .contents #wmd-input, #reply-control .contents #wmd-preview {
color: #eeeeee;
}

As you can see i have highlighted the All fonts, just because i like the default discourse fonts. Upto you to change that.

Okay once you do this, You are set with the Dark theme (Interface)

Now Comes adding the Material design engineered by @rewphus


2. Material Design

Category Boxes. CSS

tr.has-logo td.stats,tr.has-logo td.category,tr.has-logo td.latest{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
}

Category Split CSS

//add space between categories

.topic-list.categories{  
      border-spacing: 0 1em;
      border-collapse: separate;
      border-top: 2px solid #111111;
}

.topic-list.categories th, .topic-list.categories td {
    padding: 0 15px 0 15px;
}

//remove zebra stripes

.topic-list.categories>tbody>tr:nth-child(odd), .topic-list.categories>tbody>tr:nth-child(even) {  
    background-color: #222222;
   // border-top: 3px solid #f3c802;
}

Navigational Borders CSS

.nav-pills>li.active>a, .nav-pills>li>a.active {
  color: #acacac;
  font-weight: 500;
  background-color: #222222; //matches main bg color
  border-bottom: 3px solid #f3c802;
}

Remove Zebra CSS

// Remove Zebra Stripes
.topic-list>tbody>tr:nth-child(odd), .topic-list>tbody>tr:nth-child(even){
    background-color: #222222 !important;
    border-bottom: 1px solid #111111;
}

.topic-list>tbody>tr:first-of-type {
  border-top: 2px solid #f3c802;
}

//add shadow behind the list of topics
.topic-list{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: #222222;
  border-collapse: collapse;
}

By adding all this you are almost done now its where you add a (+) Create topic button.

Create Topic

CSS

.list-controls #create-topic.btn-default .fa-plus:before {
  content: "\f067";
  position: relative;
  right: -12.85em;
}

.list-controls .btn-default[title="New Topic"] {
    padding: 22px 15px 22px 5px !important;
}
    

#create-topic.btn-default {
  border-radius: 40px;
  position: fixed;
  bottom: 30px;
  right: 50px;
  z-index: 999;
  padding: 22px 20px 22px 5px;
  background-color: #333333;
  color: #acacac;
  text-indent: -157px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    overflow:hidden;
}

#create-topic.btn-default{
    width: 63px;
    height: 63px;
    color: #333333;
    -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
    transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
}

#create-topic.btn-default .fa-plus{
    color: #acacac;
}

#create-topic.btn-default:hover{
  text-indent: 0px;
  width: 190px;
  color: #acacac;
}

#create-topic.create-clicked{
  width: 100% !important;
  height: 390px;
  visibility: hidden;
  background-color: #d8d8d8;
  position: fixed;
  right: 0px;
  bottom: 0px;
  border-radius: 0px;
  text-indent: -9999px;
}

.new-controls{
    top: 100px !important;
    bottom: 45px !important;
}

#reply-control.edit-title{
    -webkit-transition: width .2s ease, height .2s ease-in .4s, -webkit-transform .5s;
    transition: width .2s ease, height .2s ease-in .4s, transform .5s;
}

//Return Topic Edit button to original position
.list-controls .btn-default[title="Edit"] {
  border-radius: 0px;
  position: inherit;
  z-index: 999;
  padding: 6px 12px;
  background-color: #333333;
  color: #acacac;
  text-indent: 0px;
  -webkti-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
  -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

At Embedded CSS add

Discourse.PageTracker.current().on('change', function () {

        $('.list-controls').on('click', '#create-topic', function(){
            $('#create-topic').addClass('create-clicked');
            setTimeout(function() {$('#reply-control').appEvents.trigger("composer:opened");},650);
        });
        
        $('#main').on('click', '.cancel', function(){
            $('#create-topic').removeClass('create-clicked');
            $('#reply-control').addClass('hidden');
            setTimeout(function() {$('#reply-control').removeClass('hidden');},650);
            $('#reply-control').appEvents.trigger("composer:closed");
        });
        
        $('#main').on('click', '.toggler', function(){
            $('#create-topic').removeClass('create-clicked');
            $('#reply-control').addClass('hidden');
            setTimeout(function() {$('#reply-control').removeClass('hidden');},650);
            $('#reply-control').appEvents.trigger("composer:closed");
        });

    });

Okay you are done.

Now about selecting icons for categories so you get borders. Select 36x36 with the color of your choice.

I personally use
https://materialdesignicons.com/
But there are several out there.

Good Luck with your new community!

Thanks to @Fixit , to motivate me to make this post


Dark theme with block posts
Adding "+ New Topic" button on every page
Adding "+ New Topic" button on every page
#3

Hello Alankrit !

Amazing! really very grateful for help me with my forum!, and congrats want share your custom theme with the community (credit goes to @rewphus).
A nicest person Alankrit!

Regards
Daniel


(Tom Kiblin) #4

Being extremely new to Discourse, do these changes stick between upgrades?

Thanks for this!!


(@SenpaiMass) #5

I keep my setup up to date with latest discourse commits. Till date its working fine.


(Steven Greco) #6

Thanks for sharing. Love the dark theme. Have incorporated some of this into my forums.


(m0py) #7

This is so cool! Thank you so much for sharing!


#8

Fantastic work. Thanks for sharing it! :ok_hand:


(@SenpaiMass) #9

This is the contrast selection for #222222 Background and #acacac text which i am getting.

I tried #ffffff it works fine on the passings, but it is extremely bright to read a content/post. Any one has better suggestions please?


(Dilukevin) #10

this is amazing. it’s true


(@SenpaiMass) #11

@Sam

This is quoted from other post.
My question is would it affect the css overall?


(@SenpaiMass) #12

This is the new Colors.
#DFDFDF with that i am able to pass the contrast.Updated the first post as well




(Angel Garcia) #13

Looks great, thanks for sharing :slightly_smiling:


(Marco) #14

Amazing work!!!
I took inspiration from this topic (only color):

And then I’ve got some code from your post.
I have a question for you. How do I add icons?


(@SenpaiMass) #15

You can upload them via
Category >Edit > Images> Category logo images.


(@SenpaiMass) #16

The post is now a Wiki. :slightly_smiling:

Also here is the way your can customize a better looking banner. The way we are using. Really simple.
You need to Edit CSS Desktop(Above).

From

//changed the back ground of banner posts as it was too bright
#banner{
background : #9999b9;    
}

TO

//changed the background color and added image.
#banner{
background-image: url('YOUR_IMAGE_URL_HERE');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
background-color: HEX_COLOR_OF_YOUR_CHOICE;
}

(Erlend Sogge Heggen) #17

Could this be merged into the stock Material theme now?


(Sam Saffron) #18

Any chance you could publish this as a #plugin:theme @Alankrit_Choudh ?


(DjCyry) #19

Nice style , i think i will use it in mu forum . Thanks