update

.github/workflows/webstite.yaml

@@ -45,8 +45,6 @@ jobs:
           npm install -g pnpm
       - name: Install dependencies
         run: pnpm install # or npm ci / yarn install / bun install /
-      - name: Build packages
-        run: pnpm build:all 
       - name: pnpm docs:build
         run: |
           pnpm docs:build # or  npm run docs:build / yarn docs:build / bun run docs:build

docs/.vitepress/config.mts

@@ -33,7 +33,7 @@ export default defineConfig({
             { text: 'keyframes', link: '/guide/keyframes' },   
             { text: 'useStyled', link: '/guide/useStyled' },            
             { text: 'StyledObject', link: '/guide/styledObject' },             
-            // { text: '主题', link: '/guide/theme' }, 
+            { text: '主题', link: '/guide/theme' }, 
         ]
       },
       { text: 'API', link: '/api' },

docs/best-practices.md

@@ -91,5 +91,11 @@ const Fit = styled({
     height:'100%'
 })
 
+
 ``` 
 
+然后这样原子样式就可以在其他样式声明中被重新使用。详见[组合样式](/guide/combind)章节。
+
+
+
+

docs/guide/theme.md

@@ -2,54 +2,145 @@
 
 得益于`flexstyled`的灵活性，我们可以通过主题来实现全局样式的统一管理。
 
+## 创建主题
 
- ```tsx
-
+主题是一个对象，包含多个CSS变量样式，也可以包含一些预定义的样式。
 
