docs: add dark theme support (#149)

docs/components/content/CardsExample.vue

@@ -36,4 +36,8 @@ for (let i = 0; i < 5; i++) {
   flex-direction: column;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 }
+
+.dark .card {
+  background-color: rgb(31, 30, 28);
+}
 </style>

docs/components/content/CardsPauseOnHover.vue

@@ -52,4 +52,17 @@ for (let i = 0; i < 5; i++) {
   background: rgb(226, 226, 226);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 }
+
+.dark .card {
+  background-color: rgb(31, 30, 28);
+}
+
+.dark .btn {
+  color: rgb(31, 30, 28);
+}
+
+.dark .btn:hover {
+  background: rgb(46, 45, 43);
+  color: var(--docus-body-color);
+}
 </style>

docs/components/content/CardsPauseOnHoverEmits.vue

@@ -55,4 +55,21 @@ for (let i = 0; i < 5; i++) {
   background: rgb(226, 226, 226);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 }
+
+.dark .card {
+  background: rgb(31, 30, 28);
+}
+
+.dark .card {
+  background-color: rgb(31, 30, 28);
+}
+
+.dark .btn {
+  color: var(--docus-body-color);
+}
+
+.dark .btn:hover {
+  background: rgb(46, 45, 43);
+  color: var(--docus-body-color);
+}
 </style>

docs/components/content/ImagesWithGradient.vue

@@ -1,7 +1,7 @@
 <template>
   <Vue3Marquee
     :gradient="true"
-    :gradient-color="[255, 255, 255]"
+    :gradient-color="colorMode.value === 'light' ? [255, 255, 255] : [0, 0, 0]"
     gradient-width="30%"
   >
     <img
@@ -17,6 +17,8 @@
 <script setup>
 import 'vue3-marquee/dist/style.css'
 
+const colorMode = useColorMode()
+
 const imgArray = [
   'https://sponsors.vuejs.org/images/vueschool.avif',
   'https://sponsors.vuejs.org/images/vehikl.avif',

docs/components/content/TextExample.vue

@@ -39,6 +39,7 @@ const helloArray = [
   'สวัสดี ครับ/ค่ะ',
   'kamusta',
   'السلام علیکم ',
+  'Olá',
 ]
 </script>
 

docs/content/3.examples.md

@@ -2,7 +2,7 @@
 
 Some examples of how to use the library are shown below.
 
-## Text marquee 
+## Text marquee
 
 ::code-group
    ::code-block{label="Preview" preview}
@@ -101,7 +101,8 @@ You can add a gradient to the marquee so that the sides of the marquee are more
 In this example the following props are used:
 
 - `gradient`: `true`
-- `gradientColor`: `[255, 255, 255]`
+- `gradientColor`: `[255, 255, 255]` (light)
+- `gradientColor`: `[0, 0, 0]` (dark)
 - `gradientWidth`: `30%`
 
 ::code-group
@@ -112,9 +113,9 @@ In this example the following props are used:
    ::code-block{label="Code"}
     ```vue
     <template>
-        <Vue3Marquee 
+        <Vue3Marquee
             :gradient="true"
-            :gradient-color="[255, 255, 255]"
+            :gradient-color="colorMode.value === 'light' ? [255, 255, 255] : [0, 0, 0]"
             gradient-width="30%"
         >
             <img
@@ -125,6 +126,7 @@ In this example the following props are used:
         </Vue3Marquee>
     </template>
     <script setup>
+    const colorMode = useColorMode()
     const imgArray = [
         'https://sponsors.vuejs.org/images/vueschool.avif',
         'https://sponsors.vuejs.org/images/vehikl.avif',
@@ -219,7 +221,7 @@ If you need more functionality than this, using a carousel component might be be
    ::code-block{label="Code"}
     ```vue
     <template>
-        <Vue3Marquee 
+        <Vue3Marquee
             :pause-on-hover="true"
             @on-pause="playState = 'paused'"
             @on-resume="playState = 'playing'"
@@ -254,7 +256,7 @@ If you need more functionality than this, using a carousel component might be be
 
 ## Cloning content
 
-If your marquee content is too small to take the width of the full container it will leave an empty space. 
+If your marquee content is too small to take the width of the full container it will leave an empty space.
 
 ::alert{type="warning"}
 This feature is still experimental. If you have any issues with this option I would suggest you to have content that is wider than your container or make a duplicate of the content if possible.