Heracles/static/site.css

:root {
    /* Base colors */
    --background-color: #FFFFFF; /* Light background */
    --text-color: #333333; /* Dark text for contrast */
    --paper-background-color: #F0F0F0;
    --plot-background-color: #FFFFFF;
    --accent-color: #6200EE; /* For buttons and interactive elements */

    /* Axis and grid lines */
    --axis-color: #CCCCCC;
    --grid-line-color: #EEEEEE;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Solarized Dark Base Colors */
        --background-color: #002b36; /* base03 */
        --paper-background-color: #003c4a;
        --plot-background-color: rgb(24, 34, 21);
        --text-color: #839496; /* base0 */
        --accent-color: #268bd2; /* blue */

        /* Axis and grid lines */
        --axis-color: #586e75; /* base01 */
        --grid-line-color: #073642; /* base02 */
    }
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

input, textarea, select, option, button {
    background-color: var(--paper-background-color);
    border: 1px solid var(--accent-color);
    color: var(--text-color);
    padding: 8px;
    border-radius: 4px;
}

body * {
    padding-left: .3em;
    padding-right: .3em;
}

.column-flex {
   display: flex;
   flex-direction: column;
}

.row-flex {
   display: flex;
   flex-direction: row;
}

.flex-item-grow {
   flex: 1 0 auto;
}

.flex-item-shrink {
   flex: 0 1 auto;
}

graph-plot {
    background-color: var(--paper-background-color);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}