v1.3.0-alpha.1

README.md

@@ -93,6 +93,17 @@ and use
   <img align="center" src="https://raw.githubusercontent.com/programming-with-ia/shadcn-theme-editor/master/screenshots/shadcn-theme-editor.png" alt="logo">
 </p>
 
+## Upcoming Features
+
+- Randomize
+- use [jln themes](https://ui.jln.dev/) directly in your project
+
+## Special Thanks
+
+I would like to extend my heartfelt thanks to the following individuals and projects:
+
+- **[Julian](https://github.com/jln13x)** - for creating [ui.jln.dev](https://ui.jln.dev/), 10000+ Themes for shadcn/ui.
+
 ## 📄 License
 
 This project is licensed under the `ℹ️ MIT` License.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-theme-editor",
-  "version": "1.2.0-alpha.1",
+  "version": "1.3.0-alpha.1",
   "description": "Shadcn Theme Editor",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

src/components/random.tsx

@@ -2,17 +2,24 @@ import React, { useState } from 'react'
 import { Button } from './ui/button'
 import { createRandomTheme } from '../lib/create-theme-config'
 import { useTheme } from 'next-themes'
-import { getComputedHSLColor, setColorsProperties } from '../lib/utils'
+import { getComputedHSLColor, saveTheme, setColorsProperties } from '../lib/utils'
 import { Dices, Lock, UnLock } from './icons';
+import { ReadonlyThemeWithHSLColor, SystemThemes, themeModes } from '../lib/theme'
 
 function RandomBtn() {
-    const { systemTheme } = useTheme()
+  const { resolvedTheme=""+undefined, systemTheme="dark" } = useTheme();
     const [lockPrimary, setLockPrimary] = useState(true);
     const onClickHandler = ()=>{
-        const themes = createRandomTheme(lockPrimary ? getComputedHSLColor("--primary"): undefined)
-        const theme = themes[systemTheme!] ?? themes.dark
-        // const theme = themes.dark
-        console.log(theme)
+      const themes = createRandomTheme(lockPrimary ? getComputedHSLColor("--primary"): undefined)
+      let theme;
+
+      if (SystemThemes.includes(resolvedTheme as any)){
+        theme = themes[resolvedTheme as themeModes] as ReadonlyThemeWithHSLColor[];
+        SystemThemes.forEach(theme=> saveTheme(resolvedTheme, themes[theme])) // save both themes
+      } else {
+        theme = themes[systemTheme] as ReadonlyThemeWithHSLColor[];
+        saveTheme(resolvedTheme, theme)
+      }
         setColorsProperties(theme)
     }
     const LockIcon = lockPrimary? Lock: UnLock

src/components/sidebar-section.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { CompoProps } from "../../app/src/types/types";
+import { cn } from "../lib/utils";
+
+function Header({
+  children,
+  label,
+}: {
+  children?: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "mb-1 flex items-center justify-between pl-2 py-1 text-sm font-semibold gap-2"
+      )}
+    >
+      {label} {children}
+    </div>
+  );
+}
+
+function Section({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={cn("text-sm flex flex-col", className)}>{children}</div>
+  );
+}
+
+const SidebarSection = {
+  Header,
+  Root: Section,
+  Seperator() {
+    return <hr className="my-2" />;
+  },
+};
+
+export default SidebarSection;

src/components/sidebar.tsx

@@ -4,6 +4,7 @@ import SideBarColors from "./SideBarColors";
 import { CopyTheme } from "./copy-theme";
 import ThemeToggle from "./theme-toggle";
 import RandomBtn from "./random";
+import SidebarSection from "./sidebar-section";
 
 export function Sidebar({ isOpen }: { isOpen: boolean }) {
   return (
@@ -17,13 +18,12 @@ export function Sidebar({ isOpen }: { isOpen: boolean }) {
       <div className="mb-1 flex items-center px-2 py-1 font-semibold">
         Shadcn Theme Editor
       </div>
-      <div className="mb-1 flex items-center justify-between pl-2 py-1 text-sm font-semibold gap-2">
-        Theming
+      <SidebarSection.Header label="Theming">
         <div className="flex">
           <ResetTheme />
           <CopyTheme />
         </div>
-      </div>
+      </SidebarSection.Header>
 
       <div className="text-sm flex flex-col flex-1">
         <SideBarColors />

src/hooks/useLocalStroageTheme.ts

@@ -0,0 +1,11 @@
+import React, { useEffect, useState } from 'react'
+
+function useLocalStroageTheme(theme?:string) {
+    const [isLocalThemeApply, setIsLocalThemeApply] = useState(false);
+    useEffect(() => {
+
+    }, [theme]);
+  return {isLocalThemeApply}
+}
+
+export default useLocalStroageTheme

src/lib/create-theme-config.ts

@@ -3,10 +3,9 @@
 import { Colord, extend } from "colord";
 import a11yPlugin from "colord/plugins/a11y";
 import harmoniesPlugin from "colord/plugins/harmonies";
-import { getColorTitle, ReadonlyThemeWithHSLColor, ShadCnPropritiesType } from "./theme";
+import { getColorTitle, ReadonlyThemeWithHSLColor, type ShadCnPropritiesType, type themeModes } from './theme';
 
 type Hsl = HslColor;
-type themeModes = "light" | "dark"
 // type Hsl = {
 //     h: number;
 //     s: number;

src/lib/theme.ts

@@ -91,6 +91,9 @@ export type ShadCnPropritiesType = (typeof themeColors)[number]["variable"];
 export type ReadonlyThemeWithColor = (typeof themeColors)[number] & {
   color: string;
 };
+export const SystemThemes = ["light", "dark"] as const;
+export type themeModes = typeof SystemThemes[number]
+
 export type ReadonlyThemeWithHSLColor = (typeof themeColors)[number] & {
   color: HslColor;
 };

src/lib/utils.ts

@@ -4,6 +4,7 @@ import {
   type ShadCnPropritiesType,
   themeColors,
 } from "./theme";
+import { LOCAL_STORAGE_KEY } from "./consts";
 
 export function cn(...inputs: ClassValue[]) {
   return clsx(inputs);
@@ -103,3 +104,7 @@ export const ls = {
     }
   },
 };
+
+export function saveTheme(key: string | undefined, theme: ReadonlyThemeWithHSLColor[]){
+  ls.setLocalStorage(LOCAL_STORAGE_KEY + ":" + key, theme);
+}