portfoligor/assets/scss/_variables.scss

// Overide pico variables

:root {
  --pico-font-family-monospace: "mylilex",
                                monospace,
                                var(--pico-font-family-emoji);
  --pico-font-family: "mylilex", serif, var(--pico-font-family-emoji);
  --pico-font-weight: 400;
  --line-height-verse: 1.4;
  --verse-p-bottom-space: 2em;
  --verse-p-bottom-space-larger: 3em;
}

h1,
h2,
h3,
h4,
h5,
h6,
thead th,
thead td,
tfoot th,
tfoot td {
  --pico-font-weight: 700;
}

// Adapt the SVG logo color to the colorscheme

[data-theme=light],
:root:not([data-theme=dark]) {
  --logo-color: var(--pico-h1-color);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --logo-color: var(--pico-h1-color);
    // Use the pico color of the light theme to improve contrast
    // TODO: Explore if a variable could be used here
    --pico-mark-color: #373c44;
  }
}

[data-theme=dark] {
  --logo-color: var(--pico-h1-color);
  // Use the pico color of the light theme to improve contrast
  // TODO: Explore if a variable could be used here
  --pico-mark-color: #373c44;
}