This topic has been superseded by the official theme itself: Material Design Theme
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:
https://meta.discourse.org/t/material-design-for-discourse/28864
For Dark Theme [Edit: this link is broken]:
https://meta.discourse.org/t/css-theme-for-hub-jmonkeyengine-org/24468
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
But there are several out there.
Good Luck with your new community!
Thanks to @Fixit , to motivate me to make this post
