+
+
{"silvia's"}
diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
new file mode 100644
index 0000000..ff87da6
--- /dev/null
+++ b/src/components/Providers.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { ReactNode, useEffect } from "react";
+import dynamic from "next/dynamic";
+import { useAtomValue } from "jotai";
+import { themeAtom } from "@/atoms/themeAtom";
+
+// note: dynamically load jotai provider so that theme atom won't flicker
+const Provider = dynamic(() => import("jotai").then((e) => e.Provider), { ssr: false });
+
+const Theme = ({ children }: {children: ReactNode}) => {
+ const theme = useAtomValue(themeAtom).theme;
+
+ useEffect(() => {
+ // apply theme class to html element for webkit scrollbar support
+ const htmlElement = document.documentElement;
+ htmlElement.classList.remove("light", "dark");
+ if (theme) htmlElement.classList.add(theme);
+ }, [theme]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+const Providers = ({ children }: { children: ReactNode }) => {
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+export default Providers;
diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
new file mode 100644
index 0000000..861de3f
--- /dev/null
+++ b/src/hooks/useTheme.tsx
@@ -0,0 +1,101 @@
+import { createContext, FC, ReactNode, useContext, useEffect, useState } from "react";
+
+enum Theme {
+ System = "system",
+ Light = "light",
+ Dark = "dark",
+}
+
+interface IThemeContext {
+ theme: Theme;
+ handler: {
+ toggle: () => void;
+ system: () => void;
+ light: () => void;
+ dark: () => void;
+ },
+ status: {
+ isSystem: boolean;
+ isLight: boolean;
+ isDark: boolean;
+ }
+}
+
+const defaultTheme = Theme.System;
+
+const ThemeProviderContext = createContext
(undefined);
+interface IThemeProvider {
+ children: ReactNode;
+}
+
+/**
+ * @deprecated Old implementation of theme provider/switcher.
+ * Use themeAtom instead.
+ */
+const ThemeProvider: FC = ({ children }) => {
+ // note: use of `window` (i think?) in this provider might cause hydration issues, so need to be dynamically loaded when used
+ const [theme, setTheme] = useState (() => {
+ if (typeof window === "undefined") return defaultTheme;
+ return (localStorage.getItem("theme") as Theme) || defaultTheme;
+ });
+
+ useEffect(() => {
+ if (theme !== localStorage.getItem("theme")) localStorage.setItem("theme", theme);
+ }, [theme]);
+
+ const handleToggleTheme = () => {
+ setTheme((prev) =>
+ prev === Theme.System ? Theme.Light
+ : prev === Theme.Light ? Theme.Dark
+ : prev === Theme.Dark ? Theme.System : Theme.Light,
+ );
+ };
+
+ const handleSystemTheme = () => setTheme(Theme.System);
+ const handleLightTheme = () => setTheme(Theme.Light);
+ const handleDarkTheme = () => setTheme(Theme.Dark);
+
+ const getTheme = () => {
+ if (typeof window === "undefined" || theme !== Theme.System) return theme;
+ const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+ return systemDark ? Theme.Dark : Theme.Light;
+ };
+
+ const value = {
+ theme: theme,
+ handler: {
+ toggle: handleToggleTheme,
+ system: handleSystemTheme,
+ light: handleLightTheme,
+ dark: handleDarkTheme,
+ },
+ status: {
+ isSystem: theme === Theme.System,
+ isLight: theme === Theme.Light,
+ isDark: theme === Theme.Dark,
+ },
+ };
+
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+/**
+ * @deprecated Old implementation of theme provider/switcher.
+ * Use themeAtom instead.
+ */
+const useTheme = () => {
+ const context = useContext(ThemeProviderContext);
+ if (context == null) throw new Error("useTheme must be used within ThemeProvider.");
+ return context;
+};
+
+export {
+ ThemeProvider,
+ useTheme,
+};
diff --git a/src/styles/components/project-card.css b/src/styles/components/project-card.css
index d1e266f..16f4117 100644
--- a/src/styles/components/project-card.css
+++ b/src/styles/components/project-card.css
@@ -7,6 +7,11 @@
shadow-[inset_0_0_0_0_#9a3412,0_2px_4px_0_#9a3412]
hover:shadow-[inset_0_2px_4px_1px_#9a3412,0_0_0_0_#9a3412]
hover:bg-opacity-45
+
+ dark:transition-shadow
+ dark:shadow-[inset_0_0_0_0_black,0_2px_4px_0_black]
+ dark:hover:shadow-[inset_0_2px_4px_1px_black,0_0_0_0_black]
+ dark:hover:bg-opacity-15
;
.project-card-title {
@@ -39,13 +44,3 @@
dark:text-orange-400 dark:bg-opacity-50 lowercase;
}
}
-
-@media(prefers-color-scheme: dark) {
- .project-card .project-card-content {
- @apply transition-shadow
- shadow-[inset_0_0_0_0_black,0_2px_4px_0_black]
- hover:shadow-[inset_0_2px_4px_1px_black,0_0_0_0_black]
- hover:bg-opacity-15
- ;
- }
-}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0980b3f..5f6fa50 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -4,64 +4,46 @@
@tailwind components;
@tailwind utilities;
-:root {
- /*--background: #ffffff;*/
- /*--foreground: #171717;*/
- /*--background: #f6fff4;*/
- /*--background: #fffcec;*/
- --background: #fdfae5;
- --foreground: #171717;
-}
-
::-webkit-scrollbar {
@apply w-2.5;
}
+::-webkit-scrollbar-track {
+ background: #f1f1f1;
+}
+
+.dark ::-webkit-scrollbar-track {
+ background: #2d1a1a;
+}
+
::-webkit-scrollbar-thumb {
- @apply rounded-2xl
- bg-red-300
- bg-opacity-40
+ @apply rounded-2xl bg-red-300 bg-opacity-40;
+}
- dark:bg-red-800
- dark:bg-opacity-50;
+.dark ::-webkit-scrollbar-thumb {
+ @apply bg-red-800 bg-opacity-50;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-red-500 bg-opacity-30;
}
-@media (prefers-color-scheme: dark) {
- :root {
- /*--background: #0a0a0a;*/
- /*--background: #291000;*/
- /*--background: #301100;*/
- /*--background: #120000;*/
- /*--background: #4c2624;*/
- --background: #4a2828;
- --foreground: #ffe4d9;
- }
-
- ::-webkit-scrollbar {
-
- }
-
- ::-webkit-scrollbar-thumb {
-
- }
-
- ::-webkit-scrollbar-thumb:hover {
-
- }
+.dark ::-webkit-scrollbar-thumb:hover {
+ @apply bg-red-600 bg-opacity-40;
}
body {
- color: var(--foreground);
- background: var(--background);
- /*background: url("/bg.jpg") center center;*/
- /*background-size: 100vw auto;*/
font-family: Poppins, Helvetica, sans-serif;
}
+body .light {
+ @apply bg-[#fdfae5] text-[#171717];
+}
+
+body .dark {
+ @apply bg-[#4a2828] text-[#ffe4d9];
+}
+
a {
@apply transition-colors duration-200;
diff --git a/src/styles/pages/contact.css b/src/styles/pages/contact.css
index b6e7a41..6249d26 100644
--- a/src/styles/pages/contact.css
+++ b/src/styles/pages/contact.css
@@ -4,7 +4,7 @@
}
.contact-links-section {
- @apply sm:mx-36;
+ @apply md:mx-36 sm:mx-32;
h1 {
@apply text-5xl;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 109807b..bd80592 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,7 @@ export default {
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
+ darkMode: "class",
theme: {
extend: {
colors: {