fix: change colos by theme

Author: HuyDo

example/ios/Podfile.lock

@@ -645,11 +645,11 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
-  hermes-engine: a1f157c49ea579c28b0296bda8530e980c45bdb3
+  glog: 791fe035093b84822da7f0870421a25839ca7870
+  hermes-engine: 5d86dc4303697a1251c830f0ee45e6e9f33877d4
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
-  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
+  RCT-Folly: 186619bc27c1f94f2f7c6ef60927516c71005915
   RCTRequired: 5a024fdf458fa8c0d82fc262e76f982d4dcdecdd
   RCTTypeSafety: b6c253064466411c6810b45f66bc1e43ce0c54ba
   React: 715292db5bd46989419445a5547954b25d2090f0
@@ -689,4 +689,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 41b345e700f785c9a103f926104c4c507c89b32e
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.1

example/src/stories/Switch.stories.tsx

@@ -3,7 +3,7 @@ import type {ComponentMeta, ComponentStory} from '@storybook/react'
 import React, {useState} from 'react'
 
 import {View} from 'react-native'
-import {Switch} from 'rn-base-component'
+import {Switch, useTheme} from 'rn-base-component'
 
 export default {
   title: 'components/Switch',
@@ -12,6 +12,7 @@ export default {
 
 export const Basic: ComponentStory<typeof Switch> = rest => {
   const [isActive, setIsActive] = useState(false)
+  const theme = useTheme()
 
   const onValueChange = () => {
     setIsActive(prev => !prev)
@@ -25,14 +26,15 @@ export const Basic: ComponentStory<typeof Switch> = rest => {
         value={isActive}
         onValueChange={onValueChange}
         thumbColor="green"
-        trackColor={{active: 'blue', inActive: 'gray'}}
+        trackColor={{active: theme.colors.blue, inActive: theme.colors.red}}
       />
     </View>
   )
 }
 
 export const Inside: ComponentStory<typeof Switch> = rest => {
   const [isActive, setIsActive] = useState(false)
+  const theme = useTheme()
 
   const onValueChange = () => {
     setIsActive(prev => !prev)
@@ -45,7 +47,7 @@ export const Inside: ComponentStory<typeof Switch> = rest => {
         variant="inside"
         value={isActive}
         onValueChange={onValueChange}
-        trackColor={{active: 'green', inActive: 'gray'}}
+        trackColor={{active: theme.colors.gray, inActive: theme.colors.red}}
       />
     </View>
   )