Adjusted Styling to dark mode

kmiguel10 · Oct 10, 2023 · 9abff19 · 9abff19
1 parent b259db2
commit 9abff19
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 70 deletions.
diff --git a/app/components/layouts/container.tsx b/app/components/layouts/container.tsx
@@ -8,7 +8,7 @@ interface Props {
  className?: string;
 }
 
-const ContainerLayout = ({ children, className }: Props) => {
+const ContainerLayout = ({ children, className, ...rest }: Props) => {
  return (
  <div
  className={twMerge(
@@ -17,6 +17,7 @@ const ContainerLayout = ({ children, className }: Props) => {
  className
  )
  )}
+ {...rest}
  >
  {children}
  </div>

diff --git a/app/globals.css b/app/globals.css
@@ -7,6 +7,7 @@ body,
 main {
  @apply bg-gray-1 text-gray-12;
  font-weight: 300;
+ height: 93vh;
 }
 
 * {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
- <html lang="en">
+ <html lang="en" className="dark" style={{ background: "black" }}>
  <body className={inter.className}>{children}</body>
  </html>
  );

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -2,84 +2,18 @@ import type { Config } from "tailwindcss";
 const { fontFamily } = require("tailwindcss/defaultTheme");
 
 const config: Config = {
- darkMode: ["class"],
+ darkMode: "class",
  content: [
  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./components/**/*.{js,ts,jsx,tsx,mdx}",
  "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
- // container: {
- // center: true,
- // padding: "2rem",
- // screens: {
- // "2xl": "1400px",
- // },
- // },
  extend: {
- // backgroundImage: {
- // "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
- // "gradient-conic":
- // "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
- // },
- // colors: {
- // border: "hsl(var(--border))",
- // input: "hsl(var(--input))",
- // ring: "hsl(var(--ring))",
- // background: "hsl(var(--background))",
- // foreground: "hsl(var(--foreground))",
- // primary: {
- // DEFAULT: "hsl(var(--primary))",
- // foreground: "hsl(var(--primary-foreground))",
- // },
- // secondary: {
- // DEFAULT: "hsl(var(--secondary))",
- // foreground: "hsl(var(--secondary-foreground))",
- // },
- // destructive: {
- // DEFAULT: "hsl(var(--destructive))",
- // foreground: "hsl(var(--destructive-foreground))",
- // },
- // muted: {
- // DEFAULT: "hsl(var(--muted))",
- // foreground: "hsl(var(--muted-foreground))",
- // },
- // accent: {
- // DEFAULT: "hsl(var(--accent))",
- // foreground: "hsl(var(--accent-foreground))",
- // },
- // popover: {
- // DEFAULT: "hsl(var(--popover))",
- // foreground: "hsl(var(--popover-foreground))",
- // },
- // card: {
- // DEFAULT: "hsl(var(--card))",
- // foreground: "hsl(var(--card-foreground))",
- // },
- // },
- // borderRadius: {
- // lg: `var(--radius)`,
- // md: `calc(var(--radius) - 2px)`,
- // sm: "calc(var(--radius) - 4px)",
- // },
  fontFamily: {
  sans: ["var(--inter-font)", ...fontFamily.sans],
  mono: ["var(--fira-code-font)", ...fontFamily.mono],
  },
- // keyframes: {
- // "accordion-down": {
- // from: { height: 0 },
- // to: { height: "var(--radix-accordion-content-height)" },
- // },
- // "accordion-up": {
- // from: { height: "var(--radix-accordion-content-height)" },
- // to: { height: 0 },
- // },
- // },
- animation: {
- "accordion-down": "accordion-down 0.2s ease-out",
- "accordion-up": "accordion-up 0.2s ease-out",
- },
  zIndex: {
  base: "0",
  dropdown: "80",
@@ -111,7 +45,7 @@ const config: Config = {
  require("windy-radix-typography"),
  ],
  daisyui: {
- themes: ["winter"],
+ themes: ["winter", "dark"],
  },
 };
 export default config;