react-theme-forge 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ThemeProvider.d.ts +6 -0
- package/dist/components/ThemeToggle.d.ts +18 -0
- package/dist/hooks/useThemeColor.d.ts +31 -0
- package/dist/index.d.ts +147 -0
- package/dist/index.esm.js +538 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +548 -0
- package/dist/index.js.map +1 -0
- package/dist/types/index.d.ts +86 -0
- package/dist/utils/themes.d.ts +9 -0
- package/package.json +61 -0
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
export type ThemeMode = "light" | "dark" | "system";
|
|
2
|
+
export interface ThemeColors {
|
|
3
|
+
primary: string;
|
|
4
|
+
primaryForeground: string;
|
|
5
|
+
secondary: string;
|
|
6
|
+
secondaryForeground: string;
|
|
7
|
+
background: string;
|
|
8
|
+
foreground: string;
|
|
9
|
+
card: string;
|
|
10
|
+
cardForeground: string;
|
|
11
|
+
border: string;
|
|
12
|
+
input: string;
|
|
13
|
+
ring: string;
|
|
14
|
+
muted: string;
|
|
15
|
+
mutedForeground: string;
|
|
16
|
+
accent: string;
|
|
17
|
+
accentForeground: string;
|
|
18
|
+
destructive: string;
|
|
19
|
+
destructiveForeground: string;
|
|
20
|
+
success: string;
|
|
21
|
+
successForeground: string;
|
|
22
|
+
warning: string;
|
|
23
|
+
warningForeground: string;
|
|
24
|
+
}
|
|
25
|
+
export interface ThemeRadius {
|
|
26
|
+
sm: string;
|
|
27
|
+
md: string;
|
|
28
|
+
lg: string;
|
|
29
|
+
xl: string;
|
|
30
|
+
full: string;
|
|
31
|
+
}
|
|
32
|
+
export interface ThemeFonts {
|
|
33
|
+
sans: string;
|
|
34
|
+
mono: string;
|
|
35
|
+
heading: string;
|
|
36
|
+
}
|
|
37
|
+
export interface ThemeConfig {
|
|
38
|
+
name: string;
|
|
39
|
+
colors: {
|
|
40
|
+
light: Partial<ThemeColors>;
|
|
41
|
+
dark: Partial<ThemeColors>;
|
|
42
|
+
};
|
|
43
|
+
radius?: Partial<ThemeRadius>;
|
|
44
|
+
fonts?: Partial<ThemeFonts>;
|
|
45
|
+
}
|
|
46
|
+
export interface ThemeContextValue {
|
|
47
|
+
/** Current active resolved theme: "light" | "dark" */
|
|
48
|
+
theme: "light" | "dark";
|
|
49
|
+
/** Raw mode including "system" */
|
|
50
|
+
mode: ThemeMode;
|
|
51
|
+
/** All registered custom themes */
|
|
52
|
+
themes: Record<string, ThemeConfig>;
|
|
53
|
+
/** Name of the currently applied custom theme, if any */
|
|
54
|
+
activeTheme: string | null;
|
|
55
|
+
/** Toggle between light and dark */
|
|
56
|
+
toggleTheme: () => void;
|
|
57
|
+
/** Set mode explicitly */
|
|
58
|
+
setMode: (mode: ThemeMode) => void;
|
|
59
|
+
/** Apply a registered custom theme by name */
|
|
60
|
+
applyTheme: (themeName: string) => void;
|
|
61
|
+
/** Register a new custom theme */
|
|
62
|
+
registerTheme: (config: ThemeConfig) => void;
|
|
63
|
+
/** Remove a theme */
|
|
64
|
+
removeTheme: (themeName: string) => void;
|
|
65
|
+
/** Reset to default theme */
|
|
66
|
+
resetTheme: () => void;
|
|
67
|
+
/** Check if system prefers dark */
|
|
68
|
+
systemPrefersDark: boolean;
|
|
69
|
+
}
|
|
70
|
+
export interface ThemeProviderProps {
|
|
71
|
+
children: React.ReactNode;
|
|
72
|
+
/** Default mode on first load. Default: "system" */
|
|
73
|
+
defaultMode?: ThemeMode;
|
|
74
|
+
/** Default custom theme name to apply */
|
|
75
|
+
defaultTheme?: string;
|
|
76
|
+
/** Key used for localStorage persistence. Default: "rtf-theme" */
|
|
77
|
+
storageKey?: string;
|
|
78
|
+
/** Custom themes to register at startup */
|
|
79
|
+
themes?: ThemeConfig[];
|
|
80
|
+
/** CSS class applied to <html> for dark mode. Default: "dark" */
|
|
81
|
+
darkClass?: string;
|
|
82
|
+
/** Apply CSS variables to a custom element instead of :root */
|
|
83
|
+
targetElement?: string;
|
|
84
|
+
/** Disable localStorage persistence */
|
|
85
|
+
disablePersistence?: boolean;
|
|
86
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { ThemeColors, ThemeConfig, ThemeRadius, ThemeFonts } from "../types";
|
|
2
|
+
export declare const defaultLightColors: ThemeColors;
|
|
3
|
+
export declare const defaultDarkColors: ThemeColors;
|
|
4
|
+
export declare const defaultRadius: ThemeRadius;
|
|
5
|
+
export declare const defaultFonts: ThemeFonts;
|
|
6
|
+
export declare const presetThemes: Record<string, ThemeConfig>;
|
|
7
|
+
export declare function buildCSSVariables(colors: Partial<ThemeColors>, radius?: Partial<ThemeRadius>, fonts?: Partial<ThemeFonts>): string;
|
|
8
|
+
export declare function injectStyles(cssVariables: string, isDark: boolean, darkClass: string, targetElement: string): void;
|
|
9
|
+
export declare function mergeColors(base: ThemeColors, overrides: Partial<ThemeColors>): ThemeColors;
|
package/package.json
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-theme-forge",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "🎨 A powerful, zero-config theme engine for React apps with dynamic dark/light mode, CSS variables, custom themes, and Tailwind CSS support.",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"files": [
|
|
9
|
+
"dist",
|
|
10
|
+
"README.md"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "rollup -c",
|
|
14
|
+
"dev": "rollup -c -w",
|
|
15
|
+
"test": "jest",
|
|
16
|
+
"lint": "eslint src --ext .ts,.tsx",
|
|
17
|
+
"prepublishOnly": "npm run build"
|
|
18
|
+
},
|
|
19
|
+
"keywords": [
|
|
20
|
+
"react",
|
|
21
|
+
"theme",
|
|
22
|
+
"dark-mode",
|
|
23
|
+
"light-mode",
|
|
24
|
+
"css-variables",
|
|
25
|
+
"tailwind",
|
|
26
|
+
"theming",
|
|
27
|
+
"context",
|
|
28
|
+
"hooks",
|
|
29
|
+
"typescript"
|
|
30
|
+
],
|
|
31
|
+
"author": "Your Name <your@email.com>",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "https://github.com/yourusername/react-theme-forge"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"react": ">=17.0.0",
|
|
39
|
+
"react-dom": ">=17.0.0"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
43
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
44
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
|
45
|
+
"@testing-library/jest-dom": "^6.2.0",
|
|
46
|
+
"@testing-library/react": "^14.1.2",
|
|
47
|
+
"@types/jest": "^29.5.11",
|
|
48
|
+
"@types/react": "^18.2.55",
|
|
49
|
+
"@types/react-dom": "^18.2.19",
|
|
50
|
+
"jest": "^29.7.0",
|
|
51
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
52
|
+
"react": "^18.2.0",
|
|
53
|
+
"react-dom": "^18.2.0",
|
|
54
|
+
"rollup": "^4.9.6",
|
|
55
|
+
"rollup-plugin-dts": "^6.1.0",
|
|
56
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
57
|
+
"ts-jest": "^29.1.2",
|
|
58
|
+
"tslib": "^2.6.2",
|
|
59
|
+
"typescript": "^5.3.3"
|
|
60
|
+
}
|
|
61
|
+
}
|