Notes/src/public/stylesheets/theme-next.css

:root {
    --main-font-family: "Inter Regular", sans-serif;
    --main-font-size: normal;

    --tree-font-family: var(--main-font-family);
    --tree-font-size: normal;

    --detail-font-family: var(--main-font-family);
    --detail-font-size: normal;

    --monospace-font-family: JetBrainsLight;
    --monospace-font-size: normal;
}

/*
 * THEME COLORS
 */

/* 
 * Light theme scheme
 */
:root {
   --theme-style: light;

   --main-background-color: white;
   --main-text-color: black;
   --main-border-color: #ccc;
   --dropdown-border-color: #ccc;
   --dropdown-shadow-opacity: .2;
   --dropdown-item-icon-destructive-color: #ec5138;
   --disabled-tooltip-icon-color: #004382;

   --accented-background-color: #f5f5f5;
   --more-accented-background-color: #ddd;

   --button-background-color: transparent;
   --button-border-color: #ddd;
   --button-text-color: black;
   --button-border-radius: 5px;
   --button-disabled-background-color: #ddd;
   --button-disabled-text-color: black;

   --primary-button-background-color: #6c757d;
   --primary-button-text-color: white;
   --primary-button-border-color: #6c757d;

   --muted-text-color: #666;

   --input-text-color: black;
   --input-background-color: transparent;

   --hover-item-text-color: black;
   --hover-item-background-color: transparent;
   --hover-item-border-color: #ccc;

   --active-item-text-color: black;
   --active-item-background-color: #ddd;
   --active-item-border-color: transparent;

   --menu-text-color: black;
   --menu-background-color: #ffffffd9;

   --modal-background-color: white;
   --modal-backdrop-color: black;

   --left-pane-background-color: #F3F3F3;
   --left-pane-text-color: #333;

   --launcher-pane-background-color: #F3F3F3;
   --launcher-pane-text-color: #333;

   --active-tab-background-color: #ddd;
   --active-tab-hover-background-color: #d1d1d1;
   --active-tab-text-color: black;

   --inactive-tab-background-color: #f0f0f0;
   --inactive-tab-hover-background-color: #e3e3e3;
   --inactive-tab-text-color: #666;

   --scrollbar-border-color: #ddd;
   --scrollbar-background-color: #ddd;
   --tooltip-background-color: #f8f8f8;
   --link-color: blue;

   --mermaid-theme: default;

   --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
}

/* 
 * Dark color scheme
 */

@media (prefers-color-scheme: dark) {
    :root {
        --theme-style: dark;        
    
        --main-background-color: #333;
        --main-text-color: #ccc;
        --main-border-color: #aaa;
        --dropdown-border-color: #555;
        --dropdown-shadow-opacity: .4;
        --dropdown-item-icon-destructive-color: #de6e5b;
        --disabled-tooltip-icon-color: #7fd2ef;
    
    
        --accented-background-color: #555;
        --more-accented-background-color: #777;
    
        --button-background-color: transparent;
        --button-border-color: #ccc;
        --button-text-color: currentColor;
        --button-border-radius: 5px;
        --button-disabled-background-color: transparent;
        --button-disabled-text-color: #999;
    
        --primary-button-background-color: #888;
        --primary-button-text-color: white;
        --primary-button-border-color: #999;
    
        --muted-text-color: #bbb;
    
        --input-text-color: #ccc;
        --input-background-color: #333;
    
        --hover-item-text-color: #ccc;
        --hover-item-background-color: transparent;
        --hover-item-border-color: #aaa;
    
        --active-item-text-color: black;
        --active-item-background-color: #777;
        --active-item-border-color: transparent;
    
        --menu-text-color: white;
        --menu-background-color: #222222d9;
    
        --modal-background-color: #333;
        --modal-backdrop-color: #444;
    
        --left-pane-background-color: #1f1f1f;
        --left-pane-text-color: #AAAAAA;
    
        --launcher-pane-background-color: #1f1f1f;
        --launcher-pane-text-color: #AAAAAA;
    
        --active-tab-background-color: #666;
        --active-tab-hover-background-color: #737373;
        --active-tab-text-color: #ccc;
    
        --inactive-tab-background-color: #444;
        --inactive-tab-hover-background-color: #525252;
        --inactive-tab-text-color: #bbb;
    
        --scrollbar-border-color: #666;
        --scrollbar-background-color: #333;
        --tooltip-background-color: #333;
        --link-color: lightskyblue;
    
        --mermaid-theme: dark;

        --code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    }
    
    body ::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
    
    body .CodeMirror {
        filter: invert(90%) hue-rotate(180deg);
    }
    
    .excalidraw.theme--dark {
        --theme-filter: invert(80%) hue-rotate(180deg) !important;
    }
    
    body .todo-list input[type="checkbox"]:not(:checked):before {
        border-color: var(--muted-text-color) !important;
    }
    
    .btn-close {
        filter: invert(1);
    }
}

/*
 * USER INTERFACE
 */

.dropdown-menu {
    backdrop-filter: blur(10px) saturate(6);
}

/*
 * TEXT NOTES
 */

/*
 * Code Blocks 
 */

.ck-content pre {
    border: 0;
    border-radius: 6px;
    box-shadow: var(--code-block-box-shadow);
    padding: 0 !important;
    margin-top: 2px !important;
    overflow: unset;
}

html .note-detail-editable-text :not(figure, .include-note):first-child {
    /* Create some space for the top-side shadow */
    margin-top: 1px !important;
}

.ck.ck-editor__editable pre[data-language]::after {
    --ck-color-code-block-label-background: rgba(128, 128, 128, .5);
    border-radius: 0 0 5px 5px;
    padding: 0px 10px;
    letter-spacing: .5px;
    font-weight: bold;
}

.ck-content pre code {
    display: block;
    padding: 1em;
    overflow: auto;
}

.ck-content pre code::-webkit-scrollbar {
    height: 6px;
}

.ck-content pre code::-webkit-scrollbar-thumb {
    height: 4px;
    border: none !important;
    background: gray !important;
}

.ck-content pre code::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    cursor: default;
}

.note-detail-printable:not(.word-wrap) pre code {
    white-space: pre;
    margin-right: 1em;
}

.code-sample-wrapper .hljs {
    transition: background-color linear 100ms;
}