NotQuiteSolarized

[transkatgirl]

NotQuiteSolarized

NotQuiteSolarized is a half-baked attempt at creating a Solarized-style theme for Portal. It has both light and dark variants.

This theme is confirmed to be compatible with the following Portal versions:

• v0.3.20
• v0.4.0

Light Variant

App Stylesheet:

:root {
    --text-color: #657b83;
    --background-color: #fdf6e3;
    --reader-background-color: #fdf6e3;
    --primary-card-color: #eee8d5;
    --secondary-card-color: #eee8d5;
    --button-color: #eee8d5;
    --top-navbar-color: #eee8d5;
    --side-navbar-color: #eee8d5;
    --primary-border-color: #93a1a1;
    --secondary-border-color: #93a1a1;
    --time-progress-color: #859900;
    --chapter-progress-color: #dc322f;
}

body {
    font: 1rem / 1.2 sans-serif, OpenMoji;
}

::selection {
    color: #839496;
    background-color: #002b36;
}

body:not(.course-viewer) h1::after {
    font-size: 1rem;
    font-weight: regular;
    content: "  +NotQuiteSolarized.Light";
}

Textbook Stylesheet:

body {
    font: 19px / 1.5 serif;
    background-color: #fdf6e3!important;
}

body * {
    color: #657b83!important;
    background-color: #fdf6e3!important;
}

::selection {
    color: #839496!important;
    background-color: #002b36!important;
}

Dark Variant

App Stylesheet:

:root {
    --text-color: #839496;
    --background-color: #002b36;
    --reader-background-color: #002b36;
    --primary-card-color: #073642;
    --secondary-card-color: #073642;
    --button-color: #073642;
    --top-navbar-color: #073642;
    --side-navbar-color: #073642;
    --primary-border-color: #586e75;
    --secondary-border-color: #586e75;
    --time-progress-color: #859900;
    --chapter-progress-color: #dc322f;
}

body {
    font: 1rem / 1.2 sans-serif, OpenMoji;
}

::selection {
    color: #657b83;
    background-color: #fdf6e3;
}

body:not(.course-viewer) h1::after {
    font-size: 1rem;
    font-weight: regular;
    content: "  +NotQuiteSolarized.Dark";
}

Textbook Stylesheet:

body {
    font: 19px / 1.5 serif;
    background-color: #002b36!important;
}

body * {
    color: #839496!important;
    background-color: #002b36!important;
}

::selection {
    color: #657b83!important;
    background-color: #fdf6e3!important;
}

Dark (App) + Light (Textbook) Variant

App Stylesheet:

:root {
    --text-color: #839496;
    --background-color: #002b36;
    --reader-background-color: #fdf6e3;
    --primary-card-color: #073642;
    --secondary-card-color: #073642;
    --button-color: #073642;
    --top-navbar-color: #073642;
    --side-navbar-color: #073642;
    --primary-border-color: #586e75;
    --secondary-border-color: #586e75;
    --time-progress-color: #859900;
    --chapter-progress-color: #dc322f;
}

body {
    font: 1rem / 1.2 sans-serif, OpenMoji;
}

::selection {
    color: #657b83;
    background-color: #fdf6e3;
}

body:not(.course-viewer) h1::after {
    font-size: 1rem;
    font-weight: regular;
    content: "  +NotQuiteSolarized.LightDark";
}

Textbook Stylesheet:

body {
    font: 19px / 1.5 serif;
    background-color: #fdf6e3!important;
}

body * {
    color: #657b83!important;
    background-color: #fdf6e3!important;
}

::selection {
    color: #839496!important;
    background-color: #002b36!important;
}

Other

If you do not wish to theme your textbooks, use the following Textbook Stylesheet with either variant:

body {
    color: black;
    background-color: white;
    font: 19px / 1.5 serif;
}