-const light = styled({
-    "--primaryColor":'red',
-    "--secondaryColor":'blue',
-    "--backgroundColor":'white',
-    "--color":'black',
-    "--borderRadius":'4px'
+ ```tsx
+// theme.ts
+import { createTheme } from "flexstyled"
+export const theme = createTheme({
+    primaryColor   : "#007bff",
+    secondaryColor : "blue",
+    backgroundColor: "#e8f8ff",
+    textColor      : "333",
+    fontSize       : "16px",
 })
+ ```
 
-const dark = styled({
-    "--primaryColor":'red',
-    "--secondaryColor":'blue',
-    "--backgroundColor":'#333',
-    "--color":'white',
-    "--borderRadius":'4px'
+## 使用主题
+
+接下来就可以在组件中使用主题了。
+
+```tsx
+
+import { theme } from "./theme"
+
+export type  CardProps = React.PropsWithChildren<{
+    title:string 
+    footer?:string
+  }>
+
+export const Card = styled<CardProps>((props,{className})=>{
+    const { title,children,footer} =props
+    return (
+      <div className={className}>
+        <div>            
+            {title}
+        </div>
+        <div>{children}</div>
+        <div>{footer}</div>
+      </div>
+    )
+  },{ 
+    position:"relative",
+    width:"100%",
+    border:"1px solid #ccc",
+    // 引用主题变量，具有类型提示
+    backgroudColor: theme.backgroundColor,              // [!code ++] 
+    color: theme.primaryColor                           // [!code ++] 
+    // 或者也可以直接引用
+    backgroudColor: "var(--background-color)",          // [!code ++] 
+    color: "var(--primary-color)"                       // [!code ++] 
+    borderRadius:"4px" 
+  })
+
+```
+
+## 修改主题
+
+能通过修改主题来修改全局样式。
+
+```tsx
+import { theme } from "./theme"
+
+// 具有类型提示，直接修改主题变量
+theme.primaryColor = "red"               // ![code ++]
+
+// 也可以直接批量修改主题变量
+theme.update({                                  // ![code ++]
+    primaryColor   : "#007bff",                 // ![code ++]
+    secondaryColor : "blue",                    // ![code ++]
+    backgroundColor: "#e8f8ff",                 // ![code ++]
+    textColor      : "333",                     // ![code ++]
+    fontSize       : "16px",                    // ![code ++]
 })
 
+```
 
 
-const theme = createTheme(light,dark)
+## 保存主题
 
+修改主题后可以保存地，方便下次使用。
 
+```tsx
+import { theme } from "./theme"
 
-const Button = styled((props,{className,getStyle})=>{
-    return <div class="className" style={getStyle()}>
+// 也可以直接批量修改主题变量
+theme.update({
+    primaryColor   : "#007bff",
+    secondaryColor : "blue",
+    backgroundColor: "#e8f8ff",
+    textColor      : "333",
+    fontSize       : "16px",
+})
 
-    </div>
-},{
-    color:(props,theme)=>theme.primaryColor,
-    backgroundColor:theme.secondaryColor,
-    borderRadius:theme.borderRadius
-},[theme])
+theme.save((data)=>{             // ![code ++]
+    // ![code ++] // 保存主题到   
+    localStorage.setItem("theme",JSON.stringify(data))   // ![code ++]
+} )  // ![code ++]
 
-const Input = styled({
-    color:(props)=>theme.primaryColor,
-    backgroundColor:theme.secondaryColor,
-    borderRadius:theme.borderRadius
-},[theme])
+```
 
+## 读取主题
 
 
+```tsx
+import { theme } from "./theme"
 
+theme.load(JSON.parse(localStorage.getItem("theme"))   // ![code ++]
 
+```
 
 
- ```
+## 变量前缀
+
+主题变量本质上是创建一些全局CSS变量，为了避免冲突，可以给变量添加统一的前缀。
+
+```ts
+import { createTheme } from "flexstyled";
+
+export const theme = createTheme({
+    primaryColor   : "#007bff",
+    secondaryColor : "blue",
+    backgroundColor: "#e8f8ff",
+    textColor      : "333",
+    fontSize       : "16px",
+},{
+    prefix:"v"
+})
+
+```
+
+以下声明的变量都会自动添加前缀`v`，创建以下的全局变量：
 
+```css
+:root{
+    --v-primary-color: #007bff;
+    --v-secondary-color: blue;
+    --v-background-color: #e8f8ff;
+    --v-text-color: 333;
+    --v-font-size: 16px;
+}
 
+```

example/src/App.tsx

@@ -2,9 +2,10 @@ import {  useState } from 'react'
 import './App.css'
 import { Card } from "./Card"
 import { Card2 } from "./Card2"
-import { Card3 } from "./Card3"
-import { MyButton } from './MyButton'
-import { Card4 } from './Card4'
+import { Card3 } from "./Card3" 
+import { Card4 } from './Card4' 
+import { ColorButton } from './ColorButton'
+import { theme } from "./theme"
 
 
 function App() { 
@@ -13,7 +14,18 @@ function App() {
   const [showCard2,setShowCard2] = useState(true)
   return (
     <div style={{width:"100%"}}>
-      <MyButton>Styled</MyButton>
+      <div style={{display:'flex',flexDirection:"row",alignItems:'center'}}>
+        主题:
+        <ColorButton color="red" onClick={()=>theme.backgroundColor = 'red'}/>        
+        <ColorButton color="#0bcaf0"  onClick={()=>theme.backgroundColor = '#0bcaf0'} />        
+        <ColorButton color="#16ff3d"  onClick={()=>theme.backgroundColor = '#16ff3d'}/>        
+        <ColorButton color="#ff6600" onClick={()=>theme.backgroundColor = '#ff6600'}/>        
+        <ColorButton color="#ff08de" onClick={()=>theme.backgroundColor = '#ff08de'}/>      
+        <button onClick={()=>theme.reset()}>重置</button>
+        <button onClick={()=>theme.save((data)=>console.log("theme=",data))}>保存</button>
+        <button onClick={()=>theme.load({backgroundColor:'#c8ff00'})}>load</button>
+      </div>
+
       <Card title="Card1 - Styled" footer="Copyright 2024" size={size} bgColor={bgColor}>
         FlexStyled is a simple css-in-js library for react component 
         <p>Size={size}</p>

example/src/Card2.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react"
-import { useStyle } from "../../src"
+import { useStyled } from "../../src"
 import { getRandColor } from "./utils" 
 import { CardProps, cardStyle } from "./cardStyle"
 
 
 export const Card2:React.FC<React.PropsWithChildren<CardProps>> = ((props:CardProps)=>{
     const { title } = props
     const [titleColor,setTitleColor] = useState("blue")
-    const {className,getStyle} =  useStyle(cardStyle,{id:"mycard2"})
+    const {className,getStyle} =  useStyled(cardStyle,{id:"mycard2"})
     return (
       <div className={className} style={getStyle({"--title-color":titleColor},props)}>
         <div className="title">            

example/src/ColorButton.tsx

@@ -0,0 +1,25 @@
+/**
+ * 显示颜色按钮
+ */
+
+import React from 'react';
+import { styled } from "../../src"
+
+
+export type ColorButtonProps = {
+    color?: string
+}
+
+
+export const ColorButton = styled.span<ColorButtonProps>({
+    width: '24px',
+    height: '24px',
+    padding:"8px",
+    borderRadius: 5,
+    margin: "4px",
+    backgroundColor: (props)=>props.color,
+    cursor: "pointer",
+    "&:hover":{
+        outline: "1px solid #aaa"
+    }
+});

example/src/cardStyle.ts

@@ -1,4 +1,5 @@
 import { CSSRuleObject } from "../../src"
+import { theme } from "./theme"
 
 export type  CardProps = React.PropsWithChildren<{
     title:string
@@ -32,7 +33,7 @@ export const cardStyle:CSSRuleObject = {
     },
     "& > .title":{
       padding      : "8px",
-      background   : "#f9f9f9",
+      background   : theme.backgroundColor,
       fontSize     : "18px",
       fontWeight   : "bold",
       borderBottom : "1px solid #ccc",

example/src/theme.ts

@@ -0,0 +1,12 @@
+import { createTheme } from "../../src/theme";
+
+export const theme = createTheme({
+    primaryColor   : "#007bff",
+    secondaryColor : "blue",
+    backgroundColor: "#e8f8ff",
+    textColor      : "333",
+    fontSize       : "16px",
+},{
+    prefix:"v"
+})
+