---
# System prepended metadata

title: atom-theme
tags: [theme]

---

---
title: atom-theme
tags: theme
description: 
---

<style>



/*--------------- view ---------------*/

body[style],
body[style*="background-color: white;"] {
    background-color: #282C34 !important;
}    

body {
    color: #abb2bf;
}

.ui-view-area,
.markdown-body,
.ui-content {
    background: #282C34;
    color: #abb2bf;
}

h1 {
  font-size: 28px;
  color: #BF616A;
}

h2 {
  font-size: 24px;
  color: #CC856E;
}

h3 {
  font-size: 18px;
  color: #EBCB8B
}

h4 {
  font-size: 16px;
  color: #A3BE8C
}

h5 {
  font-size: 14px;
  color: #46BDDF
}

h6 {
  color: #777777;
  font-size: 14px;
}

p {
    color: #ABB2BF;
}


/* 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: #21252B;
    border-color: #1B2327;
}

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

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

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

.navbar .btn-group label.active {
    background-color: #6DB9AB;
    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: #6DB9AB;
}

.dropdown-header {
    color: #eee;
}

.dropdown-menu {
    background-color: #21252B;
    border: 1px solid #1e1e1e;
}

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

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    background-color: #6DB9AB;
    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: #1e1e1e !important;
    background-color: #21252B !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: #6DB9AB !important;
    color: #FFF !important;
}

.permission-dropdown .ui-more-settings,
.permission-dropdown .sidenav-trigger {
    color: #7bf;
}

.public-published-toggle .unpublish:hover {
    background-color: #6DB9AB;
}

.menuitem-dropdown .menuitem-dropdown-trigger {
    border-color: #1E1E1E;
}

.menuitem-dropdown .menuitem-dropdown-trigger:hover,
.menuitem-dropdown .menuitem-dropdown-trigger:focus {
    color: #FFFFFF;
    background-color: #6DB9AB;
}

.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: #8e8e8e;
}

.multi-select-dropdown-menu .dropdown-options .ui-option:hover {
    background-color: #6DB9AB;
    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 {
    background-color: #3e4045;
}

.search {
    background-color: #3e4045;
    color: #eee;
}

.btn.btn-gray {
    background: #1b1b1b;
}

.btn.btn-gray:hover {
    background: #6DB9AB;
    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: #FFFFF;
    background-color: #21252B;
    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: #21252B;
}

.btn-default:hover {
    color: #FFFFFF;
    background-color: #6DB9AB;
    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-open-comments{
    background-color: #21252B;
    border-color = #6DB9AB;
}

.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: #6DB9AB;
}

.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: #FFFFF;
}

footer {
    background: #21252B;
    color: #bbb;
    border-top: 2px solid #454545;
}

footer a {
    color: #bbb;
}
/*--------------- doc view ---------------*/

.markdown-body blockquote {
    color: #ddd;
    border-left-width: 6px;
    border-left-color: #6DB9AB;
    background-color: #21252B;
    padding: 16px;
    padding-left: 24px;
    font-size: 16px;
}

.markdown-body img {
    background-color: transparent;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.markdown-body code,
code {
    color: #dfdfdf !important;
    background-color: #21252B;
}

.markdown-body code {
    padding: 1px 2px;
}

.markdown-body pre {
    background-color: #21252B;
    border: 1px solid #555 !important;
    color: #dfdfdf;
}

.markdown-body details {
    margin-bottom: 16px;
}

/* 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 #BF616A;
}

.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: #7C9070;
    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: #282C34;
    border-color: #626262;
    position: center-align;
}

.markdown-body table tr:last-child {
    border-bottom: 1px solid #626262;
}

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


.markdown-body table tr th {
    color: #A467B8;
}

.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-child {
    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 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: #721c24;
}

.alert-danger hr {
    background-color: #721c24;
}

.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: #856404;
}

.alert-warning hr {
    background-color: #856404;
}

.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: #155724;
}

.alert-success hr {
    background-color: #155724;
}

.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: #004085;
}

.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;
}

.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: #21252B;
    border: 1px solid #21252B;
    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: #8e8e8e !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;
    border-left-width: 4px;
}


/* 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;
    border-left-width: 4px;
}

/* drop down floating table of contents */

.ui-toc-dropdown.dropdown-menu {
    background: #21252B;
}

.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: #21252B;
}

.btn.focus,
.btn:focus,
.btn:hover {
    color: #fff;
    background-color: #6DB9AB;
}

.summary {
    background: #21252B;
    border-color: #21252B;
}

.summary,
.toolbar {
    background: #21252B !important;
    border-color: #21252B !important;
}

.toolbar i {
    color: #fff;
}

.summary h1,
.summary h2,
.summary h3 .summary hr {
    color: ;
    border-color: #777 !important;
}

.summary .nav>li>a {
    color: #777;
}

.summary .nav-pills>li.active>a,
.summary .nav-pills>li.active>a:focus,
.summary .nav-pills>li.active>a:hover {
    color: #6DB9AB;
}

.ui-summary-search {
    font-size: 16px;
    border: 1px solid #6D6D6D;
    background-color: #282C34;
    color: #FFFFF;
}

.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: #282C34;
    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: #21252B;
    color: #eee;
    border-color: #777;
}

.ui-comment-container {
    background-color: #21252B;
    border-color: #777;
    }


.ui-comment-container .ui-comments-container .ui-comment .comment-author {
    color: #CC856E;
}

.ui-comment-container .ui-comments-container .ui-comment .timestamp {
    color: ;
}

.ui-comment-container .ui-comments-container .ui-comment .comment-content {
    color: #A3BE8C;
}

.ui-comment-container .ui-comments-container .ui-comment .comment-menu {
    color: #CC856E;
}

.ui-comment-container .ui-comments-container .ui-comment .comment-menu .comment-dropdown-menu {
    background: #21252B;
    color: #eee;
    border-color: #13171A;
}

.ui-comment-container .ui-comments-container .ui-comment .comment-menu .comment-dropdown-menu>div:hover {
    background-color: #21252B;
    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: #21252B;
    color: #eee;
}

.ui-comment-container .ui-comment-input-container {
    background-color: #21252B;
}

.ui-comment-container textarea {
    background-color: #282C34;
    color: #eee;
    border: 1px #777;
}

.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: #7C9070;
    }
    30% {
        background-color: #7C9070;
    }
    100% {
        background-color: #7C9070;
    }
}


#container{
  border:1px solid #333;
  border-radius :20px;
  width:400px;
  margin:20px auto;
  padding:20px;
  text-align:center;
  background : #333;
}

</style>