diff --git a/next-mui-template-ts/.vscode/settings.json b/next-mui-template-ts/.vscode/settings.json index ea53c1e..9984309 100644 --- a/next-mui-template-ts/.vscode/settings.json +++ b/next-mui-template-ts/.vscode/settings.json @@ -1,6 +1,6 @@ { "editor.quickSuggestions": { - "other": false, + "other": true, "comments": false, "strings": false } diff --git a/next-mui-template-ts/package.json b/next-mui-template-ts/package.json index edeaac7..752c108 100644 --- a/next-mui-template-ts/package.json +++ b/next-mui-template-ts/package.json @@ -6,7 +6,7 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "eslint ./src --fix " + "lint": "eslint ./src --fix" }, "dependencies": { "@emotion/react": "^11.14.0", diff --git a/next-mui-template-ts/public/mui.svg b/next-mui-template-ts/public/mui.svg new file mode 100644 index 0000000..2d3813a --- /dev/null +++ b/next-mui-template-ts/public/mui.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/next-mui-template-ts/public/next.svg b/next-mui-template-ts/public/next.svg index 5174b28..335171f 100644 --- a/next-mui-template-ts/public/next.svg +++ b/next-mui-template-ts/public/next.svg @@ -1 +1,23 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + diff --git a/next-mui-template-ts/src/config-global.ts b/next-mui-template-ts/src/config-global.ts new file mode 100644 index 0000000..5da60b1 --- /dev/null +++ b/next-mui-template-ts/src/config-global.ts @@ -0,0 +1,7 @@ +interface GlobalConfig { + defaultMode: "light" | "dark"; +} + +export const CONFIG: GlobalConfig = { + defaultMode: "dark", +}; diff --git a/next-mui-template-ts/src/sections/home/view.tsx b/next-mui-template-ts/src/sections/home/view.tsx index 33d83ac..8865e3a 100644 --- a/next-mui-template-ts/src/sections/home/view.tsx +++ b/next-mui-template-ts/src/sections/home/view.tsx @@ -1,49 +1,160 @@ "use client"; +import Image from "next/image"; + import Box from "@mui/material/Box"; +import Link from "@mui/material/Link"; +import Paper from "@mui/material/Paper"; import Stack from "@mui/material/Stack"; import Button from "@mui/material/Button"; +import SvgIcon from "@mui/material/SvgIcon"; import Container from "@mui/material/Container"; import Typography from "@mui/material/Typography"; +import { alpha as hexAlpha } from "@mui/material/styles"; + import { RouterLink } from "@/lib/router-link"; // --------------------------------------------------------------- export function HomeView() { return ( - - - - - Workspace Scaffolded Successfully! - - - Next.js App Router + Modular MUI Theming System + Perfectionist - Linting Rules are locked and loaded. - - - - + + + + + + nextjs + + + + + + + + + + + nextjs + + + + + + + + + + npx + + + create-next-mui + + ({ + p: 1, + ml: 1, + borderRadius: 2, + cursor: "pointer", + bgcolor: hexAlpha(theme.palette.grey["800"], 0.2), + display: "flex", + alignItems: "center", + justifyContent: "center", + })} + > + + + + + + + + + + + The fastest way to scaffold  + + Nextjs + +  +  + + MUI + + - - + + ); } diff --git a/next-mui-template-ts/src/theme/core/components/button.ts b/next-mui-template-ts/src/theme/core/components/button.ts index def33e6..f4cfd9a 100644 --- a/next-mui-template-ts/src/theme/core/components/button.ts +++ b/next-mui-template-ts/src/theme/core/components/button.ts @@ -17,6 +17,10 @@ const MuiButton: Components["MuiButton"] = { borderRadius: theme.spacing(1.5), color: theme.vars.palette.common.white, backgroundColor: theme.vars.palette.grey[900], + ...theme.applyStyles("dark", { + color: theme.vars.palette.common.black, + backgroundColor: theme.vars.palette.grey[100], + }), }, }, { @@ -24,7 +28,11 @@ const MuiButton: Components["MuiButton"] = { style: { borderRadius: theme.spacing(1.5), color: theme.vars.palette.common.black, - borderColor: theme.vars.palette.common.black, + borderColor: theme.vars.palette.grey[900], + ...theme.applyStyles("dark", { + color: theme.vars.palette.common.white, + borderColor: theme.vars.palette.grey[100], + }), }, }, ], diff --git a/next-mui-template-ts/src/theme/create-theme.ts b/next-mui-template-ts/src/theme/create-theme.ts index 5990b1e..130ec86 100644 --- a/next-mui-template-ts/src/theme/create-theme.ts +++ b/next-mui-template-ts/src/theme/create-theme.ts @@ -1,17 +1,21 @@ import { createTheme } from "@mui/material"; +import { components } from "./core/components"; import { palette } from "./core/palette"; import { typography } from "./core/typography"; -import { components } from "./core/components"; + +import { CONFIG } from "@/config-global"; // --------------------------------------------------------------- +const { defaultMode } = CONFIG; + const defaultFont = "var(--font-geist-sans), Arial, sans-serif"; export const theme = createTheme({ cssVariables: true, - palette: { mode: "light", ...palette }, + palette: { mode: defaultMode, ...palette }, typography: { fontFamily: defaultFont,