---
# System prepended metadata

title: HackMD Dark Theme
tags: [theme]

---

---
title: HackMD Dark Theme
tags: theme
description: Use `{%hackmd theme-dark %}` syntax to include this theme.
---

<style>

html, body, .ui-content {
    background-color: #222;
    color: #ddd;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    color: #ddd;
}

.markdown-body h1,
.markdown-body h2 {
    border-bottom-color: #ffffff69;
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
    color: #fff;
}

.markdown-body img {
    background-color: transparent;
}

.ui-toc-dropdown .nav>.active:focus>a, .ui-toc-dropdown .nav>.active:hover>a, .ui-toc-dropdown .nav>.active>a {
    color: white;
    border-left: 2px solid white;
}

.expand-toggle:hover, 
.expand-toggle:focus, 
.back-to-top:hover, 
.back-to-top:focus, 
.go-to-bottom:hover, 
.go-to-bottom:focus {
    color: white;
}


.ui-toc-dropdown {
    background-color: #333;
}

.ui-toc-label.btn {
    background-color: #191919;
    color: white;
}

.ui-toc-dropdown .nav>li>a:focus, 
.ui-toc-dropdown .nav>li>a:hover {
    color: white;
    border-left: 1px solid white;
}

.markdown-body blockquote {
    color: #bcbcbc;
}

.markdown-body table tr {
    background-color: #5f5f5f;
}

.markdown-body table tr:nth-child(2n) {
    background-color: #4f4f4f;
}

.markdown-body code{
    background-color: rgba(230, 230, 230, 0.36);
}
    

    
.markdown-body tt {
    color: #eee;
    background-color: rgba(230, 230, 230, 0.36);
}

a,
.open-files-container li.selected a {
    color: #5EB7E0;
}

  #notificationLabel,
  .ui-infobar .btn.ui-edit {
    color: #eee;
    border-color: #6a6a6a;
  }

  .ui-infobar__user-info li {
    color: #bbb;
  }

  footer {
    background: #101010;
    color: #bbb;
    border-top: 1px solid #454545;
  }
    
</style>

<style>

    /*--------------- navbar ---------------*/
  
/* .header {
    background-color: #002369;
    border-color: #002369;
} no effect
 */
  .navbar {
    background-color: #002369;
    border-color: #002369;
  }

  .navbar a {
    color: #e8bd3d !important;
  }

  .navbar .btn-group label {
    background-color: #f27d52;
    color: #0789a9;
    border-color: #0789a9;
  }

  .navbar .btn-group label.btn-default:focus,
  .navbar .btn-group label.btn-default:hover {
    background-color: #2a2a2a;
    color: #eee;
    border-color: #555;
  }

  .navbar .btn-group label.active {
    background-color: #555;
    color: #eee;
    border-color: #555;
  }

  .navbar .btn-group label.active:focus,
  .navbar .btn-group label.active:hover {
    background-color: #555;
    color: #eee;
    border-color: #555;
  }

  .navbar-default .btn-link:focus,
  .navbar-default .btn-link:hover {
    color: #eee;
  }

  .navbar-default .navbar-nav>.open>a,
  .navbar-default .navbar-nav>.open>a:focus,
  .navbar-default .navbar-nav>.open>a:hover {
    background-color: #555;
  }

  .dropdown-header {
    color: #aaa;
  }

  .dropdown-menu {
    background-color: #222;
    border: 1px solid #555;
    border-top: none;
  }

  .dropdown-menu>li>a {
    color: #eee;
  }

  .dropdown-menu>li>a:focus,
  .dropdown-menu>li>a:hover {
    background-color: #555555;
    color: #eee;
  }

  .dropdown-menu .divider {
    background-color: #555;
  }

  .header .open .dropdown-menu {
    background-color: #FFFFFF;
  }

  .navbar .announcement-popover {
    background: #FFFFFF;
  }

  .navbar .announcement-popover .announcement-popover-header {
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
  }

  .navbar .announcement-popover .announcement-popover-body {
    background: #FFFFFF;
    color: #eee;
  }

  .navbar .announcement-popover .announcement-popover-footer {
    background: #FFFFFF;
  }

  .navbar .announcement-area .caption.inverse {
    color: #eee;
  }

  .label-warning {
    background-color: #FFFFFF;
    color: #212529;
  }
    
/*程式區塊相關的渲染 1 */
.markdown-body pre {
    background-color: #202020!important;
    border: 5px solid #154360 !important;
    color: #AED6F1 ;
}
/*程式區塊相關的渲染 2 */
.markdown-body pre code .gutter.linenumber {
    text-align: right;
    position: relative;
    display: inline-block;
    cursor: default;
    z-index: 4;
    padding: 0 10px 0 0;
    min-width: 20px;
    box-sizing: content-box;
    color: #85C1E9!important;
    border-right: 3px solid #3dc53d!important;
}
/*---------- code highlight: Visual Stutdio Code theme for Prism.js ----------*/
  code[class*="language-"],
  pre[class*="language-"] {
    color: #DCDCDC !important;
  }

  :not(pre)>code[class*="language-"],
  pre[class*="language-"] {
    background: #1E1E1E;
  }

/*  井字號 define 跟 include 部分    */

.token.directive{
    color:#9B59B6!important;
}
.token.directive-hash{
    color:#9B59B6!important;
}
.token.string{
    color:#F1948A!important;
}
.token.macro-name{
    color:#D35400!important;
}
.token.number{
    color:#F1C40F!important; 
}

    /* 關鍵字 */    
.token.keyword{
    color:#3498DB
}

.token.comment {
	/*註解*/
	color: #E74C3C;
}
.token.punctuation {
	/*括弧*/
	color: #9B9B9B;
}
.token.function{
	/*函數名稱*/
	color: #F9E79F;
}
.token.number {
	/*數字值*/
	color: #009698;
}
    
/* 下面沒用*/
    
  .token.block-comment,
  .token.prolog,

  .token.doctype,

  .token.tag,
  .token.entity {
    color: #569CD6;
  }

    .token.attr-name{
        color: #002369;  
    }
  .token.namespace{
        color: #002369;  
    }
  .token.deleted{
        color: #002369;  
    }

  .token.builtin {
    color: #9CDCFE;
  }



    

  .token.important {
    color: #569CD6;
  }



  .token.class-name{
      /*class 名稱*/
    color: #e8bd3d;
  }
  .token.constant {
    color: #4EC9B0;
  }

  .token.symbol {
    color: #f8c555;
  }

  .token.rule {
    color: #c586c0;
  }

  .token.selector {
    color: #D7BA7D;
  }

  .token.atrule {
    color: #cc99cd;
  }

  .token.string,

  .token.char {
    color: #7ec699;
  }

  .token.variable {
    color: #BD63C5;
  }

  .token.regex {
    color: #d16969;
  }

  .token.operator {
    color: #DCDCDC;
    background: transparent;
  }

  .token.url {
    color: #67cdcc;
  }

  .token.important,
  .token.bold {
    font-weight: bold;
  }

  .token.italic {
    font-style: italic;
  }

  .token.entity {
    cursor: help;
  }

  .token.inserted {
    color: green;
  }

  
</style>
```c=
#include<stdio.h>
#define MAX 1e7
typedef struct node{
    int value;
    struct node * next
}Node;

int main(){
    char * a = (char*)malloc(sizeof(char)*1)
    for(int i = 0; i < 10; i++){
        continue; // this is comment
    }
    return 0;
}
```

```python=
import numpy as np
import torch

a = np.arange(10).reshape(5,2)
b = a[:,0]
```