dark-black.css

/***************************************************************
****************************************************************
****************************************************************
************************ DARK - BLACK **************************
****************************************************************
****************************************************************
***************************************************************/

.dark-theme,
html[data-theme=dark] {
    --ls-primary-background-color: #181818;
    --ls-secondary-background-color: #202020;
    --ls-tertiary-background-color: #303030;
    --ls-quaternary-background-color: #404040;
    --ls-table-tr-even-background-color: #36232b;
    --ls-active-primary-color: #c28eaa;
    --ls-active-secondary-color: #e8d0dc;
    --ls-block-properties-background-color: #272727;
    --ls-block-ref-link-text-color: #761a3f;
    --ls-search-background-color: var(--ls-primary-background-color);
    --ls-border-color: #292323;
    --ls-guideline-color: #232323;
    --ls-menu-hover-color: var(--ls-secondary-background-color);
    --ls-primary-text-color: #ffe0a7;
    --ls-secondary-text-color: #dfdfdf;
    --ls-title-text-color: #FFE27C;
    --ls-link-text-color: #b7dc6e;
    --ls-link-text-hover-color: #d6f991;
    --ls-link-ref-text-color: #cc515c;
    --ls-link-ref-text-hover-color: #EF515F;
    --ls-tag-text-color: var(--ls-link-ref-text-color);
    --ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color);
    --ls-slide-background-color: var(--ls-primary-background-color);
    --ls-block-bullet-border-color: #b187a5;
    --ls-block-bullet-color: #4c3841;
    --ls-block-highlight-color: #cc515c;
    --ls-selection-background-color: #AB3641;
    --ls-page-checkbox-color: #935c62;
    --ls-page-checkbox-border-color: var(--ls-primary-background-color);
    --ls-page-blockquote-color: var(--ls-primary-text-color);
    --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
    --ls-page-blockquote-border-color: #5d1f3d;
    --ls-page-inline-code-color: var(--ls-primary-text-color);
    --ls-page-inline-code-bg-color: #31282c;
    --ls-scrollbar-foreground-color: rgba(255, 255, 255, 0.05);
    --ls-scrollbar-background-color: rgba(67, 30, 41, 0.9);
    --ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.2);
    --ls-head-text-color: #FFE27C;
    --ls-icon-color: var(--ls-quaternary-background-color);
    --ls-search-icon-color: var(--ls-quaternary-background-color);
    --ls-a-chosen-bg: var(--ls-secondary-background-color);
    --ls-right-sidebar-code-bg-color: #3c041f;
    --color-level-1: var(--ls-secondary-background-color);
    --color-level-2: var(--ls-tertiary-background-color);
    --color-level-3: var(--ls-quaternary-background-color);
    --color-level-4: #632f46;
    --color-level-5: #865673;
    --color-level-6: #9e6889;
}


/***************************************************************
***************************** TOP ******************************
***************************************************************/


/* gradient on top and bottom for aesthetics */

.dark-theme .cp__sidebar-main-content:before {
    background: linear-gradient(to bottom, rgba(24, 24, 24, .7) 0%, rgba(24, 24, 24, 0) 100%);
}

.dark-theme .cp__sidebar-main-content:after {
    background: linear-gradient(to top, rgba(24, 24, 24, .7) 0%, rgba(24, 24, 24, 0) 100%);
}


/* < > buttons */

.dark-theme a[title="Go Back"],
.dark-theme a[title="Go Forward"] {
    background: rgba(24, 24, 24, 1);
}

.dark-theme a[title="Go Back"]:hover,
.dark-theme a[title="Go Forward"]:hover {
    background: rgb(35, 35, 35);
}


/* search-field */

.dark-theme #search_field {
    background: linear-gradient(to right, rgba(24, 24, 24, 1) 0%, rgba(24, 24, 24, .7) 200px, rgba(24, 24, 24, 0) 100%);
    transition: background .3s;
}

.dark-theme #search_field:focus {
    box-shadow: 0px 0px 20px 0px rgba(18, 18, 18, .8);
}


/***************************************************************
************************** MAIN AREA ***************************
***************************************************************/


/* title menu ... */

.dark-theme [title="More options"] svg {
    color: #854653;
}


/* text mark/highlight */

.dark-theme mark {
    background: #AB3641;
    color: var(--ls-primary-text-color);
}


/* bold and italics */

.dark-theme b,
.dark-theme strong,
.dark-theme i {
    color: #e4e0de;
}


/* page reference */

.dark-theme .page-reference:hover {
    background: var(--ls-secondary-background-color);
}

.dark-theme .references-blocks .page-reference:hover {
    background: var(--ls-tertiary-background-color);
}

.dark-theme .page-reference .text-gray-500 {
    /* page brackets */
    opacity: .3;
}


/* block reference */

.dark-theme .block-ref {
    background: rgba(70, 56, 61, .5);
    color: var(--ls-primary-text-color);
    border-bottom-color: rgba(121, 85, 106, .5);
}


/* selected block or higlighted page link */

.dark-theme .ls-block.selected .page-ref,
.dark-theme mark .page-ref {
    color: #EEB8BD;
}

.dark-theme .ls-block.selected .page-ref:hover,
.dark-theme mark .page-ref:hover {
    color: #F2DDDF;
}


/* checkbox */

.dark-theme .marker-switch {
    color: #000;
    background: #52373a;
}

.dark-theme .marker-switch:hover {
    background: #5d3e41;
}


/***************************************************************
************************ RIGHT SIDEBAR *************************
***************************************************************/

.dark-theme .cp__right-sidebar.is-open {
    background: rgba(92, 112, 128, 0.05);
}


/***************************************************************
**************************** MISC ******************************
***************************************************************/


/* dotted bg */

.dark-theme #app-container {
    background-image: radial-gradient(#373737 5%, #181818 5%);
    background-position: 0 0;
    background-size: 25px 25px;
}

.dark-theme textarea {
    caret-color: #cc515c;
}

.dark-theme ::selection {
    background: #EA989F;
}