Evoke - respect dark mode

userscript.js

// ==UserScript==
// @name         Evoke - respect dark mode
// @namespace    https://party.evoke.eu/
// @version      1.1.2
// @description  Adds a prefers-color-scheme: dark override for party.evoke.eu (Pico-based) and 2026.evoke.eu (utility-class-based), both of which hardcode a bright palette.
// @match        https://party.evoke.eu/*
// @match        https://2026.evoke.eu/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

(() => {
  const css = `
@media (prefers-color-scheme: dark) {
  :root {
    --pico-background-color: #0a1a2e !important;
    --pico-color: #b0bccc !important;
    --pico-h2-color: #f6e82e !important;
    --pico-h3-color: #f6e82e !important;
    --pico-muted-color: #9fb3c8 !important;
    --pico-primary: #f6e82e !important;
    --pico-primary-hover: #ffffff !important;
    --pico-primary-background: #f6e82e !important;
    --pico-secondary: #ffffff !important;
    --pico-secondary-hover: #f6e82e !important;
    --pico-card-background-color: #12263f !important;
    --pico-card-sectioning-background-color: #12263f !important;
    --pico-card-border-color: #1f3a5f !important;
    --pico-underline: #f6e82e !important;
    --pico-switch-background-color: #12263f !important;
    --uploadroles-release-color: #0a1a2e !important;
    --uploadroles-votingpreview-color: #0a1a2e !important;
    --uploadroles-workingstage-color: #0a1a2e !important;
  }

  html {
    background-color: #060f1c !important;
    color: #b0bccc !important;
  }

  body {
    background-color: #0a1a2e !important;
    color: #b0bccc !important;
  }

  /* theme.css forces navy text on .cards because it assumes yellow card backgrounds.
     Our dark cards need light text back. */
  .cards,
  .cards header,
  .cards .description,
  body:not(.admin) .entry-frame,
  body:not(.admin) .uploadrole.votingpreview,
  body:not(.admin) .uploadrole.release,
  body:not(.admin) .uploadrole.workingstage,
  #voting .entries,
  #voting .entry-preview-unkown,
  #voting .entry-preview-unkown a {
    color: #b0bccc !important;
  }

  /* Yellow links stay yellow, but navy-on-yellow buttons need to keep their
     contrast — leave them alone. party.evoke.eu marks them with role="button";
     2026.evoke.eu uses class="button" on plain <a>. */
  body:not(.admin) a:not([role="button"]):not(.button) {
    color: #f6e82e !important;
    text-decoration-color: #f6e82e !important;
  }

  /* Dialogs inherit dark surface. */
  dialog,
  dialog article {
    background-color: #12263f !important;
    color: #b0bccc !important;
  }
  dialog p,
  dialog h3,
  dialog li,
  dialog a,
  dialog label {
    color: #b0bccc !important;
  }

  /* Tables. */
  table, thead, tbody, tr, td, th {
    color: #b0bccc !important;
    border-color: #1f3a5f !important;
  }

  /* Form fields. */
  input, select, textarea {
    background-color: #12263f !important;
    color: #b0bccc !important;
    border-color: #1f3a5f !important;
  }

  /* Header hero image can be a bit heavy on a dark page. */
  header.logo {
    filter: brightness(0.85);
  }

  /* theme.css sets ::selection to bright yellow; inherited white text gives
     yellow-on-white with no contrast. Force navy text on the yellow highlight. */
  ::selection {
    background-color: #f6e82e !important;
    color: #0a1a2e !important;
  }

  /* Form section panels default to lightblue — no contrast with white text. */
  #add-entry form .section,
  #edit-entry form .section {
    background-color: #12263f !important;
    color: #b0bccc !important;
    border: 1px solid #1f3a5f;
  }

  /* Primary action buttons: bright yellow is too much surface area in dark mode.
     Swap to a dark navy button with yellow text + yellow outline. */
  body:not(.admin) [role="button"],
  body:not(.admin) button,
  body:not(.admin) input[type="submit"] {
    color: #f6e82e !important;
    background-color: #12263f !important;
    border-color: #f6e82e !important;
  }
  body:not(.admin) [role="button"]:hover,
  body:not(.admin) button:hover,
  body:not(.admin) input[type="submit"]:hover {
    color: #12263f !important;
    background-color: #f6e82e !important;
    border-color: #f6e82e !important;
  }

  /* Vote-star buttons: the site paints star glyphs on .star and hides
     the inner "1..5" button text via a transparent, borderless button.
     The generic restyle above turns those buttons back into chunky navy
     chips — masking the glyph and exposing the number. Opt them out. */
  body:not(.admin) .place-vote button,
  body:not(.admin) .place-vote button:hover {
    color: inherit !important;
    background-color: transparent !important;
    border-color: transparent !important;
    font-size: 0 !important;
  }

  /* Recolor the stars for dark mode — theme.css uses translucent blue
     (#0366cfaa) which disappears against navy. Dim yellow at rest;
     brighten on hover (cascading through lower-rated siblings via ~,
     matching the site's original selector) and on .selected. */
  #voting .vote .star {
    color: #f6e82e66 !important;
  }
  #voting .vote .star:hover,
  #voting .vote .star:hover ~ .star,
  #voting .vote .star.selected,
  #voting .vote .star.selected ~ .star {
    color: #f6e82e !important;
  }

  /* -----------------------------------------------------------------
     2026.evoke.eu — utility-class-based, not Pico.
     body is already #091e36 with white text, but the page content
     wrapper is .bg-white and the footer is .bg-yellow, both of which
     force bright surfaces around otherwise white text.
     ----------------------------------------------------------------- */

  /* Main page wrapper: white → dark navy so inherited white text is
     readable. Scoped to .mxw-page so we don't accidentally flip other
     utility usages. */
  .mxw-page.bg-white {
    background-color: #091e36 !important;
  }

  /* Ensure body-text content stays readable on the now-dark wrapper.
     Body inherits pure #fff — soften to a warm off-white for less
     eye-strain contrast against the navy background. */
  .mxw-page .body-text,
  .mxw-page .body-text h1,
  .mxw-page .body-text h2,
  .mxw-page .body-text h3,
  .mxw-page .body-text p,
  .mxw-page .body-text li,
  .mxw-page .body-text td,
  .mxw-page .body-text th {
    color: #b0bccc !important;
  }

  /* Table borders default to light blue on white — fine on dark too,
     but soften a touch. */
  .mxw-page .table,
  .mxw-page .table td {
    border-color: #1f3a5f !important;
  }

  /* Timetable labels: original palette is fully-saturated with a couple
     that break on dark — .label--general is a white block, and
     .label--djset / --liveact use navy bg that matches the page and
     disappears. Recolor as tinted outlined chips: light hue text on a
     translucent tint of the same hue with a matching border. */
  .mxw-page .label {
    border: 1px solid currentColor !important;
    border-radius: 2px;
    padding: 0 .35em !important;
  }
  .mxw-page .label--general {
    color: #cdd8e8 !important;
    background-color: rgba(205, 216, 232, 0.12) !important;
  }
  .mxw-page .label--event {
    color: #f38fb8 !important;
    background-color: rgba(233, 82, 150, 0.15) !important;
  }
  .mxw-page .label--liveact,
  .mxw-page .label--liveset,
  .mxw-page .label--djset {
    color: #a8b8e8 !important;
    background-color: rgba(121, 137, 248, 0.15) !important;
  }
  .mxw-page .label--competition {
    color: #c4ed04 !important;
    background-color: rgba(196, 237, 4, 0.12) !important;
  }
  .mxw-page .label--deadline {
    color: #ff7a80 !important;
    background-color: rgba(216, 9, 18, 0.18) !important;
  }
  .mxw-page .label--seminar {
    color: #fdb64a !important;
    background-color: rgba(254, 157, 4, 0.15) !important;
  }

  /* Header band uses .bg-blue-dark (#0366cf) — bright cyan-blue slab
     above the dark page. Swap for the page navy so the header blends. */
  .mxw-page > .bg-blue-dark {
    background-color: #091e36 !important;
  }

  /* Footer: bright yellow wall → dark surface with yellow accents. */
  .main-footer.bg-yellow {
    background-color: #0a1a2e !important;
    color: #b0bccc !important;
  }
  .main-footer .cl-text-inverted {
    color: #b0bccc !important;
  }
  /* Social icons are filled navy (#091e36) — invisible on dark. */
  .main-footer .main-footer__social-media__item svg path {
    fill: #f6e82e !important;
  }
  /* Partner tiles already have navy bg + yellow border; keep as-is. */

  /* Nav dropdown wrapper on mobile has box-shadow: 0 0 100px #000 which
     bleeds oddly over dark. Tone down. */
  .main-nav__wrapper {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6) !important;
  }

  /* Header hero image is a bit heavy on dark; dim slightly. */
  .bg-hero {
    filter: brightness(0.75);
  }

  /* Landing-page illustration is a bright saturated block against navy —
     dim and desaturate a touch so it sits with the page. */
  img[src$="illustration.png"] {
    filter: brightness(0.8) saturate(0.85);
  }
}
`;

  const inject = () => {
    const style = document.createElement('style');
    style.id = 'evoke-party-dark-userscript';
    style.textContent = css;
    (document.head || document.documentElement).appendChild(style);
  };

  if (document.head) {
    inject();
  } else {
    new MutationObserver((_, obs) => {
      if (document.head) { inject(); obs.disconnect(); }
    }).observe(document.documentElement, { childList: true });
  }
})();