@geogirafe/lib-geoportal/styles/variables.css

GeoGirafe is a flexible application to build online geoportals.

body {
  --app-color-grey: #cbd5e1;
  --app-standard-height: 3.2rem;
  --app-footer-height: calc(var(--app-standard-height) / 1.2);
  --app-standard-border: 1px solid var(--app-color-grey);
  --bkg-color: rgb(255, 255, 255);
  --text-color: #222;
  --link-color: grey;

  --bx-shdw: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  --t-bkg: #ffffffbb;
  --legend-bkg: rgb(255, 255, 255);
  --text-color-grad1: #444;
  --text-color-grad2: #666;
  --bkg-color-grad1: #ddd;
  --bkg-color-grad2: #bbb;
  --bkg-color-input: #fff;
  --lnk: #0000ff;
  --lnk-visited: #800080;
  --lnk-hover: #0099ff;
  --lnk-active: #ff0000;
  --tst: #ff0000;
  --error-color: #bb0000;
  --warning-color: #ffa500;
  --success-color: #a8e9a8;
  --svg-filter: none;
  --svg-map-filter: none;
  --svg-legend-bkg: var(--legend-bkg);
}

/* Dark theme colors */
body.dark-theme {
  --bx-shdw: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 4px 0 rgba(255, 255, 255, 0.16);
  --t-bkg: #000000bb;
  --text-color: #eee;
  --text-color-grad1: #ccc;
  --text-color-grad2: #aaa;
  --bkg-color: rgb(34, 34, 34);
  --bkg-color-grad1: #444;
  --bkg-color-grad2: #666;
  --bkg-color-input: #ddd;
  --lnk: lightskyblue;
  --lnk-visited: #6d4b8d;
  --lnk-hover: #ffffff;
  --lnk-active: #ff4040;
  --error-color: #ff6347;
  --success-color: #529c52;
  --svg-filter: invert(1);
  --svg-legend-bkg: var(--legend-bkg);
}

/* Legends theme colors for the map */
body.light-map {
  --svg-map-filter: none;
}
body.dark-map {
  --svg-map-filter: invert(1) hue-rotate(180deg);
}

/* Styles for users who prefer dark mode at the OS level */
@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  body {
    --bx-shdw: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 4px 0 rgba(255, 255, 255, 0.16);
    --t-bkg: #000000bb;
    --legend-bkg: rgb(255, 255, 255);
    --text-color: #eee;
    --text-color-grad1: #ccc;
    --text-color-grad2: #aaa;
    --bkg-color: rgb(34, 34, 34);
    --bkg-color-grad1: #444;
    --bkg-color-grad2: #666;
    --bkg-color-input: #ddd;
    --lnk: lightskyblue;
    --lnk-visited: #6d4b8d;
    --lnk-hover: #ffffff;
    --lnk-active: #ff4040;
    --svg-filter: invert(1);
    --svg-map-filter: invert(1) hue-rotate(180deg);
    --svg-legend-bkg: var(--legend-bkg);
  }

  /* Override dark mode with light mode styles if the user decides to swap */
  body.light-theme {
    --bx-shdw: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.16);
    --t-bkg: #ffffffbb;
    --legend-bkg: rgb(255, 255, 255);
    --text-color: #222;
    --text-color-grad1: #444;
    --text-color-grad2: #666;
    --bkg-color: rgb(255, 255, 255);
    --bkg-color-grad1: #ddd;
    --bkg-color-grad2: #bbb;
    --bkg-color-input: #fff;
    --lnk: #0000ff;
    --lnk-visited: #800080;
    --lnk-hover: #0099ff;
    --lnk-active: #ff0000;
    --svg-filter: none;
    --svg-legend-bkg: var(--legend-bkg);
  }
  body.dark-theme.light-map {
    --svg-map-filter: none;
  }
  body.dark-theme.dark-map {
    --svg-map-filter: invert(1) hue-rotate(180deg);
  }
}