function App() {const StyledLinkButton = styled(Pressable,{borderRadius: 4,flexDirection: "row",justifyContent: "center",alignItems: "center",m: "$3",bg: "$backgroundDark300",variants: {size: {sm: {px: "$4",py: "$3",},md: {px: "$5",py: "$4",},},},defaultProps: {size: "md",variant: "redbox",},},{DEBUG: "Button",})const Box = styled(View, {})const Text = styled(RNText, { color: "$textColor" })return (<Provider config={config()}><Viewstyle={{justifyContent: "center",alignItems: "center",}}><BoxflexDirection="row"p="$2"pr="$4"w="$full"bg="$blue800"borderTopRightRadius={"$md"}borderTopLeftRadius={"$md"}><Text color="$white">Theme Switcher</Text><Box flex={1}></Box><Text color="$white">x</Text></Box><Boxbg="$gray100"h="400px"w="350px"alignItems="center"justifyContent="center"><Theme name="2000s"><Boxh="200px"w="200px"bg="$backgroundColor"borderWidth="$borderWidth"borderColor="$borderColor"borderRadius={"$borderRadius"}overflow="hidden"><BoxflexDirection="row"p="$2"pr="$4"w="$full"bg="$headerColor"><Text color="$textColor">Explorer</Text><Box flex={1}></Box><Text>x</Text></Box></Box></Theme></Box></View></Provider>)}
import { createConfig } from "@gluestack-style/react"export const config = createConfig({aliases: {// aliases},tokens: {colors: {primary: "#000",secondary: "#fff",// ...red300: "#000",red400: "#000",red500: "#000",// ...brown300: "#000",brown400: "#000",brown500: "#000",// ...},// ...},themes: {classic: {colors: {$primary: "$colors.$brown400",$secondary: "$colors.$brown100",},},modern: {colors: {$primary: "$colors.$red400",$secondary: "$colors.$red100",},},},})
import { styled, StyledProvider, Theme } from "@gluestack-style/react"import { Pressable } from "react-native"import { config } from "./config"const Button = styled(Pressable, {backgroundColor: "$primary",padding: "$3",})const ButtonText = styled(Pressable, {color: "$secondary",})export const App = () => {return (<StyledProvider config={config}><Theme theme="classic"><Button><ButtonText>Classic Button</ButtonText></Button></Theme></StyledProvider>)}