<div class="bg-white text-black dark:bg-black dark:text-white">
  <div>
    <quote class="text-c-stronginvert">
        “Any sufficiently advanced technology is
        indistinguishable from magic”
    </quote>
        <div hover="bg-c-blue" >
      This element has a blue background when hovered
    </div>
    <div class="mt-4">
        Arthur C. Clarke
    </div>
  </div>
  <div>
    <div class="bg-c-primary:-10">1</div>
    <div class="bg-c-primary:-5">2</div>
    <div class="bg-c-primary">3</div>
    <div class="bg-c-primary:+5">4</div>
    <div class="bg-c-primary:+10">5</div>
  </div>

</div>
</html>

<div class="bg-c-body text-c-invert">
  <div>
      <quote class="text-c-stronginvert">
          “Any sufficiently advanced technology is
          indistinguishable from magic”
      </quote>
        <div hover="bg-c-red" >
      This element has a red background when hovered
    </div>
      <div class="mt-4">
          Arthur C. Clarke
      </div>
  </div>
  <div>
      <div class="bg-c-primary:-10">1</div>
      <div class="bg-c-primary:-5">2</div>
      <div class="bg-c-primary">3</div>
      <div class="bg-c-primary:+5">4</div>
      <div class="bg-c-primary:+10">5</div>
  </div>
</div>

// Import Mojo CSS
import mojo from "https://esm.sh/mojocss"

// Initialize
//mojo()
// ... defining new themes and colors
mojo({
  base: {
    themes: {
      default: {
        body: "#000076",
        invert: "#6b88a5",
        primary: "#ff6145",
        customname: "#1f1d2b",
      },
      dim: {
        body: "#1a2a39",
        invert: "#90a4b8",
        customname: "#e1f0ff",
      },
      blackout: {
        body: "#000",
        invert: "#999",
        customname: "#e1f0ff",
      },
    },
  }
});