-
•
+
+
+ •
+
Recent projects
+
+
+
>
);
-};
\ No newline at end of file
+}
diff --git a/app/globals.css b/app/globals.css
index 6c3fbdf04..b878b0775 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,24 +6,41 @@
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
:root {
--color-primary-bg: #FFFFFF;
- --color-secondary-bg: #D9D9D9;
+ --color-secondary-bg: #cdf4e6;
--color-third-bg: #0a0a0a;
+ --color-four-bg: #79a091;
--color-primary-text: #0a0a0a;
- --color-secondary-text: #5e716a;
- --color-third-text: #709b8c;
- --color-four-text: #2b312f;
+ --color-secondary-text: #4d5150;
+ --color-third-text: #d9d9d9;
+ --color-four-text: #464e4b;
--color-primary-border: #e7f5f3;
- --color-secondary-border: #545454;
- --color-third-border: #3535359a;
+ --color-secondary-border: #abd4c5;
+ --color-third-border: #79a091;
+ --color-four-border: #cdf4e6;
}
/* Dark mode variables */
@media (prefers-color-scheme: dark) {
:root {
- --color-primary-bg: #100c13;
+ --color-primary-bg: #0a0a0a;
+ --color-secondary-bg: #D9D9D9;
+ --color-third-bg: #FFFFFF;
+ --color-four-bg: #709b8c;
+
+ --color-primary-text: #0a0a0a;
+ --color-secondary-text: #709b8c;
+ --color-third-text: #5e716a;
+ --color-four-text: #2b312f;
+
+ --color-third-border: #e7f5f3;
+ --color-secondary-border: #abd4c5;
+ --color-primary-border: #3535359a;
+ --color-four-border: #b7d2c7;
+
+ /* --color-primary-bg: #100c13;
--color-secondary-bg: #7e6194;
--color-third-bg: #d6b4ee;
@@ -34,7 +51,7 @@
--color-primary-border: #705D97;
--color-secondary-border: #47236067;
--color-third-border: #47236067;
-
+ */
}
diff --git a/app/layout.tsx b/app/layout.tsx
index 209a8f42c..92c3b0780 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -10,7 +10,7 @@ const dm_Sans = DM_Sans({
subsets: ['latin'],
});
-const source_Code_Pro = Source_Code_Pro({
+const alata = Alata({
weight: '400',
subsets: ['latin'],
});
diff --git a/app/page.tsx b/app/page.tsx
index 72d0e73b9..18cae68a8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,6 +5,7 @@ import IntroSection from "./components/introSection";
import DeviceAddress from "./components/DeviceAddress";
import { InfiniteMovingCardsDemo } from "./components/infiniteCard";
import { ReviewSection } from "./components/reviewSection";
+import DarkModeToggle from "./components/DarkModeToggle";
export const metadata: Metadata = {
title: "nee. - Portfolio Framer Template For Freelancers",
@@ -25,6 +26,9 @@ export default function Home() {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1da9dcce4..ebeb26a58 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,7 @@ module.exports = {
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nextui-org/theme/dist/components/[object Object].js",
],
- darkMode: "class",
+ darkMode: ["class","selector"],
theme: {
extend: {
backgroundImage: {
@@ -26,9 +26,11 @@ module.exports = {
primaryText: "var(--color-primary-text)",
thirdText: "var(--color-third-text)",
secondaryText: "var(--color-secondary-text)",
+ fourText: "var(--color-four-text)",
pBorder: "var(--color-primary-border)",
sBorder: "var(--color-secondary-border)",
tBorder: "var(--color-third-border)",
+ fBorder: "var(--color-four-border)",
},
animation: {
aurora: "aurora 60s linear infinite",
@@ -59,19 +61,33 @@ module.exports = {
plugin(function ({ addBase, theme }) {
addBase({
":root": {
- "--color-primary": theme("colors.primary"),
- "--color-secondary": theme("colors.secondary"),
- "--color-white": theme("colors.white"),
- "--color-gray-light": theme("colors.grayLight"),
- "--color-dark": theme("colors.dark"),
+ "--color-primary-bg": theme("colors.primary"),
+ "--color-secondary-bg": theme("colors.secondary"),
+ "--color-third-bg": theme("colors.third"),
+ "--color-four-bg": theme("colors.four"),
+ "--color-primary-text": theme("colors.primaryText"),
+ "--color-secondary-text": theme("colors.seconadaryText"),
+ "--color-third-text": theme("colors.thirdText"),
+ "--color-four-text": theme("colors.fourText"),
+ "--color-primary-border": theme("colors.pBorder"),
+ "--color-secondary-border": theme("colors.sBorder"),
+ "--color-third-border": theme("colors.tBorder"),
+ "--color-four-border": theme("colors.fBorder"),
},
"@media (prefers-color-scheme: dark)": {
":root": {
- "--color-primary": theme("colors.secondary"),
- "--color-secondary": theme("colors.dark"),
- "--color-white": theme("colors.primary"),
- "--color-gray-light": theme("colors.primary"),
- "--color-dark": theme("colors.grayLight"),
+ "--color-primary-bg": theme("colors.primary"),
+ "--color-secondary-bg": theme("colors.secondary"),
+ "--color-third-bg": theme("colors.third"),
+ "--color-four-bg": theme("colors.four"),
+ "--color-primary-text": theme("colors.primaryText"),
+ "--color-secondary-text": theme("colors.seconadaryText"),
+ "--color-third-text": theme("colors.thirdText"),
+ "--color-four-text": theme("colors.fourText"),
+ "--color-primary-border": theme("colors.pBorder"),
+ "--color-secondary-border": theme("colors.sBorder"),
+ "--color-third-border": theme("colors.tBorder"),
+ "--color-four-border": theme("colors.fBorder"),
},
},
});