extra.css

/* Setting main color theme to schdesign style <3 */

[data-md-color-scheme="default"] { /* Only applied when light theme (default) is selected */

  --schdesign-hue: 353;

  --md-primary-fg-color:               hsla(var(--schdesign-hue), 93%, 63%, 1);
  --md-primary-fg-color--light:        hsla(var(--schdesign-hue), 93%, 90%, 1);
  --md-primary-fg-color--dark:         hsla(var(--schdesign-hue), 93%, 20%, 1);
  --md-primary-bg-color:               hsla(0, 0%, 100%, 1);
  --md-primary-bg-color--light:        hsla(0, 0%, 100%, 0.7);

  --md-accent-fg-color:                hsla(var(--schdesign-hue), 90%, 63%, 1);
  --md-accent-fg-color-invert: #7b88cc;
  --md-accent-fg-color--transparent:   hsla(var(--schdesign-hue), 90%, 63%, 0.1);
  --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
  --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);
}

[data-md-color-scheme="slate"] { /* Only applied when dark theme (slate) is selected */
  --schdesign-hue: 0;

  --md-primary-fg-color:               hsla(var(--schdesign-hue), 0%, 24%, 1);
  --md-primary-fg-color--light:        hsla(var(--schdesign-hue), 0%, 48%, 1);
  --md-primary-fg-color--dark:         hsla(var(--schdesign-hue), 0%, 12%, 1);
  --md-primary-bg-color:               hsla(0, 0%, 100%, 1);
  --md-primary-bg-color--light:        hsla(0, 0%, 100%, 0.7);


  --md-accent-fg-color: #7b88cc;
  --md-accent-fg-color-invert:                hsla(353, 93%, 63%, 1);
  --md-accent-fg-color--transparent:   hsla(353, 90%, 63%, 0.1);
  --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
  --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);

  --md-typeset-a-color: var(--md-accent-fg-color); /* make links readable in main */
}

/* Setting footer's background color to match the theme */
:root > * {
  --md-footer-fg-color:              hsla(0, 0%, 100%, 1);
  --md-footer-fg-color--light:       hsla(0, 0%, 100%, 0.7);
  --md-footer-fg-color--lighter:     hsla(0, 0%, 100%, 0.3);
  --md-footer-bg-color:              hsla(0, 0%, 24%, 0.87);
  --md-footer-bg-color--dark:        hsla(0, 0%, 24%, 0.32);
}

/* Use the inver color on links in left and right navigation side */
.md-nav__link:hover {
  color: var(--md-accent-fg-color-invert);
}

/* make links in main dotted */
.md-content a[href]  {
  text-decoration: underline dotted var(--md-accent-fg-color);
}

/* make links in main dotted and invert color on hover */
.md-content a[href]:hover  {
  color: var(--md-accent-fg-color-invert);
  text-decoration: underline dotted var(--md-accent-fg-color-invert);
}

/* Use reddish logo when in dark mode */
[data-md-color-scheme="slate"] img[alt="logo"] {
  content: url("../../img/schdesign_s_logo_red.svg");
}