Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: 📚 add dark theme support #149

Merged
merged 1 commit into from
Jun 20, 2023
Merged

docs: 📚 add dark theme support #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions docs/components/content/CardsExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
13 changes: 13 additions & 0 deletions docs/components/content/CardsPauseOnHover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
17 changes: 17 additions & 0 deletions docs/components/content/CardsPauseOnHoverEmits.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 3 additions & 1 deletion docs/components/content/ImagesWithGradient.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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',
Expand Down
1 change: 1 addition & 0 deletions docs/components/content/TextExample.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const helloArray = [
'สวัสดี ครับ/ค่ะ',
'kamusta',
'السلام علیکم ',
'Olá',
]
</script>

Expand Down
14 changes: 8 additions & 6 deletions docs/content/3.examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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',
Expand Down Expand Up @@ -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'"
Expand Down Expand Up @@ -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.
Expand Down