/* Let's take out the inline styles from the original SVG and add them to a CSS file. Doing this will give us more control over the look and feel of the SVG, plus it allows us to create a reverse design using prefers-color-scheme media query. To simplify things for later on, let's rename the IDs to easily know what we are modifying.

There are a lot of styling options for SVGs...too many to list at least in this CodePen! Check out this article on "SVG Properties and CSS" by Katherine Kato for more details about currently supported options, plus some future SVG 2 options : https://css-tricks.com/svg-properties-and-css/

Note: you can create either a dark theme or a light theme - it just depends on what theme you start with as to what the alternate experience is. Keep in mind - both experiences need to meet WCAG color contrast ratio guidelines. One theme cannot just be your "accessible" theme and the other your "regular" theme. All experiences need to be inclusive. 

Can I Use: https://caniuse.com/?search=prefers-color-scheme */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Parisienne&display=swap");

body {
  font-family: "Parisienne", cursive;
  margin: 2rem;
}

a {
  color: #000000;
  text-decoration: underline;
  margin-left: 2rem;
  font-family: "Open Sans", sans-serif;
}

#wrapper {
  position: relative;
  width: 650px;
  height: 590px;
}

/* heart */
#heart {
  fill: #ff0000;
  stroke: #000000;
  stroke-width: 15;
  stroke-dasharray: 1, 30;
  stroke-linecap: round;
}

/* text */
#message {
  fill: #000000;
  font-size: 6rem;
  font-weight: bold;
}

/* bee */
#bee {
  width: 200px;
  position: absolute;
  bottom: 23%;
  left: 33%;
}

/* CSS + animation for default / light mode theme */
@media (prefers-color-scheme: dark) {
  body {
    background: #000000;
  }

  a {
    color: #ffffff;
    text-decoration: underline;
  }

  #heart {
    stroke: #ffffff;
  }

  #message {
    fill: #ffffff;
  }
}