Skip to content

Commit

Permalink
Added Dark / Light Mode Configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
devhnry committed Nov 7, 2023
1 parent 551a591 commit f207b96
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 18 deletions.
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./src/index.css" />
<title>Vite + React + TS</title>
</head>
<body>
<body className="dark" class="dark:bg-dark-grayish-blue-800">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Expand Down
25 changes: 24 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { useState } from "react";
import { useState, useEffect} from "react";
import TodoForm from "./Components/TodoForm";
import TodoList from "./Components/TodoList";
import TodoFilter from "./Components/TodoFilter";
import Header from "./Components/Header";

export default function App() {
const [theme, setTheme] = useState("");
const [category, setCategory] = useState("All");
const [todo, setTodo] = useState([
{
Expand All @@ -19,6 +20,26 @@ export default function App() {
},
]);

useEffect(() => {
if (window.matchMedia("(prefers-color-scheme : dark)").matches) {
setTheme("dark");
} else {
setTheme("light");
}
}, []);

useEffect(() => {
if (theme === "dark") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
});

const handleThemeSwitch = () => {
setTheme(theme === "dark" ? "light" : "dark");
};

const handleTodoCheck = (id: number) => {
setTodo((todo) => {
return todo.map((item) =>
Expand Down Expand Up @@ -73,6 +94,8 @@ export default function App() {
]);
console.log(todo);
}}
onClick={handleThemeSwitch}
mode={theme}
/>
<TodoList
todo={renderedTodo(category)}
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export default function Header() {
return (
<div className="relative">
<div className="bg-[url('/images/bg-mobile-light.jpg')] bg-no-repeat bg-cover bg-[top_center] h-[210px] w-[100vw] absolute -z-40 top-0 sm:h-[230px] md:h-[260px] lg:h-[280px] xl:h-[300px] transition-transform md:bg-[url('/images/bg-desktop-light.jpg')] bg-white-200"></div>
<div className="bg-[url('/images/bg-mobile-light.jpg')] md:bg-[url('/images/bg-desktop-light.jpg')] dark:bg-[url('/images/bg-mobile-dark.jpg')] dark:md:bg-[url('/images/bg-desktop-dark.jpg')] bg-no-repeat bg-cover bg-[top_center] h-[210px] w-[100vw] absolute -z-40 top-0 sm:h-[230px] md:h-[260px] lg:h-[280px] xl:h-[300px] transition-transform bg-white-200"></div>
</div>
);
}
10 changes: 7 additions & 3 deletions src/Components/TodoFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,18 @@ interface Props {

export default function TodoFilter({ onClick, selectedCategory }: Props) {
return (
<div className="bg-white-100 rounded-md px-6 py-4 shadow-sm mt-6 relative ">
<div className="text-[12px] md:text-[14px] text-dark-grayish-blue-100 flex gap-[20px] items-center mx-auto w-fit font-bold">
<div className="bg-white-100 dark:bg-dark-grayish-blue-700 dark:shadow-md-dark rounded-md px-6 py-4 shadow-sm mt-6 relative ">
<div className="text-[12px] md:text-[14px] text-dark-grayish-blue-100 dark:text-dark-grayish-blue-400 flex gap-[20px] items-center mx-auto w-fit font-bold">
{categories.map((cat, i) => (
<button
key={i}
type="button"
onClick={() => onClick(cat)}
className={selectedCategory === cat ? "text-blue" : ""}
className={
selectedCategory === cat
? "text-blue"
: "dark:hover:text-light-grayish-blue-100 hover:text-dark-grayish-blue-400 transition-colors"
}
>
{cat}
</button>
Expand Down
14 changes: 8 additions & 6 deletions src/Components/TodoForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ const schema = z.object({
type TodoFormData = z.infer<typeof schema>;
interface Props {
onSubmit: (data: TodoFormData) => void;
onClick : () => void;
mode : string;
}

export default function TodoForm({ onSubmit }: Props) {
export default function TodoForm({ onSubmit, onClick, mode }: Props) {
const {
register,
handleSubmit,
Expand All @@ -26,9 +28,9 @@ export default function TodoForm({ onSubmit }: Props) {
<h1 className="uppercase leading-4 tracking-[10px] font-bold text-white-100 text-3xl">
Todo
</h1>
<button className="h-5 w-5 overflow-hidden" type="button">
<button onClick={onClick} className="h-6 w-6 overflow-hidden" type="button">
<span className="sr-only">Theme Switcher</span>
<img src="./images/icon-moon.svg" alt="theme-switcher" />
<img src={mode === "dark" ? "./images/icon-sun.svg" : "./images/icon-moon.svg"} alt="theme-switcher" />
</button>
</div>
<form
Expand All @@ -39,16 +41,16 @@ export default function TodoForm({ onSubmit }: Props) {
>
<label
htmlFor="todo"
className="bg-white-100 flex gap-4 items-center px-5 py-[14px] rounded-md"
className="bg-white-100 dark:bg-dark-grayish-blue-700 flex gap-4 items-center px-5 py-[14px] rounded-md dark:text-light-grayish-blue-300"
>
<span className="sr-only">Input Field</span>
<div className="w-[20px] h-[20px] lg:w-[24px] lg:h-[24px] rounded-full border-[1.4px] border-light-grayish-blue-100 relative"></div>
<div className="w-[22px] h-[20px] lg:w-[24px] lg:h-[24px] rounded-full border-[1.4px] border-light-grayish-blue-100 dark:border-dark-grayish-blue-200"></div>
<input
{...register("task", { required: true })}
type="text"
id="todo"
placeholder="Create a new Todo..."
className="outline-none text-[13px] md:text-[16px] border-none placeholder:text-[13px] sm:placeholder:text-[15px] placeholder:text-dark-grayish-blue-100 w-full"
className="outline-none text-[13px] md:text-[16px] border-none placeholder:text-[13px] sm:placeholder:text-[15px] placeholder:text-dark-grayish-blue-100 dark:placeholder:text-dark-grayish-blue-200 w-full dark:bg-dark-grayish-blue-700"
/>
</label>
{errors.task && (
Expand Down
13 changes: 7 additions & 6 deletions src/Components/TodoList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,17 @@ export default function TodoList({ todo, onClick, onDelete, onClear }: Props) {
if (todo.length === 0) return null;
return (
<div>
<ul className="rounded-md overflow-hidden shadow-md font-light relative">
<ul className="rounded-md overflow-hidden shadow-md dark:shadow-md-dark font-light relative dark:text-light-grayish-blue-300">
{todo.map((item) => (
<li
className="bg-white-100 px-5 py-[14px] md:px-6 border-b border-light-grayish-blue-100 last:border-none flex justify-between items-center text-[13px] sm:text-[15px]"
className="bg-white-100 dark:bg-dark-grayish-blue-700 px-5 py-[14px] md:px-6 border-b border-light-grayish-blue-100 dark:border-dark-grayish-blue-500 last:border-none flex justify-between items-center text-[13px] sm:text-[15px]"
key={item.id}
>
<div className="flex items-center gap-4">
<div
onClick={() => onClick(item.id)}
id={`item-${item.id}`}
className={`cursor-pointer w-[20px] h-[20px] lg:w-[24px] lg:h-[24px] rounded-full border-light-grayish-blue-100 ${
className={`cursor-pointer w-[20px] h-[20px] lg:w-[24px] lg:h-[24px] rounded-full border-light-grayish-blue-100 dark:border-dark-grayish-blue-200 ${
item.checked == true
? "bg-gradient-to-br from-light-blue to-purple border-none relative grid place-items-center"
: "border-[1.4px]"
Expand All @@ -42,7 +42,7 @@ export default function TodoList({ todo, onClick, onDelete, onClear }: Props) {
<p
className={`${
item.checked === true
? "line-through text-light-grayish-blue-200"
? "line-through text-light-grayish-blue-200 dark:text-dark-grayish-blue-400"
: ""
}`}
>
Expand All @@ -59,13 +59,14 @@ export default function TodoList({ todo, onClick, onDelete, onClear }: Props) {
</button>
</li>
))}
<li className="bg-white-100 flex justify-between font-normal text-dark-grayish-blue-100 px-5 py-[14px] text-[12px] md:text-[13.5px]">
<li className="bg-white-100 dark:bg-dark-grayish-blue-700 flex justify-between font-normal text-dark-grayish-blue-100 dark:text-dark-grayish-blue-300 px-5 py-[14px] text-[12px] md:text-[13.5px]">
<div className={`${uncheckedItem === 0} ? "hidden" : "block"`}>
{uncheckedItem} {uncheckedItem === 1 ? `item` : "items"} left
</div>
<button
onClick={onClear}
className="hover:text-dark-grayish-blue-300 transition-all"
className="hover:text-dark-grayish-blue-300
dark:hover:text-light-grayish-blue-100 transition-all"
type="button"
>
Clear Completed
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
darkMode : "class",
theme: {
fontFamily: {
josefin: ["Josefin Sans", "sans-serif"],
Expand Down Expand Up @@ -28,6 +29,7 @@ export default {
400: "hsl(233, 14%, 35%)",
500: "hsl(237, 14%, 26%)",
700: "hsl(235, 24%, 19%)",
800: "hsl(235, 24%, 11%)",
},
gradient: {
"blue-to-purple":
Expand All @@ -46,6 +48,7 @@ export default {
boxShadow: {
md: "0 30px 45px -15px rgba(194, 195, 214, 0.40)",
sm: "0 15px 30px -12px rgba(194, 195, 214, 0.40)",
"md-dark" : "0px 30px 45px -15px rgba(0, 0, 0, 0.50)"
},
},
},
Expand Down

0 comments on commit f207b96

Please sign in to comment.