# （已取代）Dark Material 设计
**URL:** https://meta.discourse.org/t/superseded-dark-material-design/36531
**Category:** Development
**Tags:** how-to
**Created:** [2015年十二月10日 15:28 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531 "2015-12-10T15:28:29Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [2015年十二月10日 15:28 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/1 "2015-12-10T15:28:29Z")
> ℹ This topic has been superseded by the official theme itself: [Material Design Theme](https://meta.discourse.org/t/material-design-stock-theme/47142#dark-9)
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](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](https://meta.discourse.org/t/css-theme-for-hub-jmonkeyengine-org/24468)
## **How it looks?**
* * *
**Live**
[https://discuss.moe](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**
```plaintext
//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**
```plaintext
@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** _
```plaintext
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** _
```plaintext
//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** _
```plaintext
.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** _
```plaintext
// 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**
```plaintext
.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
```plaintext
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
> **[Material Design Icons - Icon Library - Pictogrammers](https://pictogrammers.com/library/mdi/?welcome)**
>
> The original. Following Google's Material Design guidelines for system icons, MDI is our largest library, touting over 7200 unique icons!
But there are several out there.
Good Luck with your new community!
Thanks to @Fixit , to motivate me to make this post
---
### Author:  [@Fixit](https://meta.discourse.org/u/Fixit)
#### Post date: [2015年十二月10日 19:26 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/3 "2015-12-10T19:26:11Z")
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](https://meta.discourse.org/t/material-design-for-discourse/28864)).
A nicest person Alankrit!
Regards
Daniel
---
### Author:  [@tkiblin](https://meta.discourse.org/u/tkiblin)
#### Post date: [2015年十二月11日 03:27 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/4 "2015-12-11T03:27:09Z")
Being extremely new to Discourse, do these changes stick between upgrades?
Thanks for this!!
---
### Author:  [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [2015年十二月11日 04:04 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/5 "2015-12-11T04:04:23Z")
I keep my setup up to date with latest discourse commits. Till date its working fine.
---
### Author:  [@Grex315](https://meta.discourse.org/u/Grex315)
#### Post date: [2015年十二月11日 14:03 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/6 "2015-12-11T14:03:50Z")
Thanks for sharing. Love the dark theme. Have incorporated some of this into my forums.
---
### Author:  [@m0py](https://meta.discourse.org/u/m0py)
#### Post date: [2015年十二月11日 21:44 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/7 "2015-12-11T21:44:15Z")
This is so cool! Thank you so much for sharing!
---
### Author:  [@PabloC](https://meta.discourse.org/u/PabloC)
#### Post date: [2015年十二月12日 20:00 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/8 "2015-12-12T20:00:16Z")
Fantastic work. Thanks for sharing it! 👌
---
### Author:  [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [2015年十二月17日 18:04 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/9 "2015-12-17T18:04:43Z")
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?
---
### Author:  [@dilukevin](https://meta.discourse.org/u/dilukevin)
#### Post date: [2015年十二月18日 06:09 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/10 "2015-12-18T06:09:01Z")
this is amazing. it’s true
---
### Author:  [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [2015年十二月19日 11:33 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/11 "2015-12-19T11:33:28Z")
@Sam
> [@](#):
>
> On my personal goal list:
>
> ```
> Reduce initial JS payload by at least half
> Improve js render time of front page by at least 30%
> Improve js render time of topic page by at least 50%
>
> ```
>
> On @eviltrout’s list is
>
> ```
> eliminate es6 bundling overhead (at least 200ms on desktop)
> Improve general performance
>
> ```
>
> Not promising all these goals will be met, but I will be quite happy if we can hit the 2 second mark on initial page render.
This is quoted from other post.
My question is would it affect the css overall?
---
### Author:  [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [2015年十二月22日 20:45 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/12 "2015-12-22T20:45:08Z")
This is the new Colors.
#DFDFDF with that i am able to pass the contrast.Updated the first post as well
---
### Author:  [@angelgarcia](https://meta.discourse.org/u/angelgarcia)
#### Post date: [2015年十二月27日 00:59 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/13 "2015-12-27T00:59:53Z")
Looks great, thanks for sharing 🙂
---
### Author:  [@Roxelle](https://meta.discourse.org/u/Roxelle)
#### Post date: [2016年一月8日 15:24 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/14 "2016-01-08T15:24:39Z")
Amazing work!!!
I took inspiration from this topic (only color):
[https://meta.discourse.org/t/its-a-dark-theme/15662](https://meta.discourse.org/t/its-a-dark-theme/15662)
And then I’ve got some code from your post.
I have a question for you. How do I add icons?
---
### Author:  [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [2016年一月8日 16:20 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/15 "2016-01-08T16:20:28Z")
> [@Roxelle](#):
>
> I have a question for you. How do I add icons?
You can upload them via
Category \>Edit \> Images\> Category logo images.
---
### Author:  [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [2016年一月27日 17:24 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/16 "2016-01-27T17:24:04Z")
The post is now a Wiki. 🙂
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;
}
```
---
### Author:  [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2017年四月27日 16:17 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/17 "2017-04-27T16:17:44Z")
Could this be merged into the stock Material theme now?
[https://github.com/discourse/material-design-stock-theme](https://github.com/discourse/material-design-stock-theme)
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2017年五月31日 19:40 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/18 "2017-05-31T19:40:27Z")
Any chance you could publish this as a #plugin:theme @Alankrit_Choudh ?
---
### Author:  [@djcyry](https://meta.discourse.org/u/djcyry)
#### Post date: [2017年九月25日 09:58 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/19 "2017-09-25T09:58:27Z")
Nice style , i think i will use it in mu forum . Thanks
---
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [2018年三月22日 03:59 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/20 "2018-03-22T03:59:47Z")
has anyone consolidated all these instructions into a single theme which could be imported?
The Dark Theme link in the first post is no longer valid.
---
### Author:  [@anon82467725](https://meta.discourse.org/u/anon82467725)
#### Post date: [2020年十一月27日 19:52 UTC](https://meta.discourse.org/t/superseded-dark-material-design/36531/21 "2020-11-27T19:52:26Z")
> [@erlend\_sh](#):
>
> 这现在能合并到官方的 Material 主题中吗？
这事后来发生了吗？如果没有的话，我会很惊讶。
[下一頁](https://meta.discourse.org/t/superseded-dark-material-design/36531.md?page=2)