From 9c6da0f845f581e25c3ec241daad6a46ed178896 Mon Sep 17 00:00:00 2001 From: Swayam Date: Tue, 16 Dec 2025 19:44:28 +0530 Subject: [PATCH 1/3] feat: implement dark mode toggle #342 --- package.json | 1 + src/App.js | 14 ++++- src/Components/AboutUs/index.js | 12 ++-- src/Components/Contribute/index.js | 6 +- .../Events/Cards/CardBadge/index.js | 11 +++- src/Components/Events/Cards/index.js | 15 +++-- src/Components/Events/GoogleCalendar/index.js | 5 +- src/Components/Events/index.js | 13 +++-- src/Components/Header/index.js | 33 ++++++++--- .../Home/contribution/ContributionCard.js | 6 +- .../Home/contribution/ContributionSection.js | 6 +- src/Components/Home/index.js | 8 ++- src/Components/ImageTextSection/index.js | 6 +- src/Components/OurEvents/index.js | 10 +++- .../ProgramsTablesSection.js | 39 ++++++------- src/Components/Programs/Timeline.js | 25 ++++++-- src/Components/Projects/ProjectCard/index.js | 15 ++++- .../Projects/Sponsors/Section/index.js | 10 +++- src/Components/Projects/index.js | 8 ++- src/Components/SectionHeader/index.js | 6 +- src/Components/SectionSubheader/index.js | 6 +- src/Context/ThemeContext.js | 55 ++++++++++++++++++ src/assets/logo_dark.png | Bin 0 -> 5135716 bytes src/assets/placeholder_dark.png | Bin 0 -> 5340741 bytes src/content/projects_content.js | 52 +++++++++++------ src/index.js | 5 +- yarn.lock | 5 ++ 27 files changed, 277 insertions(+), 95 deletions(-) create mode 100644 src/Context/ThemeContext.js create mode 100644 src/assets/logo_dark.png create mode 100644 src/assets/placeholder_dark.png diff --git a/package.json b/package.json index d3caed22..c187af8f 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@ant-design/icons": "^4.2.2", "@testing-library/jest-dom": "^4.2.4", "@testing-library/user-event": "^7.1.2", + "@theme-toggles/react": "^4.1.0", "dayjs": "^1.9.3", "html-react-parser": "^1.4.0", "react": "^16.13.1", diff --git a/src/App.js b/src/App.js index a44a5351..53062e07 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; import { View } from 'react-native'; +import { ThemeContext } from './Context/ThemeContext'; import Header from './Components/Header'; import Content from './Components/Content'; import Footer from './Components/Footer'; @@ -14,8 +15,17 @@ function App() { 'EVENTS', 'CONTRIBUTE', ]; + const { colors } = useContext(ThemeContext); return ( - +