Dark mode

src/components/Footer.js

@@ -3,7 +3,7 @@ import { Link } from "gatsby";
 
 function Footer() {
  return (
- <footer className="container flex items-center justify-center mx-auto w-full h-32 text-center">
+ <footer className="dark:bg-darkPrimary container flex items-center justify-center mx-auto w-full h-32 text-center dark:text-white">
  <nav className="w-full space-y-2">
  <ul className="flex items-center justify-center mx-auto font-bold space-x-4 lg:space-x-8">
  <Link to="/about">

src/components/Header.js

@@ -41,7 +41,7 @@ function Header({ title }) {
 
  return (
  <header
- className={`mx-auto w-full p-4 header-max-width transition-shadow ${
+ className={`mx-auto w-full p-4 header-max-width transition-shadow dark:bg-darkPrimary dark:text-white ${
  nav || shadow ? "shadow-md" : "shadow-none"
  } md:shadow-none md:w-10/12 md:p-0 md:py-4 fixed bg-white z-30 md:relative md:bg-none md:flex md:justify-between md:items-center md:text-center`}
  >
@@ -50,7 +50,7 @@ function Header({ title }) {
  <img
  src={logo}
  alt="Pitt CSC Logo"
- className="relative w-32"
+ className="relative px-4 py-2 w-32 dark:bg-white dark:rounded-md"
  width={128}
  />
  </Link>
@@ -69,7 +69,7 @@ function Header({ title }) {
  </button>
  </div>
  <nav
- className={`transition-all relative bg-white pointer-events-none max-h-0 opacity-0 ${
+ className={`transition-all relative bg-white dark:bg-darkPrimary pointer-events-none max-h-0 opacity-0 ${
  nav ? "nav-max-height opacity-100 p-4 pointer-events-auto" : ""
  } md:max-h-full md:bg-none md:opacity-100 md:pointer-events-auto`}
  >
@@ -98,7 +98,7 @@ function Header({ title }) {
  className={`flex items-center justify-center px-4 py-2 text-black ${
  resourcesNav
  ? "bg-primary text-white md:bg-none md:text-black"
- : "bg-none text-black"
+ : "bg-none text-black dark:text-white"
  } group-hover:bg-primary group-hover:text-white rounded-lg md:py-0 md:block`}
  >
  <div className="group relative z-50 w-full text-center text-lg font-bold md:text-base">

src/components/ProjectCard.js

@@ -11,7 +11,7 @@ const ProjectCard = ({ project }) => {
 
  return (
  <div
- className={`flex flex-col relative w-128 bg-gray-100 rounded-2xl focus:outline-none
+ className={`flex flex-col relative w-128 bg-gray-100 text-black dark:bg-gray-700 dark:text-white rounded-2xl focus:outline-none
  hover:shadow-lg shadow-md transform-gpu hover:scale-105 active:scale-95
  transition md:w-128`}
  >

src/components/TeamCard.js

@@ -13,7 +13,7 @@ function TeamCard({ bio, image, name, title, linkedIn, email }) {
  <AnimatePresence exitBeforeEnter>
  {modalOpen && (
  <Modal open={modalOpen} onClose={() => setModalOpen(false)}>
- <div className="flex flex-col items-center justify-center px-4 py-8 max-w-5xl bg-gray-100 rounded-2xl space-x-8 md:flex-row md:p-8">
+ <div className="flex flex-col items-center justify-center px-4 py-8 max-w-5xl text-black dark:text-white bg-gray-100 dark:bg-gray-700 rounded-2xl space-x-8 md:flex-row md:p-8">
  <img
  className="mx-auto w-48 h-48 rounded-full shadow-md object-cover object-center"
  src={image}
@@ -54,7 +54,7 @@ function TeamCard({ bio, image, name, title, linkedIn, email }) {
  )}
  </AnimatePresence>
  <div
- className={`relative p-8 w-64 bg-gray-100 rounded-2xl focus:outline-none hover:shadow-lg shadow-md ${
+ className={`relative p-8 w-64 text-black dark:text-white bg-gray-100 dark:bg-gray-700 rounded-2xl focus:outline-none hover:shadow-lg shadow-md ${
  bio !== undefined ? "cursor-pointer" : "cursor-default"
  } transform-gpu hover:scale-105 active:scale-95 transition md:w-72`}
  onClick={bio ? () => setModalOpen(true) : undefined}

src/layouts/layout.js

@@ -9,7 +9,7 @@ import { CookiesProvider } from "react-cookie";
 const Layout = ({ title, header, children }) => {
  return (
  <CookiesProvider>
- <div>
+ <div className="dark:bg-darkPrimary">
  <Header title={header} />
  <Seo title={title} />
  <AnimatePresence exitBeforeEnter>

src/pages/about.js

@@ -19,7 +19,7 @@ const AboutPage = () => {
  return (
  <Layout title="About Us | Pitt Computer Science Club" header="about">
  <motion.div
- className="overflow-hidden"
+ className="dark:bg-darkPrimary dark:text-white overflow-hidden"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}

src/pages/index.js

@@ -180,7 +180,7 @@ const IndexPage = ({ data }) => {
  header="home"
  >
  <motion.div
- className="overflow-hidden"
+ className="dark:bg-darkPrimary dark:text-white overflow-hidden"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
@@ -245,13 +245,13 @@ const IndexPage = ({ data }) => {
  <motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
- className="min-w-300 px-4 py-2 font-bold bg-white border-4 border-primary rounded-full focus:outline-none hover:shadow-lg shadow-md transition"
+ className="min-w-300 dark:bg-darkPrimary px-4 py-2 font-bold bg-white border-4 border-primary rounded-full focus:outline-none hover:shadow-lg shadow-md transition"
  >
  What We Do
  </motion.button>
  </Link>
  </motion.div>
- <div className="absolute z-0 -left-20 top-0 w-40 h-40 bg-secondary-200 rounded-2xl transform-gpu -rotate-12 lg:-left-40 lg:-top-8 xl:w-80 xl:h-80"></div>
+ <div className="absolute z-0 -left-20 top-0 w-40 h-40 dark:bg-primary bg-secondary-200 rounded-2xl transform-gpu -rotate-12 lg:-left-40 lg:-top-8 xl:w-80 xl:h-80"></div>
  </motion.div>
  <div className="relative flex flex-col items-center justify-center w-full lg:w-1/2">
  <motion.div
@@ -281,7 +281,7 @@ const IndexPage = ({ data }) => {
  transition={{
  delay: 0.4,
  }}
- className="polka-background absolute z-10 -right-10 -top-10 lg:-top-20"
+ className="polka-background absolute z-10 -right-10 -top-10 dark:hidden lg:-top-20"
  ></motion.div>
  </div>
  </section>
@@ -344,7 +344,7 @@ const IndexPage = ({ data }) => {
  initial="hidden"
  animate={controls}
  >
- <div className="mx-auto my-4 p-6 max-w-lg bg-secondary-200 rounded-3xl shadow-lg md:p-8 xl:my-0 xl:px-8 xl:py-12 xl:w-full">
+ <div className="mx-auto my-4 p-6 max-w-lg text-black bg-secondary-200 rounded-3xl shadow-lg md:p-8 xl:my-0 xl:px-8 xl:py-12 xl:w-full">
  <h2 className="mb-4 text-3xl font-bold lg:my-4 xl:text-4xl">
  Our Mission
  </h2>
@@ -536,7 +536,7 @@ const IndexPage = ({ data }) => {
  className="flex items-center justify-center"
  aria-label="Pitt Computer Science Club Zoom Meetings"
  >
- <p className="mx-2"> Join our zoom meetings: </p>
+ <p className="mx-2 text-black"> Join our zoom meetings: </p>
  <motion.div
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}

src/pages/join.js

@@ -34,7 +34,7 @@ const JoinPage = ({ data }) => {
  return (
  <Layout title="Join the Club | Pitt Computer Science Club" header="join">
  <motion.div
- className="overflow-hidden"
+ className="dark:bg-darkPrimary dark:text-white overflow-hidden"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
@@ -236,7 +236,10 @@ const JoinPage = ({ data }) => {
  className="flex items-center justify-center"
  aria-label="Pitt Computer Science Club Zoom Meetings"
  >
- <p className="mx-2"> Join our zoom meetings: </p>
+ <p className="mx-2 text-black">
+ {" "}
+ Join our zoom meetings:{" "}
+ </p>
  <motion.div
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
@@ -277,7 +280,7 @@ const JoinPage = ({ data }) => {
  </p>
  </div>
  <div className="mt-4 mx-auto p-6 bg-secondary-200 rounded-2xl shadow-lg md:p-8">
- <h3 className="mb-2 font-bold lg:text-lg">
+ <h3 className="mb-2 text-black font-bold lg:text-lg">
  Upcoming Events
  </h3>
  <ul className="flex flex-col items-start justify-center text-sm space-y-2 lg:text-base">

src/pages/projects.js

@@ -36,7 +36,7 @@ const ProjectsPage = ({ data }) => {
  return (
  <Layout title="Projects | Pitt Computer Science Club" header="projects">
  <motion.div
- className="overflow-hidden"
+ className="dark:bg-darkPrimary dark:text-white overflow-hidden"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}

src/pages/sponsors.js

@@ -39,7 +39,7 @@ const SponsorPage = ({ data }) => {
  return (
  <Layout title="Sponsors | Pitt Computer Science Club" header="sponsors">
  <motion.div
- className="overflow-hidden"
+ className="dark:bg-darkPrimary dark:text-white overflow-hidden"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
@@ -87,7 +87,7 @@ const SponsorPage = ({ data }) => {
  aria-label="PNC"
  >
  <img
- className="w-40 2xl:max-w-sm max-w-xs md:w-80 lg:w-full"
+ className="p-4 w-40 2xl:max-w-sm max-w-xs h-24 bg-white rounded-3xl object-contain md:w-80 md:h-64 lg:w-full"
  src={PNC}
  alt="PNC Logo"
  />
@@ -99,7 +99,7 @@ const SponsorPage = ({ data }) => {
  aria-label="Eaton"
  >
  <img
- className="w-40 2xl:max-w-sm max-w-xs md:w-80 lg:w-full"
+ className="p-4 w-40 2xl:max-w-sm max-w-xs h-24 bg-white rounded-3xl object-contain md:w-80 md:h-64 lg:w-full"
  src={Eaton}
  alt="Eaton Logo"
  />
@@ -111,7 +111,7 @@ const SponsorPage = ({ data }) => {
  aria-label="Naval Nuclear Lab"
  >
  <img
- className="w-40 2xl:max-w-sm max-w-xs md:w-80 lg:w-full"
+ className="p-4 w-40 2xl:max-w-sm max-w-xs h-24 bg-white rounded-3xl object-contain md:w-80 md:h-64 lg:w-full"
  src={Naval}
  alt="Naval Nuclear Lab Logo"
  />

src/styles/components/_projectcard.scss

@@ -9,5 +9,5 @@
  left: 0;
  width: 100%;
  height: 100%;
- border-radius: 20px 20px 0px 0px;
+ border-radius: 15px 15px 0px 0px;
 }

tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
  ],
  },
  },
- darkMode: false, // or 'media' or 'class'
+ darkMode: "media",
  theme: {
  extend: {
  colors: {
@@ -23,6 +23,8 @@ module.exports = {
  100: "#FFB81C",
  200: "#F8E3B4",
  },
+ darkPrimary: "#0F2027",
+ darkSecondary: "#4D70D9",
  },
  fontFamily: {
  sans: ["Poppins", ...defaultTheme.fontFamily.sans],
@@ -38,10 +40,11 @@ module.exports = {
  },
  variants: {
  extend: {
- display: ["group-hover"],
+ display: ["group-hover", "dark"],
  padding: ["group-hover"],
  transform: ["group-hover"],
  scale: ["group-hover"],
+ borderRadius: ["dark"],
  },
  },
  plugins: [require("@tailwindcss/forms")],