From e24945d0683f34bbcd247e49d2ac0bd71f3c0136 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 12 Jul 2023 10:45:49 -0700
Subject: [PATCH 1/6] docs(animations): add playground for preference based

Co-authored-by: dillionmegida <dillionmegida@gmail.com>
---
 docs/utilities/animations.md                  | 97 +------------------
 .../angular/example_component_css.md          | 16 +++
 .../angular/example_component_html.md         |  9 ++
 .../angular/example_component_ts.md           | 41 ++++++++
 .../v7/animations/preference-based/demo.html  | 72 ++++++++++++++
 .../v7/animations/preference-based/index.md   | 35 +++++++
 .../animations/preference-based/javascript.md | 35 +++++++
 .../preference-based/react/main_css.md        | 16 +++
 .../preference-based/react/main_tsx.md        | 53 ++++++++++
 .../v7/animations/preference-based/vue.md     | 68 +++++++++++++
 10 files changed, 348 insertions(+), 94 deletions(-)
 create mode 100644 static/usage/v7/animations/preference-based/angular/example_component_css.md
 create mode 100644 static/usage/v7/animations/preference-based/angular/example_component_html.md
 create mode 100644 static/usage/v7/animations/preference-based/angular/example_component_ts.md
 create mode 100644 static/usage/v7/animations/preference-based/demo.html
 create mode 100644 static/usage/v7/animations/preference-based/index.md
 create mode 100644 static/usage/v7/animations/preference-based/javascript.md
 create mode 100644 static/usage/v7/animations/preference-based/react/main_css.md
 create mode 100644 static/usage/v7/animations/preference-based/react/main_tsx.md
 create mode 100644 static/usage/v7/animations/preference-based/vue.md

diff --git a/docs/utilities/animations.md b/docs/utilities/animations.md
index 3ebcddb2835..31561f7777b 100644
--- a/docs/utilities/animations.md
+++ b/docs/utilities/animations.md
@@ -773,104 +773,13 @@ In this example we are creating a track along which we can drag the `.square` el
 
 Developers can also tailor their animations to user preferences such as `prefers-reduced-motion` and `prefers-color-scheme` using CSS Variables.
 
-### Usage
-
-```css
-.square {
-  width: 100px;
-  height: 100px;
-  opacity: 0.5;
-  background: blue;
-  margin: 10px;
-
-  --background: red;
-}
-
-@media (prefers-color-scheme: dark) {
-  .square {
-    --background: green;
-  }
-}
-```
-
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```javascript
-createAnimation()
-   .addElement(document.querySelector('.square'))
-   .duration(1500)
-   .iterations(Infinity)
-   .direction('alternate')
-   .fromTo('background', 'blue', 'var(--background)');
-```
-</TabItem>
-<TabItem value="angular">
-
-```javascript
-this.animationCtrl.create()
-   .addElement(this.square.nativeElement)
-   .duration(1500)
-   .iterations(Infinity)
-   .direction('alternate')
-   .fromTo('background', 'blue', 'var(--background)');
-```
-</TabItem>
-<TabItem value="react">
-
-```tsx
-<CreateAnimation
-  duration={1500}
-  iterations={Infinity}
-  direction='alternate'
-  fromTo={{
-    property: 'background',
-    fromValue: 'blue',
-    toValue: 'var(--background)'
-  }}
->
-  <div className="square"></div>
-</CreateAnimation>
-```
-</TabItem>
-<TabItem value="vue">
-
-```javascript
-import { createAnimation } from '@ionic/vue';
-import { ref } from 'vue';
-
-...
-
-const squareRef = ref();
-
-...
-
-createAnimation()
-   .addElement(squareRef.value)
-   .duration(1500)
-   .iterations(Infinity)
-   .direction('alternate')
-   .fromTo('background', 'blue', 'var(--background)');
-```
-</TabItem>
-</Tabs>
-````
-
 This method works in all supported browsers when creating animations for the first time. Most browsers are also capable of dynamically updating keyframe animations as the CSS Variables change.
 
 Safari does not currently support dynamically updating keyframe animations. For developers who need this kind of support in Safari, they can use [MediaQueryList.addListener()](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener).
 
