-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
34 changed files
with
255 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -45,15 +45,31 @@ packages | |
|
|
||
| ## Development | ||
|
|
||
| ### Start by cloning the repository: | ||
| ### Fork this repo | ||
|
|
||
| You can fork this repo by clicking the fork button in the top right corner of this page. | ||
|
|
||
| ### Clone on your local machine | ||
|
|
||
| ```bash | ||
| git clone https://github.com/your-username/ui.git | ||
| ``` | ||
| git clone [email protected]:shadcn-ui/ui.git | ||
|
|
||
| ### Navigate to project directory | ||
|
|
||
| ```bash | ||
| cd ui | ||
| ``` | ||
|
|
||
| ### Install dependencies | ||
| ### Create a new Branch | ||
|
|
||
| ```bash | ||
| git checkout -b my-new-branch | ||
| ``` | ||
|
|
||
| ### Install dependencies | ||
|
|
||
| ```bash | ||
| pnpm install | ||
| ``` | ||
|
|
||
|
|
@@ -65,13 +81,13 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro | |
|
|
||
| 1. To run the `ui.shadcn.com` website: | ||
|
|
||
| ``` | ||
| ```bash | ||
| pnpm --filter=www dev | ||
| ``` | ||
|
|
||
| 2. To run the `shadcn-ui` package: | ||
|
|
||
| ``` | ||
| ```bash | ||
| pnpm --filter=shadcn-ui dev | ||
| ``` | ||
|
|
||
|
|
@@ -134,13 +150,10 @@ the following categories: | |
|
|
||
| e.g. `feat(components): add new prop to the avatar component` | ||
|
|
||
|
|
||
| If you are interested in the detailed specification you can visit | ||
| https://www.conventionalcommits.org/ or check out the | ||
| [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines). | ||
|
|
||
|
|
||
|
|
||
| ## Requests for new components | ||
|
|
||
| If you have a request for a new component, please open a discussion on GitHub. We'll be happy to help you out. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| --- | ||
| title: Remix | ||
| description: Adding dark mode to your remix app. | ||
| --- | ||
|
|
||
| ## Dark mode | ||
|
|
||
| <Steps> | ||
|
|
||
| ### Modify your tailwind.css file | ||
|
|
||
| Add `:root[class~="dark"]` to your tailwind.css file. This will allow you to use the `dark` class on your html element to apply dark mode styles. | ||
|
|
||
| ```css {2} title="app/tailwind.css" | ||
| .dark, | ||
| :root[class~="dark"] { | ||
| ...; | ||
| } | ||
| ``` | ||
|
|
||
| ### Install remix-themes | ||
|
|
||
| Start by installing `remix-themes`: | ||
|
|
||
| ```bash | ||
| npm install remix-themes | ||
| ``` | ||
|
|
||
| ### Create a session storage and theme session resolver | ||
|
|
||
| ```tsx title="app/sessions.server.tsx" | ||
| import { createThemeSessionResolver } from "remix-themes" | ||
|
|
||
| // You can default to 'development' if process.env.NODE_ENV is not set | ||
| const isProduction = process.env.NODE_ENV === "production" | ||
|
|
||
| const sessionStorage = createCookieSessionStorage({ | ||
| cookie: { | ||
| name: "theme", | ||
| path: "/", | ||
| httpOnly: true, | ||
| sameSite: "lax", | ||
| secrets: ["s3cr3t"], | ||
| // Set domain and secure only if in production | ||
| ...(isProduction | ||
| ? { domain: "your-production-domain.com", secure: true } | ||
| : {}), | ||
| }, | ||
| }) | ||
|
|
||
| export const themeSessionResolver = createThemeSessionResolver(sessionStorage) | ||
| ``` | ||
|
|
||
| ### Set up Remix Themes | ||
|
|
||
| Add the `ThemeProvider` to your root layout. | ||
|
|
||
| ```tsx {1-3,6-11,15-22,25-26,28,33} title="app/root.tsx" | ||
| import clsx from "clsx" | ||
| import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from "remix-themes" | ||
|
|
||
| import { themeSessionResolver } from "./sessions.server" | ||
|
|
||
| // Return the theme from the session storage using the loader | ||
| export async function loader({ request }: LoaderFunctionArgs) { | ||
| const { getTheme } = await themeSessionResolver(request) | ||
| return { | ||
| theme: getTheme(), | ||
| } | ||
| } | ||
| // Wrap your app with ThemeProvider. | ||
| // `specifiedTheme` is the stored theme in the session storage. | ||
| // `themeAction` is the action name that's used to change the theme in the session storage. | ||
| export default function AppWithProviders() { | ||
| const data = useLoaderData<typeof loader>() | ||
| return ( | ||
| <ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme"> | ||
| <App /> | ||
| </ThemeProvider> | ||
| ) | ||
| } | ||
|
|
||
| export function App() { | ||
| const data = useLoaderData<typeof loader>() | ||
| const [theme] = useTheme() | ||
| return ( | ||
| <html lang="en" className={clsx(theme)}> | ||
| <head> | ||
| <meta charSet="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <Meta /> | ||
| <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} /> | ||
| <Links /> | ||
| </head> | ||
| <body> | ||
| <Outlet /> | ||
| <ScrollRestoration /> | ||
| <Scripts /> | ||
| <LiveReload /> | ||
| </body> | ||
| </html> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ### Add an action route | ||
|
|
||
| Create a file in `/routes/action.set-theme.ts`. Ensure that you pass the filename to the ThemeProvider component. This route it's used to store the preferred theme in the session storage when the user changes it. | ||
|
|
||
| ```tsx title="app/routes/action.set-theme.ts" | ||
| import { createThemeAction } from "remix-themes" | ||
|
|
||
| import { themeSessionResolver } from "./sessions.server" | ||
|
|
||
| export const action = createThemeAction(themeSessionResolver) | ||
| ``` | ||
|
|
||
| ### Add a mode toggle | ||
|
|
||
| Place a mode toggle on your site to toggle between light and dark mode. | ||
|
|
||
| ```tsx title="components/mode-toggle.tsx" | ||
| import { Moon, Sun } from "lucide-react" | ||
| import { Theme, useTheme } from "remix-themes" | ||
|
|
||
| import { Button } from "./ui/button" | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuItem, | ||
| DropdownMenuTrigger, | ||
| } from "./ui/dropdown-menu" | ||
|
|
||
| export function ModeToggle() { | ||
| const [, setTheme] = useTheme() | ||
|
|
||
| return ( | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger asChild> | ||
| <Button variant="ghost" size="icon"> | ||
| <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> | ||
| <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> | ||
| <span className="sr-only">Toggle theme</span> | ||
| </Button> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="end"> | ||
| <DropdownMenuItem onClick={() => setTheme(Theme.LIGHT)}> | ||
| Light | ||
| </DropdownMenuItem> | ||
| <DropdownMenuItem onClick={() => setTheme(Theme.DARK)}> | ||
| Dark | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| </Steps> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.