diff --git a/docs/pages/components/swiper.mdx b/docs/pages/components/swiper.mdx
index afb522e431..d981b332ba 100644
--- a/docs/pages/components/swiper.mdx
+++ b/docs/pages/components/swiper.mdx
@@ -20,6 +20,7 @@ import {
```jsx
function() {
const state = useSwiperState({ spaceBetween: 0 })
+
return (
+ {[...Array(6)].map(item => (
+
+ ))}
+
+ )
+}
+```
+
## Properties
diff --git a/packages/Swiper/src/index.tsx b/packages/Swiper/src/index.tsx
index 522e4fda35..b1ba3d8a26 100644
--- a/packages/Swiper/src/index.tsx
+++ b/packages/Swiper/src/index.tsx
@@ -28,8 +28,8 @@ export interface SwiperOptions {
}
/** Space between each slides */
spaceBetween?: number
- /** Use black colors for the pagination in case of slides too bright */
- withDarkPagination?: boolean
+ /** Use black colors for the pagination and arrows in case of slides too bright */
+ withDarkUI?: boolean
/** Show left and rigth navigation arrows on mobile/tablet or/and desktop */
withNavigation?: {
mobile: boolean
@@ -56,7 +56,7 @@ export const useSwiperState = (options: SwiperOptions = {}) => {
loop = false,
autoplay = false,
duration = 5000,
- withDarkPagination = false,
+ withDarkUI = false,
} = options
const shouldLoop = loop || autoplay
@@ -98,7 +98,7 @@ export const useSwiperState = (options: SwiperOptions = {}) => {
autoplay,
shouldLoop,
duration,
- withDarkPagination,
+ withDarkUI,
ref,
setShowLeftArrow,
setShowRightArrow,
@@ -137,7 +137,7 @@ export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) =>
showRightArrow,
slidesPerView,
spaceBetween,
- withDarkPagination,
+ withDarkUI,
withNavigation,
withPagination,
} = state
@@ -287,7 +287,8 @@ export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) =>
position="absolute"
shape="circle"
size={navigationSize}
- variant="ghost"
+ variant={withDarkUI ? 'secondary' : 'ghost'}
+ withDarkUI={withDarkUI}
withNavigation={withNavigation}
>
@@ -300,7 +301,8 @@ export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) =>
right={10}
shape="circle"
size={navigationSize}
- variant="ghost"
+ variant={withDarkUI ? 'secondary' : 'ghost'}
+ withDarkUI={withDarkUI}
withNavigation={withNavigation}
>
@@ -326,7 +328,7 @@ export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) =>
)
diff --git a/packages/Swiper/src/styles.ts b/packages/Swiper/src/styles.ts
index 9c6be3f88a..702fa7793f 100644
--- a/packages/Swiper/src/styles.ts
+++ b/packages/Swiper/src/styles.ts
@@ -24,17 +24,23 @@ export const Swiper = styled.div>`
${system}
`
-export const Arrow = styled(Button)<{ disabled: boolean } & Pick>(
- ({ disabled, withNavigation: { desktop, mobile } }) => css`
+export const Arrow = styled(Button)<
+ { disabled: boolean } & Pick
+>(
+ ({ disabled, withDarkUI, withNavigation: { desktop, mobile } }) => css`
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: ${mobile ? 1 : -1};
display: ${mobile ? 'flex' : 'none'};
- background-color: light-900;
- &:hover {
- background-color: light-700;
- }
+ ${!withDarkUI &&
+ css`
+ background-color: light-900;
+
+ &:hover {
+ background-color: light-700;
+ }
+ `}
@media (min-width: md) {
z-index: ${desktop ? 1 : -1};
@@ -67,15 +73,15 @@ export const Pagination = styled.div>(
`
)
-export const Bullet = styled.div<{ active: boolean } & Pick>(
- ({ active, withDarkPagination }) => css`
+export const Bullet = styled.div<{ active: boolean } & Pick>(
+ ({ active, withDarkUI }) => css`
height: 10;
width: 10;
border-radius: 50%;
cursor: pointer;
margin: 0 xxs;
${active ? th('swipers.navigation.bullet.active') : th('swipers.navigation.bullet.default')}
- ${withDarkPagination &&
+ ${withDarkUI &&
css`
background-color: ${active ? 'dark-900' : 'dark-400'};
`}