-<Codepen user="ionic" slug="JjjYVKj" />
+import PreferenceBased from '@site/static/usage/v7/animations/preference-based/index.md';
+
+<PreferenceBased />
 
 ## Overriding Ionic Component Animations
 
diff --git a/static/usage/v7/animations/preference-based/angular/example_component_css.md b/static/usage/v7/animations/preference-based/angular/example_component_css.md
new file mode 100644
index 00000000000..eb219f43513
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/angular/example_component_css.md
@@ -0,0 +1,16 @@
+```css
+ion-card {
+  color: white;
+  opacity: 0.5;
+  background: blue;
+  margin: 10px;
+
+  --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+  ion-card {
+    --background: green;
+  }
+}
+```
diff --git a/static/usage/v7/animations/preference-based/angular/example_component_html.md b/static/usage/v7/animations/preference-based/angular/example_component_html.md
new file mode 100644
index 00000000000..3a27660393a
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+<ion-card #card>
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" (click)="play()">Play</ion-button>
+<ion-button id="pause" (click)="pause()">Pause</ion-button>
+<ion-button id="stop" (click)="stop()">Stop</ion-button>
+```
diff --git a/static/usage/v7/animations/preference-based/angular/example_component_ts.md b/static/usage/v7/animations/preference-based/angular/example_component_ts.md
new file mode 100644
index 00000000000..c0e383d5ec0
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+  @ViewChild(IonCard, { read: ElementRef }) card: ElementRef<HTMLIonCardElement>;
+
+  private animation: Animation;
+
+  constructor(private animationCtrl: AnimationController) {}
+
+  ngAfterViewInit() {
+    this.animation = this.animationCtrl
+      .create()
+      .addElement(this.card.nativeElement)
+      .duration(1500)
+      .iterations(Infinity)
+      .direction('alternate')
+      .fromTo('background', 'blue', 'var(--background)');
+  }
+
+  play() {
+    this.animation.play();
+  }
+
+  pause() {
+    this.animation.pause();
+  }
+
+  stop() {
+    this.animation.stop();
+  }
+}
+```
diff --git a/static/usage/v7/animations/preference-based/demo.html b/static/usage/v7/animations/preference-based/demo.html
new file mode 100644
index 00000000000..3eb962c0c8c
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/demo.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Animation</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+    <script type="module">
+      import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
+      window.createAnimation = createAnimation;
+
+      const animation = createAnimation()
+        .addElement(document.querySelector('#card'))
+        .duration(1500)
+        .iterations(Infinity)
+        .direction('alternate')
+        .fromTo('background', 'blue', 'var(--background)');
+
+      document.querySelector('#play').addEventListener('click', () => {
+        animation.play();
+      });
+
+      document.querySelector('#pause').addEventListener('click', () => {
+        animation.pause();
+      });
+
+      document.querySelector('#stop').addEventListener('click', () => {
+        animation.stop();
+      });
+    </script>
+
+    <style>
+      .container {
+        flex-direction: column;
+      }
+
+      ion-card {
+        width: 70%;
+
+        color: white;
+        opacity: 0.5;
+        background: blue;
+        margin: 10px;
+
+        --background: red;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        ion-card {
+          --background: green;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <ion-card id="card">
+        <ion-card-content>Card</ion-card-content>
+      </ion-card>
+
+      <div>
+        <ion-button id="play">Play</ion-button>
+        <ion-button id="pause">Pause</ion-button>
+        <ion-button id="stop">Stop</ion-button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/static/usage/v7/animations/preference-based/index.md b/static/usage/v7/animations/preference-based/index.md
new file mode 100644
index 00000000000..e4f2597a6df
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/animations/preference-based/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/animations/preference-based/javascript.md b/static/usage/v7/animations/preference-based/javascript.md
new file mode 100644
index 00000000000..6802f50726f
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/javascript.md
@@ -0,0 +1,35 @@
+```html
+<ion-card id="card">
+  <ion-card-content>Card</ion-card-content>
+</ion-card>
+
+<ion-button id="play" onclick="animation.play()">Play</ion-button>
+<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
+<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+
+<script>
+  var animation = createAnimation()
+    .addElement(document.querySelector('#card'))
+    .duration(1500)
+    .iterations(Infinity)
+    .direction('alternate')
+    .fromTo('background', 'blue', 'var(--background)');
+</script>
+
+<style>
+  ion-card {
+    color: white;
+    opacity: 0.5;
+    background: blue;
+    margin: 10px;
+
+    --background: red;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    ion-card {
+      --background: green;
+    }
+  }
+</style>
+```
diff --git a/static/usage/v7/animations/preference-based/react/main_css.md b/static/usage/v7/animations/preference-based/react/main_css.md
new file mode 100644
index 00000000000..eb219f43513
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/react/main_css.md
@@ -0,0 +1,16 @@
+```css
+ion-card {
+  color: white;
+  opacity: 0.5;
+  background: blue;
+  margin: 10px;
+
+  --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+  ion-card {
+    --background: green;
+  }
+}
+```
diff --git a/static/usage/v7/animations/preference-based/react/main_tsx.md b/static/usage/v7/animations/preference-based/react/main_tsx.md
new file mode 100644
index 00000000000..5586af54542
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/react/main_tsx.md
@@ -0,0 +1,53 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  const cardEl = useRef<HTMLIonCardElement | null>(null);
+
+  const animation = useRef<Animation | null>(null);
+
+  useEffect(() => {
+    if (animation.current === null) {
+      animation.current = createAnimation()
+        .addElement(cardEl.current!)
+        .duration(1500)
+        .iterations(Infinity)
+        .direction('alternate')
+        .fromTo('background', 'blue', 'var(--background)');
+    }
+  }, [cardEl]);
+
+  const play = () => {
+    animation.current?.play();
+  };
+  const pause = () => {
+    animation.current?.pause();
+  };
+  const stop = () => {
+    animation.current?.stop();
+  };
+
+  return (
+    <>
+      <IonCard ref={cardEl}>
+        <IonCardContent>Card</IonCardContent>
+      </IonCard>
+
+      <IonButton id="play" onClick={play}>
+        Play
+      </IonButton>
+      <IonButton id="pause" onClick={pause}>
+        Pause
+      </IonButton>
+      <IonButton id="stop" onClick={stop}>
+        Stop
+      </IonButton>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/animations/preference-based/vue.md b/static/usage/v7/animations/preference-based/vue.md
new file mode 100644
index 00000000000..de6857565aa
--- /dev/null
+++ b/static/usage/v7/animations/preference-based/vue.md
@@ -0,0 +1,68 @@
+```html
+<template>
+  <ion-card ref="cardEl">
+    <ion-card-content>Card</ion-card-content>
+  </ion-card>
+
+  <ion-button id="play" @click="play()">Play</ion-button>
+  <ion-button id="pause" @click="pause()">Pause</ion-button>
+  <ion-button id="stop" @click="stop()">Stop</ion-button>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/vue';
+  import type { Animation } from '@ionic/vue';
+
+  import { defineComponent, ref, onMounted } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonCard,
+      IonCardContent,
+    },
+    setup() {
+      const cardEl = ref(null);
+
+      let animation: Animation;
+
+      onMounted(() => {
+        animation = createAnimation()
+          .addElement(cardEl.value.$el)
+          .duration(1500)
+          .iterations(Infinity)
+          .direction('alternate')
+          .fromTo('background', 'blue', 'var(--background)');
+      });
+
+      const play = () => animation.play();
+      const pause = () => animation.pause();
+      const stop = () => animation.stop();
+
+      return {
+        play,
+        pause,
+        stop,
+        cardEl,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  ion-card {
+    color: white;
+    opacity: 0.5;
+    background: blue;
+    margin: 10px;
+
+    --background: red;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    ion-card {
+      --background: green;
+    }
+  }
+</style>
+```

From c244db2d7c07f636455845b8843e0e5ca643fb21 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 12 Jul 2023 12:19:04 -0700
Subject: [PATCH 2/6] docs(animations): removed unused ids

---
 .../preference-based/angular/example_component_html.md      | 6 +++---
 static/usage/v7/animations/preference-based/javascript.md   | 6 +++---
 .../usage/v7/animations/preference-based/react/main_tsx.md  | 6 +++---
 static/usage/v7/animations/preference-based/vue.md          | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/static/usage/v7/animations/preference-based/angular/example_component_html.md b/static/usage/v7/animations/preference-based/angular/example_component_html.md
index 3a27660393a..1bd8875b1b3 100644
--- a/static/usage/v7/animations/preference-based/angular/example_component_html.md
+++ b/static/usage/v7/animations/preference-based/angular/example_component_html.md
@@ -3,7 +3,7 @@
   <ion-card-content>Card</ion-card-content>
 </ion-card>
 
-<ion-button id="play" (click)="play()">Play</ion-button>
-<ion-button id="pause" (click)="pause()">Pause</ion-button>
-<ion-button id="stop" (click)="stop()">Stop</ion-button>
+<ion-button (click)="play()">Play</ion-button>
+<ion-button (click)="pause()">Pause</ion-button>
+<ion-button (click)="stop()">Stop</ion-button>
 ```
diff --git a/static/usage/v7/animations/preference-based/javascript.md b/static/usage/v7/animations/preference-based/javascript.md
index 6802f50726f..8ad151afcf7 100644
--- a/static/usage/v7/animations/preference-based/javascript.md
+++ b/static/usage/v7/animations/preference-based/javascript.md
@@ -3,9 +3,9 @@
   <ion-card-content>Card</ion-card-content>
 </ion-card>
 
-<ion-button id="play" onclick="animation.play()">Play</ion-button>
-<ion-button id="pause" onclick="animation.pause()">Pause</ion-button>
-<ion-button id="stop" onclick="animation.stop()">Stop</ion-button>
+<ion-button onclick="animation.play()">Play</ion-button>
+<ion-button onclick="animation.pause()">Pause</ion-button>
+<ion-button onclick="animation.stop()">Stop</ion-button>
 
 <script>
   var animation = createAnimation()
diff --git a/static/usage/v7/animations/preference-based/react/main_tsx.md b/static/usage/v7/animations/preference-based/react/main_tsx.md
index 5586af54542..716bfdde576 100644
--- a/static/usage/v7/animations/preference-based/react/main_tsx.md
+++ b/static/usage/v7/animations/preference-based/react/main_tsx.md
@@ -37,13 +37,13 @@ function Example() {
         <IonCardContent>Card</IonCardContent>
       </IonCard>
 
-      <IonButton id="play" onClick={play}>
+      <IonButton onClick={play}>
         Play
       </IonButton>
-      <IonButton id="pause" onClick={pause}>
+      <IonButton onClick={pause}>
         Pause
       </IonButton>
-      <IonButton id="stop" onClick={stop}>
+      <IonButton onClick={stop}>
         Stop
       </IonButton>
     </>
diff --git a/static/usage/v7/animations/preference-based/vue.md b/static/usage/v7/animations/preference-based/vue.md
index de6857565aa..db703ca5466 100644
--- a/static/usage/v7/animations/preference-based/vue.md
+++ b/static/usage/v7/animations/preference-based/vue.md
@@ -4,9 +4,9 @@
     <ion-card-content>Card</ion-card-content>
   </ion-card>
 
-  <ion-button id="play" @click="play()">Play</ion-button>
-  <ion-button id="pause" @click="pause()">Pause</ion-button>
-  <ion-button id="stop" @click="stop()">Stop</ion-button>
+  <ion-button @click="play()">Play</ion-button>
+  <ion-button @click="pause()">Pause</ion-button>
+  <ion-button @click="stop()">Stop</ion-button>
 </template>
 
 <script lang="ts">

From f92315ee48d3e479aae86dcfb4eeabc3dfec087f Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 12 Jul 2023 13:49:40 -0700
Subject: [PATCH 3/6] docs(animations): lint

---
 .../v7/animations/preference-based/react/main_tsx.md | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/static/usage/v7/animations/preference-based/react/main_tsx.md b/static/usage/v7/animations/preference-based/react/main_tsx.md
index 716bfdde576..a46df596ed7 100644
--- a/static/usage/v7/animations/preference-based/react/main_tsx.md
+++ b/static/usage/v7/animations/preference-based/react/main_tsx.md
@@ -37,15 +37,9 @@ function Example() {
         <IonCardContent>Card</IonCardContent>
       </IonCard>
 
-      <IonButton onClick={play}>
-        Play
-      </IonButton>
-      <IonButton onClick={pause}>
-        Pause
-      </IonButton>
-      <IonButton onClick={stop}>
-        Stop
-      </IonButton>
+      <IonButton onClick={play}>Play</IonButton>
+      <IonButton onClick={pause}>Pause</IonButton>
+      <IonButton onClick={stop}>Stop</IonButton>
     </>
   );
 }

From 6766769804e29499e84dd65edf1c999d02db81e3 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Wed, 12 Jul 2023 16:45:56 -0700
Subject: [PATCH 4/6] docs(animations): dark mode via docusaurus

---
 static/usage/v7/animations/preference-based/demo.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/static/usage/v7/animations/preference-based/demo.html b/static/usage/v7/animations/preference-based/demo.html
index 3eb962c0c8c..9eac5083d9b 100644
--- a/static/usage/v7/animations/preference-based/demo.html
+++ b/static/usage/v7/animations/preference-based/demo.html
@@ -49,10 +49,15 @@
       }
 
       @media (prefers-color-scheme: dark) {
-        ion-card {
+        body ion-card {
           --background: green;
         }
       }
+
+      /* Fallback for when the theme is changed through Docusaurus */
+      body.dark ion-card {
+        --background: green;
+      }
     </style>
   </head>
 

From 42e6a168ba1c3c8ab74d137b6179f62b14f65262 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 13 Jul 2023 09:21:44 -0700
Subject: [PATCH 5/6] docs(animations): depend on docusaurus for theme

---
 static/usage/v7/animations/preference-based/demo.html | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/static/usage/v7/animations/preference-based/demo.html b/static/usage/v7/animations/preference-based/demo.html
index 9eac5083d9b..10a9fb74acc 100644
--- a/static/usage/v7/animations/preference-based/demo.html
+++ b/static/usage/v7/animations/preference-based/demo.html
@@ -45,16 +45,10 @@
         background: blue;
         margin: 10px;
 
-        --background: red;
+        --background: red
       }
 
-      @media (prefers-color-scheme: dark) {
-        body ion-card {
-          --background: green;
-        }
-      }
-
-      /* Fallback for when the theme is changed through Docusaurus */
+      /* Demo does not use `prefers-color-scheme` media query because Docusaurus already checks for it. Otherwise, the demo might have the wrong background on certain edge cases. */
       body.dark ion-card {
         --background: green;
       }

From 951381fe486afcd5d5f8da96c6d692b1cedca0fd Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Thu, 13 Jul 2023 10:48:42 -0700
Subject: [PATCH 6/6] docs(animations): lint

---
 static/usage/v7/animations/preference-based/demo.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/v7/animations/preference-based/demo.html b/static/usage/v7/animations/preference-based/demo.html
index 10a9fb74acc..02edd9cd4f4 100644
--- a/static/usage/v7/animations/preference-based/demo.html
+++ b/static/usage/v7/animations/preference-based/demo.html
@@ -45,7 +45,7 @@
         background: blue;
         margin: 10px;
 
-        --background: red
+        --background: red;
       }
 
       /* Demo does not use `prefers-color-scheme` media query because Docusaurus already checks for it. Otherwise, the demo might have the wrong background on certain edge cases. */