@font-color: #fff;
@font-color-alternate: #000;
@font-color-primary: #3b3cea;
@background-color-custom-1: #292e33;
@background-color-custom-2: #1f2327;
@button-activated-bg-color: darken(#1890FF,40%);
@button-deactivated-color: transparent;

:root {
    --theme-mode: light;
    --font-color: @font-color;
    --color-alternate: @font-color-alternate;
    --font-color-primary: lighten(@font-color-primary, 20%);
    --color-accent-1-40: fade(@font-color-primary, 40%);
    --background-color-custom-1: @background-color-custom-1;
    --background-color-custom-1-70: fade(@background-color-custom-1, 90%);
    --background-color-custom-2: @background-color-custom-2;
    --button-activated-bg-color: @button-activated-bg-color;
    --success-button-font-color: limegreen;
}

body svg {
    // color: #fff;
}

// dark-mode for Markdown input
.CodeMirror {
    color: @font-color;
    border-color: @background-color-custom-1;
    background-color: @background-color-custom-1;
}
.EasyMDEContainer .editor-toolbar button.active {
    background-color: @font-color-alternate;
}
.EasyMDEContainer .CodeMirror-fullscreen {
    background-color: @background-color-custom-2;
}
.EasyMDEContainer .editor-toolbar.fullscreen {
    background-color: @background-color-custom-2;
}
.cm-s-easymde .CodeMirror-cursor {
    border-color: @font-color;
}
.editor-toolbar > * {
    color: @font-color;
}
.editor-toolbar > .active, .editor-toolbar > button:hover, .editor-preview pre, .cm-s-easymde .cm-comment {
    background-color: @background-color-custom-2
}
.editor-preview {
    background-color: @background-color-custom-1
}
#formula-input, .latex-container {
    color: @font-color-alternate;
}
// fin

//darkmode for react-confirm-alert-body
.react-confirm-alert-body {
    padding: 20px;
}

div.react-confirm-alert-body > h1 {
    font-size: 1.4rem;
    color: var(--color-alternate);
}

.react-confirm-alert-overlay {
    background-color: var(--background-color-custom-1-70);
}