dark.user.css

/* ==UserStyle==
@name           HackMD dark theme
@namespace      USO Archive
@author         Titangene
@description    `Dark theme for HackMD`
@version        20191102.13.13
@license        CC-BY-SA-4.0
@preprocessor   uso
==/UserStyle== */

@-moz-document regexp("https:\\/\\/.*hackmd\\.io\\/.*") {
    /*--------------- view ---------------*/
    body[style],
    body[style*="background-color: white;"] {
        background-color: #1e1e1e !important;
    }
    
    body {
        color: #abb2bf;
    }
    
    .ui-view-area,
    .markdown-body,
    .ui-content {
        background: #1e1e1e;
        color: #abb2bf;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        color: #ddd;
    }
    
    /* form */
    .form-control {
        background: #333;
        color: #fff;
        border-color: #8e8e8e;
    }
    
    .form-control::placeholder,
    .form-control::-webkit-input-placeholder,
    .form-control:-moz-placeholder,
    .form-control::-moz-placeholder,
    .form-control:-ms-input-placeholder {
        color: #eee;
    }
    
    /*--------------- navbar ---------------*/
    .header {
        background-color: #0e0e0e;
        border-color: #0e0e0e;
    }
    
    .navbar {
        background-color: #0e0e0e;
        border-color: #555;
    }
    
    .navbar a {
        color: #eee !important;
    }
    
    .navbar .btn-group label {
        background-color: #0e0e0e;
        color: #eee;
        border-color: #555;
    }
    
    .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: #eee;
    }
    
    .dropdown-menu {
        background-color: #0e0e0e;
        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: #202020;
    }
    
    .ui-share-menu .ui-share-copy,
    .ui-share-menu .ui-share-preview {
        border-color: #555555 !important;
        background-color: #333 !important;
        color: #FFF !important;
    }
    
    .ui-share-menu .ui-share-copy:hover,
    .ui-share-menu .ui-share-copy:focus,
    .ui-share-menu .ui-share-preview:hover,
    .ui-share-menu .ui-share-preview:focus {
        background-color: #737373 !important;
        color: #FFF !important;
    }
    
    .permission-dropdown .ui-more-settings,
    .permission-dropdown .sidenav-trigger {
        color: #7bf;
    }
    
    .public-published-toggle .unpublish:hover {
        background-color: #286090;
    }
    
    .menuitem-dropdown .menuitem-dropdown-trigger {
        border-color: #555555;
    }
    
    .menuitem-dropdown .menuitem-dropdown-trigger:hover,
    .menuitem-dropdown .menuitem-dropdown-trigger:focus {
        background-color: #3e4045;
    }
    
    .navbar .announcement-popover {
        background: #4F4F4F;
    }
    
    .navbar .announcement-popover .announcement-popover-header {
        background: #2e2e2e;
        border-bottom: 1px solid #2e2e2e;
    }
    
    .navbar .announcement-popover .announcement-popover-body {
        background: #4F4F4F;
        color: #eee;
    }
    
    .navbar .announcement-popover .announcement-popover-footer {
        background: #4F4F4F;
    }
    
    .navbar .announcement-area .caption.inverse {
        color: #eee;
    }
    
    .label-warning {
        background-color: #ffc107;
        color: #212529;
    }
    
    /*--------------- history / recent ---------------*/
    .list.row-layout li .item {
        border-color: #696c7d;
    }
    
    .list.row-layout li:nth-last-of-type(1) .item {
        border-bottom: none;
    }
    
    .list li .item {
        background: #1c1c1c;
        color: #fff;
    }
    
    .list li:hover .item,
    .list li:focus .item {
        background: #404040;
    }
    
    .list li .item h4 {
        color: #fff;
    }
    
    .list li p {
        color: #ccc;
    }
    
    .list li p i {
        font-style: normal;
    }
    
    .list li .item .content .tags span {
        background: #555;
    }
    
    .list li .item.wide .content .title a,
    .list li .item.wide .content .title a:focus,
    .list li .item.wide .content .title a:hover {
        color: #ddd;
    }
    
    .ui-item {
        color: #fff;
        opacity: 0.7;
    }
    
    .ui-item:hover,
    .ui-item:focus {
        opacity: 1;
        color: #fff;
    }
    
    .list li .item.wide hr {
        border-color: #6d6d6d;
    }
    
    .overview-widget-group .btn,
    .multi-select-dropdown-menu .ui-dropdown-label,
    .multi-select-dropdown-menu .dropdown-options,
    .form-control {
        border-color: #555555;
    }
    
    .multi-select-dropdown-menu .dropdown-options .ui-option:hover {
        background-color: #4d4d4d;
        color: #eee;
    }
    
    #overview-control-form #overview-keyword-input-container .select2-container {
        background-color: #3e4045 !important;
    }
    
    #overview-control-form #overview-keyword-input-container .select2-container .select2-choices,
    .select2-search-field {
        background-color: #1e1e1e!important;
    }
    
    .search {
        background-color: #3e4045;
        color: #eee;
    }
    
    .btn.btn-gray {
        background: #1b1b1b;
    }
    
    .btn.btn-gray:hover {
        background: #4d4d4d;
        color: #eee;
    }
    
    .search::placeholder,
    .search::-webkit-input-placeholder,
    .search:-moz-placeholder,
    .search::-moz-placeholder,
    .search:-ms-input-placeholder {
        color: #eee;
    }
    
    .btn.btn-gray {
        border-color: #6d6d6d;
        background: #333;
        color: #eee;
    }
    
    .select2-default {
        color: #eee !important;
    }
    
    .select2-results .select2-highlighted {
        background: #4d4d4d;
        color: #eee;
    }
    
    .select2-container-multi .select2-choices {
        background: #3e4045;
    }
    
    .select2-container-multi .select2-choices .select2-search-choice {
        background: #131313;
        color: #eee;
        border-color: #555;
        box-shadow: none;
    }
    
    .btn-default,
    .btn-default:focus {
        color: #eee;
        background-color: #2e2e2e;
        border-color: #6a6a6a;
    }
    
    .btn-default.active.focus,
    .btn-default.active:focus,
    .btn-default.active:hover,
    .btn-default:active.focus,
    .btn-default:active:focus,
    .btn-default:active:hover,
    .open > .dropdown-toggle.btn-default.focus,
    .open > .dropdown-toggle.btn-default:focus,
    .open > .dropdown-toggle.btn-default:hover {
        background: #737373;
    }
    
    .btn-default:hover {
        color: #fff;
        background-color: #7d7d7d;
        border-color: #6a6a6a;
    }
    
    .overview-widget-group .btn.active {
        background-color: #6a6a6a;
        color: #eee;
    }
    
    .overview-widget-group .btn:hover {
        background-color: #7d7d7d;
        color: #eee;
        border-color: #636363;
    }
    
    .overview-widget-group .slider.round {
        border-color: #ccc;
    }
    
    .overview-widget-group .slider.round:before {
        border-color: #ccc;
    }
    
    .overview-widget-group input:checked + .slider {
        background-color: #ccc;
    }
    
    .ui-category-description-icon a {
        color: #eee;
    }
    
    .item .ui-history-pin.active {
        color: #f00;
    }
    
    .ui-history-close {
        color: #eee;
        opacity: 0.5;
    }
    
    .pagination > li > a,
    .pagination > li > span {
        color: #eee;
        background-color: #2e2e2e;
        border-color: #6a6a6a;
    }
    
    .pagination > li > a:hover {
        color: #fff;
        background-color: #7d7d7d;
        border-color: #6a6a6a;
    }
    
    .pagination > .disabled > a,
    .pagination > .disabled > a:focus,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > span,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > span:hover {
        color: #eee;
        background-color: #2e2e2e;
        border-color: #6a6a6a;
    }
    
    .pagination.dark > li > a,
    .pagination.dark > li > span {
        color: #aaa;
    }
    
    /*--------------- new overview ---------------*/
    .overview-component .list li .item {
        background: #1c1c1c;
        color: #fff;
    }
    
    .overview-component .list li:hover .item,
    .overview-component .list li:focus .item {
        background: #404040;
    }
    
    .overview-component .list li p {
        color: #ccc;
    }
    
    .overview-component .list li .item {
        color: #888888;
    }
    
    .overview-component .ui-overview-pin {
        opacity: 1;
    }
    
    /*--------------- settings ---------------*/
    .section .form-horizontal .form-group .btn-default {
        font-size: 16px;
        border-color: #6d6d6d;
        background-color: #333;
        color: #FFF;
    }
    
    .section .form-horizontal .form-group .btn-default:hover,
    .section .form-horizontal .form-group .btn-default:focus {
        background-color: #737373;
        color: #FFF;
    }
    
    .section .form-horizontal .form-control:focus {
        border-color: #bbb;
    }
    
    /*--------------- share view ---------------*/
    #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;
    }
    
    footer a {
        color: #bbb;
    }
    
    /*--------------- doc view ---------------*/
    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4,
    .markdown-body h5,
    .markdown-body h6,
    #doc > h1 {
        color: #ddd;
        border-color: #777 !important;
    }
    
    .markdown-body hr {
        background-color: #7e7e7e;
    }
    
    .h1 .small,
    .h1 small,
    .h2 .small,
    .h2 small,
    .h3 .small,
    .h3 small,
    .h4 .small,
    .h4 small,
    .h5 .small,
    .h5 small,
    .h6 .small,
    .h6 small,
    h1 .small,
    h1 small,
    h2 .small,
    h2 small,
    h3 .small,
    h3 small,
    h4 .small,
    h4 small,
    h5 .small,
    h5 small,
    h6 .small,
    h6 small {
        color: #ddd;
    }
    
    .markdown-body p {
        color: #ddd;
    }
    
    .markdown-body a {
        color: #7bf;
    }
    
    .markdown-body a code {
        color: #7bf !important;
    }
    
    .markdown-body ul li,
    .markdown-body ol li {
        color: #ddd;
    }
    
    .markdown-body blockquote {
        color: #ddd;
        border-left-color: #777;
        font-size: 16px;
    }
    
    .markdown-body code,
    code {
        color: #dfdfdf !important;
        background-color: #424a55;
    }
    
    .markdown-body code {
        padding: 1px 2px;
    }
    
    .markdown-body pre {
        background-color: #1e1e1e;
        border: 1px solid #555 !important;
        color: #dfdfdf;
    }
    
    .markdown-body details {
        margin-bottom: 16px;
    }
    
    blockquote .small,
    blockquote footer,
    blockquote small {
        color: #bbb;
    }
    
    .mark,
    mark {
        background-color: rgba(255, 255, 0, 0.32) !important;
        color: #ddd;
        margin: .1em;
        padding: .1em .2em;
    }
    
    /* Todo list */
    .task-list-item-checkbox {
        margin: 0.18em 0 0.2em -1.3em !important;
    }
    
    .task-list-item input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        position: relative;
        top: -1px;
        margin: 0 1rem 0 0;
        cursor: pointer;
    }
    
    .task-list-item input[type=checkbox]::before {
        -webkit-transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
        content: "";
        position: absolute;
        left: 0;
        z-index: 1;
        width: 16px;
        height: 16px;
        border: 2px solid #fff;
    }
    
    .task-list-item input[type=checkbox]:checked::before {
        -webkit-transform: rotate(-48deg);
        -moz-transform: rotate(-48deg);
        -ms-transform: rotate(-48deg);
        -o-transform: rotate(-48deg);
        transform: rotate(-48deg);
        height: 9px;
        border-color: #00E676;
        border-top-style: none;
        border-right-style: none;
    }
    
    .task-list-item input[type=checkbox]::after {
        content: "";
        position: absolute;
        top: -0.125rem;
        left: 0;
        width: 16px;
        height: 16px;
        background: #333;
        cursor: pointer;
    }
    
    /* table */
    .markdown-body table tr {
        background-color: #1e1e1e;
        border-color: #626262;
    }
    
    .markdown-body table tr:last-child {
        border-bottom: 1px solid #626262;
    }
    
    .markdown-body table tr:nth-child(2n) {
        background-color: #333;
    }
    
    .markdown-body table tr th {
        color: #64B5F6;
    }
    
    .markdown-body table th,
    .markdown-body table td {
        border: none;
        border-color: #626262;
    }
    
    .markdown-body table tr td {
        color: #ddd;
    }
    
    .markdown-body table tr th:first-child,
    .markdown-body table tr td:first-chimenuitem-dropdown-triggerld {
        border-left: 1px solid #626262;
    }
    
    .markdown-body table tr th:last-child,
    .markdown-body table tr td:last-child {
        border-right: 1px solid #626262;
    }
    
    .markdown-body pre.flow-chart,
    .markdown-body pre.sequence-diagram,
    .markdown-body pre.graphviz,
    .markdown-body pre.mermaid,
    .markdown-body pre.abc {
        background-color: #fff !important;
    }
    
    /* alert */
    .alert-danger,
    .alert-danger h1,
    .alert-danger h2,
    .alert-danger h3,
    .alert-danger h4,
    .alert-danger h5,
    .alert-danger h6,
    .alert-danger p,
    .alert-danger mark,
    .alert-danger ul li,
    .alert-danger ol li {
        color: #e87782;
        background-color: #463030;
        border-color: #604141
    }

    .alert-danger a {
        color: #8e86ea!important;
    }
    
    .alert-danger hr {
        background-color: #c1747c;
    }
    .alert-warning,
    .alert-warning h1,
    .alert-warning h2,
    .alert-warning h3,
    .alert-warning h4,
    .alert-warning h5,
    .alert-warning h6,
    .alert-warning p,
    .alert-warning mark,
    .alert-warning ul li,
    .alert-warning ol li {
        color: #e8d18f;
        background-color: #4d3f17!important;
        border-color: #664f0c!important;
    }
    
    .alert-warning hr {
        background-color: #856404;
    }
    
    .alert-success,
    .alert-success h1,
    .alert-success h2,
    .alert-success h3,
    .alert-success h4,
    .alert-success h5,
    .alert-success h6,
    .alert-success p,
    .alert-success mark,
    .alert-success ul li,
    .alert-success ol li {
        color: #98dfa8;
        background-color: #36422f!important;
        border-color: #596453;
    }
    
    .alert-success hr {
        background-color: #155724;
    }
    
    .alert-info,
    .alert-info h1,
    .alert-info h2,
    .alert-info h3,
    .alert-info h4,
    .alert-info h5,
    .alert-info h6,
    .alert-info p,
    .alert-info mark,
    .alert-info ul li,
    .alert-info ol li {
        color: #b1cae6;
        background-color: #355162!important;
        border-color: #545f6a;
    }
    
    .alert-info hr {
        background-color: #004085;
    }
    
    .alert a {
        color: #002752;
        font-weight: 700;
    }
    
    .alert h1:first-child,
    .alert h2:first-child,
    .alert h3:first-child,
    .alert h4:first-child,
    .alert h5:first-child,
    .alert h6:first-child {
        margin-top: 0;
    }
    
    .markdown-body .alert > p {
        margin-top: 0px;
        margin-bottom: 10px;
    }
    
    .markdown-body .alert > ul,
    .markdown-body .alert > ol {
        margin-bottom: 16px;
    }
    
    .markdown-body .alert > *:last-child {
        margin-bottom: 0;
    }
    
    .alert-warning {
        background-color: #fff3cd;
        border-color: #ffeeba;
    }
    
    .alert-danger mark {
        background-color: #ffb7b7 !important;
    }
    menuitem-dropdown-trigger .alert-warning mark {
        background-color: #ffe966 !important;
    }
    
    .alert-success mark {
        background-color: #b9e990 !important;
    }
    
    .alert-info mark {
        background-color: #b1d6ff !important;
    }
    
    /* scroll bar */
    .ui-edit-area .ui-resizable-handle.ui-resizable-e {
        background-color: #303030;
        border: 1px solid #303030;
        box-shadow: none;
    }
    
    /* info bar */
    .ui-infobar {
        color: #999;
    }
    
    /* permission */
    .permission-popover-btn-group .btn.focus,
    .permission-popover-btn-group .btn:active,
    .permission-popover-btn-group .btn:focus,
    .permission-popover-btn-group .btn.active {
        background-color: #6a6a6a !important;
        color: #eee !important;
        border-color: #555 !important;
    }
    
    .permission-popover-btn-group .btn:hover,
    .permission-popover-btn-group .btn.active:hover {
        background-color: #7d7d7d !important;
        color: #eee !important;
        border-color: #636363 !important;
    }
    
    .ui-delete-note:hover,
    .ui-delete-note:focus,
    .ui-delete-note:active {
        background-color: #dc3545 !important;
    }
    
    .ui-invitee-invite {
        border-color: #555555 !important;
    }
    
    .ui-invitee-invite:hover,
    .ui-invitee-invite:focus {
        background-color: #737373;
        color: #eee !important;
    }
    
    .ui-no-invitee-label {
        color: #ccc !important;
    }
    
    .select2-container {
        background: #202020;
    }
    
    .select2-container-multi .select2-choices .select2-search-field input {
        color: #eee;
    }
    
    .select2-container-multi .select2-choices .select2-search-field input.select2-active {
        color: #000;
    }
    
    .select2-drop {
        background: #202020;
        color: #eee;
    }
    
    .select2-results .select2-no-results,
    .select2-results .select2-searching,
    .select2-results .select2-ajax-error,
    .select2-results .select2-selection-limit {
        background: #202020;
    }
    
    /* table of contents block*/
    .ui-toc-dropdown {
        width: 42vw;
        max-height: 90vh;
        overflow: auto;
        text-align: inherit;
    }
    
    /* table of contents text*/
    .ui-toc-dropdown .nav > li > a {
        font-size: 14px;
        font-weight: bold;
        color: #ddd;
    }
    
    /* table of contents text: active*/
    .ui-toc-dropdown .nav > .active:focus > a,
    .ui-toc-dropdown .nav > .active:hover > a,
    .ui-toc-dropdown .nav > .active > a {
        color: #7bf;
        border-left-color: #7bf;
    }
    
    /* table of contents text: focus, hover*/
    .ui-toc-dropdown .nav > li > a:focus,
    .ui-toc-dropdown .nav > li > a:hover {
        color: #7bf;
        border-left-color: #7bf;
    }
    
    /* drop down floating table of contents */
    .ui-toc-dropdown.dropdown-menu {
        background: #333;
    }
    
    .toc-menu a {
        color: #ddd;
    }
    
    .toc-menu a:focus,
    .toc-menu a:hover {
        color: #7bf;
    }
    
    
    /*--------------- editor ---------------*/
    .cm-m-markdown {
        color: #ddd;
    }
    
    .cm-s-one-dark .cm-header,
    .cm-m-xml.cm-attribute {
        color: #ffa653;
    }
    
    .cm-m-markdown.cm-variable-3 {
        color: #ff7e7e;
    }
    
    .cm-s-one-dark .cm-string,
    .cm-s-one-dark .cm-variable-2,
    .cm-s-one-dark .cm-m-markdown.cm-url {
        color: #7bf;
    }
    
    .cm-s-one-dark .cm-m-markdown.cm-link {
        color: #b0ee83;
    }
    
    .cm-s-one-dark .CodeMirror-linenumber {
        color: #666;
    }
    
    .cm-strong {
        color: #f4511e;
    }
    
    .cm-s-one-dark .cm-comment {
        color: #a9a9a9;
    }
    
    .cm-matchhighlight {
        color: #ffea00;
    }
    
    .cm-positive {
        color: #11bf64;
    }
    
    .cm-negative {
        color: #ff3e3e;
    }
    
    .dropdown-menu.CodeMirror-other-cursor {
        border: 2px solid #4d4d4d;
        background-color: #202020;
    }
    
    .dropdown-menu.CodeMirror-other-cursor li a {
        color: #ececec;
    }
    
    /*--------------- book mode ---------------*/
    .topbar {
        background: #1e1e1e;
    }
    
    .btn.focus,
    .btn:focus,
    .btn:hover {
        color: #fff;
        background-color: #333;
    }
    
    .summary {
        background: #1e1e1e;
    }
    
    .summary,
    .toolbar {
        background: #1e1e1e !important;
        border-color: #4d4d4d !important;
    }
    
    .toolbar i {
        color: #fff;
    }
    
    .summary h1,
    .summary h2,
    .summary h3 .summary hr {
        color: #ddd;
        border-color: #777 !important;
    }
    
    .summary .nav > li > a {
        color: #7bf;
    }
    
    .summary .nav-pills > li.active > a,
    .summary .nav-pills > li.active > a:focus,
    .summary .nav-pills > li.active > a:hover {
        color: #ff9100;
    }
    
    .ui-summary-search {
        font-size: 16px;
        border: 1px solid #6D6D6D;
        background-color: #333;
        color: #FFF;
    }
    
    .summary h1,
    .summary h2,
    .summary h3,
    .summary h4,
    .summary h5,
    .summary h6 {
        border-color: #454545;
    }
    
    /* fix body background color to dark */
    div[class$=container-mask] {
        background: #1e1e1e;
        z-index: 1;
        display: block;
    }
    
    /* notification */
    .dropdown.ui-notification .ui-notification-label,
    .dropdown.ui-invitee .ui-invitee-label {
        color: #eee;
        border-color: #6a6a6a;
    }
    
    .ui-notification .dropdown-menu {
        border-top: 1px solid #555;
    }
    
    /*--------------- help ---------------*/
    .modal-header {
        background-color: #2a2a2a;
    }
    
    .panel-default {
        border-color: #6d6d6d;
    }
    
    .panel-default > .panel-heading {
        background-color: #2a2a2a;
        color: #eee;
        border-color: #6d6d6d;
    }
    
    .panel-body {
        background: #2e2e2e;
    }
    
    .panel-body a {
        color: #7bf;
    }
    
    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > thead > tr > th {
        border-color: #6d6d6d;
    }
    
    /*--------------- comment ---------------*/
    .ui-comment-container .ui-comment-header {
        background-color: #2a2a2a;
        color: #eee;
        border-color: #6d6d6d;
    }
    
    .ui-comment-container {
        background-color: #2e2e2e;
        border-color: #6d6d6d;
    }
    
    .ui-comment-container .ui-comments-container .ui-comment .comment-author {
        color: #eee;
    }
    
    .ui-comment-container .ui-comments-container .ui-comment .timestamp {
        color: #aaa;
    }
    
    .ui-comment-container .ui-comments-container .ui-comment .comment-content {
        color: #eee;
    }
    
    .ui-comment-container .ui-comments-container .ui-comment .comment-menu {
        color: #eee;
    }
    
    .ui-comment-container .ui-comments-container .ui-comment .comment-menu .comment-dropdown-menu {
        background: #222;
        color: #eee;
        border-color: #555;
    }
    
    .ui-comment-container .ui-comments-container .ui-comment .comment-menu .comment-dropdown-menu > div:hover {
        background-color: #555555;
        color: #eee;
    }
    
    .ui-comment-container .ui-comments-container .ui-comment .comment-menu:hover,
    .ui-comment-container .ui-comments-container .ui-comment .comment-menu:active,
    .ui-comment-container .ui-comments-container .ui-comment .comment-menu.active {
        background-color: #737373;
        color: #eee;
    }
    
    .ui-comment-container .ui-comment-input-container {
        background-color: #3c3c3c;
    }
    
    .ui-comment-container textarea {
        background-color: #3e4045;
        color: #eee;
        border: 1px solid #6d6d6d;
    }
    
    .ui-comment-container textarea::placeholder,
    .ui-comment-container textarea::-webkit-input-placeholder,
    .ui-comment-container textarea:-moz-placeholder,
    .ui-comment-container textarea::-moz-placeholder,
    .ui-comment-container textarea:-ms-input-placeholder {
        color: #eee;
    }
    
    @keyframes highlight {
        0% {
            background-color: #3c3c3c;
        }
    
        30% {
            background-color: #3c3c3c;
        }
    
        100% {
            background-color: transparent;
        }
    }
    
    /*--------------- template ---------------*/
    .template-content .modal-header {
        background: #2a2a2a;
    }
    
    .template-content .close {
        color: #fff;
    }
    
    .template-content .modal-title {
        color: #eee;
    }
    
    .template-content .ui-templates-container {
        border-color: #6d6d6d;
    }
    
    .ui-templates-container .ui-create-template-btn {
        background: #446fab;
        color: #fff;
    }
    
    .ui-template-list-filter .ui-template-list-filter-label,
    .ui-template-list-filter .ui-template-list-filter-label:hover {
        color: #eee;
    }
    
    .ui-template-list .list-group-item.active {
        background: #4d4d4d;
    }
    
    .ui-template-list .list-group-item.active:focus {
        background: #4d4d4d !important;
    }
    
    .list-group-item.active,
    .list-group-item.active:focus,
    .list-group-item.active:hover {
        color: #eee;
    }
    
    .ui-template-list .list-group-item .list-group-item-heading {
        color: #eee;
    }
    
    .ui-template-list .list-group-item.active .list-group-item-heading {
        color: #eee;
    }
    
    .ui-template-list .list-group-item:hover {
        background: #4d4d4d !important;
    }
    
    .ui-template-item-menu {
        color: #eee !important;
    }
    
    .ui-template-list .list-group-item {
        color: #fff;
    }
    
    .ui-template-list .list-group-item .dropdown-container.open {
        background-color: #2a2a2a;
    }
    
    .ui-template-list .list-group-item .dropdown-container:hover {
        background-color: #2a2a2a !important;
    }
    
    .template-menu .more-template {
        border-color: #6d6d6d;
    }
    
    .template-menu .more-template:hover {
        color: #eee;
        border-color: #6d6d6d;
    }
    
    /*--------------- code mirror ---------------*/
    .modal-content {
        background: #1e1e1e;
    }
    
    .modal-header {
        border-bottom: 1px solid #46484f;
    }
    
    .modal-footer {
        border-top: 1px solid #46484f;
    }
    
    a.list-group-item {
        background: #1f2226;
        color: #ddd;
        border: 1px solid #46484f;
    }
    
    a.list-group-item .list-group-item-heading {
        color: #ddd;
    }
    
    a.list-group-item:focus,
    a.list-group-item:hover {
        background: #434651;
        color: #ddd;
    }
    
    button.close {
        color: #ddd;
        opacity: .5;
    }
    
    .close:focus,
    .close:hover {
        color: #fff;
        opacity: .8;
    }
    
    .CodeMirror {
        background: #1f2226;
    }
    
    .CodeMirror-gutters {
        background: #1f2226;
        border-right: 1px solid rgba(204, 217, 255, 0.1);
    }
    
    .cm-s-default .cm-comment {
        color: #888;
    }
    
    .cm-s-default .cm-quote {
        color: #ddd;
    }
    
    .cm-s-default .cm-header {
        color: #ffa653;
    }
    
    .cm-s-default .cm-link {
        color: #b0ee83;
    }
    
    .cm-s-default .cm-string,
    .cm-s-default .cm-variable-2 {
        color: #7bf;
    }
    
    .cm-s-default .cm-def {
        color: #c678dd;
    }
    
    .cm-s-default .cm-number,
    .cm-s-default .cm-attribute,
    .cm-s-default .cm-qualifier,
    .cm-s-default .cm-plus,
    .cm-s-default .cm-atom {
        color: #eda35e;
    }
    
    .cm-s-default .cm-property,
    .cm-s-default .cm-variable,
    .cm-s-default .cm-variable-3,
    .cm-s-default .cm-operator,
    .cm-s-default .cm-bracket {
        color: #f76e79;
    }
    
    .cm-s-default .cm-keyword,
    .cm-s-default .cm-builtin,
    .cm-s-default .cm-tag {
        color: #98c379;
    }
    
    .modal-title {
        color: #ccc;
    }
    
    .modal-body {
        color: #ccc !important;
    }
    
    div[contenteditable]:empty:not(:focus):before {
        color: #aaa;
    }
    
    .CodeMirror pre {
        color: #ddd;
    }
    
    .CodeMirror pre span[style^="background-color: rgb(221, 251, 230)"] {
        background-color: #288c27 !important;
    }
    
    .CodeMirror pre span[style^="background-color: rgb(249, 215, 220)"] {
        background-color: #a52721 !important;
    }
    
    /*------- code highlight: Visual Stutdio Code theme for highlight.js -------*/
    .hljs {
        background: #1E1E1E;
        color: #DCDCDC;
    }
    
    .hljs-keyword,
    .hljs-literal,
    .hljs-symbol,
    .hljs-name {
        color: #569CD6;
    }
    
    .hljs-link {
        color: #569CD6;
        text-decoration: underline;
    }
    
    .hljs-built_in,
    .hljs-type {
        color: #4EC9B0;
    }
    
    .hljs-number,
    .hljs-class {
        color: #B8D7A3;
    }
    
    .hljs-string,
    .hljs-meta-string {
        color: #D69D85;
    }
    
    .hljs-regexp,
    .hljs-template-tag {
        color: #d16969;
    }
    
    .hljs-title {
        color: #dcdcaa;
    }
    
    .hljs-subst,
    .hljs-function,
    .hljs-formula {
        color: #DCDCDC;
    }
    
    .hljs-comment,
    .hljs-quote {
        color: #57A64A;
    }
    
    .hljs-doctag {
        color: #608B4E;
    }
    
    .hljs-meta,
    .hljs-meta-keyword,
    .hljs-tag {
        color: #9B9B9B;
    }
    
    .hljs-variable,
    .hljs-template-variable {
        color: #BD63C5;
    }
    
    .hljs-params,
    .hljs-attr,
    .hljs-attribute,
    .hljs-builtin-name {
        color: #9CDCFE;
    }
    
    .hljs-section {
        color: gold;
    }
    
    .hljs-emphasis {
        font-style: italic;
    }
    
    .hljs-strong {
        font-weight: bold;
    }
    
    /*
      .hljs-code {
        font-family:'Monospace';
      }
      */
    .hljs-bullet,
    .hljs-selector-tag,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo {
        color: #D7BA7D;
    }
    
    .hljs-addition {
        background-color: #155a36;
        color: #dfdfdf;
        display: inline-block;
        width: 100%;
    }
    
    .hljs-deletion {
        background-color: #872e2e;
        color: #dfdfdf;
        display: inline-block;
        width: 100%;
    }
    
    /*---------- code highlight: Visual Stutdio Code theme for Prism.js ----------*/
    code[class*="language-"],
    pre[class*="language-"] {
        color: #DCDCDC;
    }
    
    :not(pre) > code[class*="language-"],
    pre[class*="language-"] {
        background: #1E1E1E;
    }
    
    .token.comment,
    .token.block-comment,
    .token.prolog,
    .token.cdata {
        color: #57A64A;
    }
    
    .token.doctype,
    .token.punctuation {
        color: #9B9B9B;
    }
    
    .token.tag,
    .token.entity {
        color: #569CD6;
    }
    
    .token.attr-name,
    .token.namespace,
    .token.deleted,
    .token.property,
    .token.builtin {
        color: #9CDCFE;
    }
    
    .token.function,
    .token.function-name {
        color: #dcdcaa;
    }
    
    .token.boolean,
    .token.keyword,
    .token.important {
        color: #569CD6;
    }
    
    .token.number {
        color: #B8D7A3;
    }
    
    .token.class-name,
    .token.constant {
        color: #4EC9B0;
    }
    
    .token.symbol {
        color: #f8c555;
    }
    
    .token.rule {
        color: #c586c0;
    }
    
    .token.selector {
        color: #D7BA7D;
    }
    
    .token.atrule {
        color: #cc99cd;
    }
    
    .token.string,
    .token.attr-value {
        color: #D69D85;
    }
    
    .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;
    }
    
    /*---------- code highlight: dark theme for Gist ----------*/
    .gist .gist-file {
        border: 1px solid #555;
    }
    
    .gist .gist-data {
        background-color: #1e1e1e;
        border-bottom: 1px solid #555;
    }
    
    .gist .gist-meta {
        background-color: #424a55;
        color: #eee;
    }
    
    .gist .gist-meta a {
        color: #eee;
    }
    
    .gist .highlight {
        color: #eee;
        background-color: #1e1e1e;
    }
    
    .gist .blob-num {
        color: #afafaf;
    }
    
    .gist .blob-code-inner {
        color: #dfdfdf;
    }
    
    .pl-mb {
        color: #fff !important;
    }
    
    .pl-c {
        color: #57A64A !important;
    }
    
    /* comment */
    .pl-ent {
        color: #569CD6 !important;
    }
    
    /* entity */
    .pl-e {
        color: #9CDCFE !important;
    }
    
    .pl-en {
        color: #4EC9B0 !important;
    }
    
    /* entity attribute */
    .pl-smi {
        color: #9CDCFE !important;
    }
    
    .pl-k {
        color: #569cd6 !important;
    }
    
    .pl-c1,
    .pl-s .pl-v {
        color: #4EC9B0 !important;
    }
    highlight .pl-pds,
    .pl-s,
    .pl-s .pl-pse .pl-s1,
    .pl-sr,
    .pl-sr .pl-cce,
    .pl-sr .pl-sra,
    .pl-sr .pl-sre,
    .pl-s .pl-s1 {
        color: #D69D85 !important;
    }
    
    .pl-s .pl-s1 .pl-pse {
        color: #c5dbff !important;
    }
    
    /* strings */
    .diff-table .pl-c,
    .diff-table .pl-ent,
    .diff-table .pl-e,
    .diff-table .pl-en,
    .diff-table .pl-pds,
    .diff-table .pl-s,
    .diff-table .pl-s .pl-s1,
    .diff-table .pl-s .pl-pse .pl-s1,
    .diff-table .pl-sr,
    .diff-table .pl-sr .pl-cce,
    .diff-table .pl-sr .pl-sra,
    .diff-table .pl-sr .pl-sre,
    .diff-table .pl-k,
    .diff-table .pl-smi,
    .diff-table .pl-c1,
    .diff-table .pl-v {
        color: #eee !important;
    }
    
    /* added by me */
    .community-button:hover {
        background-color: black;
    }
    
    .open-comments {
        background-color: #1e1e1e!important;
    }
    
    .ui-open-comments,
    .ui-open-comments.open {
        background-color: #1e1e1e!important;
        border-color: #1e1e1e!important;
    }
    
    .divider,
    .btn-group {
        border-color: #555555!important
    }
    
    .item.unhovered {
        background-color: #2a2a2a!important;
        color: white!important;
    }
    
    .ui-more-settings-menu-back {
        background-color: #1e1e1e !important;
        border-bottom: 1px solid #555555 !important;
    }
    
    .tab-item.active {
        color: white!important;
    }
    
    .modal-vertical-divider {
        background-color: #555555
    }
    
    .tab-slider-rail {
        background-color: #555555!important;
        border-color: #555555!important;
    }
    
    .example-syntax,
    .example-present {
        color: white!important;
    }
    
    .sidenav,
    main-sidenav,
    .sidenav-item {
        background-color: #1e1e1e!important;
        border-color: #555!important;
    }
    
    .divider-header {
        background-color: #2e2e2e!important;
    }
    
    .side-menu-button.focus {
        background-color: #2e2e2e!important;
    }
    
    .fa.fa-bars {
        color: white !important;
    }
    
    /* disabled because it looks like garbage
        .menu-body,
        .tabs-container,
        .nav,
        .nav-tabs,
        .tablist,
        .tab-title,
        .notification-component.unread,
        .ellipsis {
            background-color: #1e1e1e!important;
            border-color: #555555!important;
            color: white!important;
        }
        */
    }