Merge pull request #3 from MockBukkit/light-mode-fix

Add lightmode to the website
MockBukkit · Oct 22, 2024 · 8930c1f · 8930c1f
2 parents e3f5c98 + 98ba20d
commit 8930c1f
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 98 deletions.
diff --git a/components/CatchSection.vue b/components/CatchSection.vue
@@ -4,7 +4,7 @@
     <div
         class="mx-auto my-[5rem] flex w-full max-w-screen-xl flex-1 flex-row items-center justify-center max-md:my-[2rem] max-md:mt-4 max-md:w-full max-md:flex-col"
     >
-        <div class="w-full max-w-screen-xl text-white max-md:flex max-md:flex-col max-xl:ml-4 max-md:ml-0">
+        <div class="w-full max-w-screen-xl dark:text-white max-md:flex max-md:flex-col max-xl:ml-4 max-md:ml-0">
             <h1 class="py-2 text-left text-5xl font-semibold max-md:py-0 max-md:text-center max-md:text-2xl">
                 Testing.
             </h1>

diff --git a/components/NavBar.vue b/components/NavBar.vue
@@ -10,141 +10,122 @@
                 </NuxtLink>
                 <!-- Mobile Hamburger -->
                 <button data-collapse-toggle="navbar-default" type="button"
-                        class="navbar-burger in1line-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-center text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
-                        aria-controls="navbar-default" aria-expanded="false"
-                        @click="toggleMenu"
-                        v-if="isMobile && !isMenuOpen"
-                >
+                    class="navbar-burger in1line-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-center text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                    aria-controls="navbar-default" aria-expanded="false" @click="toggleMenu"
+                    v-if="isMobile && !isMenuOpen">
                     <span class="sr-only">Open main menu</span>
-                    <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+                    <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                        viewBox="0 0 17 14">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M1 1h15M1 7h15M1 13h15" />
                     </svg>
                 </button>
             </div>
 
             <!--Full size menu-->
             <div v-if="mounted && !isMobile" class="w-full md:block md:w-auto" id="navbar-default">
-                <ul class="mt-4 flex flex-col rounded-lg border border-gray-100 p-4 font-medium md:mt-0 md:flex-row md:space-x-8 md:border-0 md:p-0 dark:border-gray-700">
+                <ul
+                    class="mt-4 flex flex-col rounded-lg border border-gray-100 p-4 font-medium md:mt-0 md:flex-row md:space-x-8 md:border-0 md:p-0 dark:border-gray-700">
                     <li>
-                        <NuxtLink
-                            to="/"
-                            active-class="text-green-500"
-                            class="block rounded py-2 pl-3 pr-4 text-white md:bg-transparent md:p-0 dark:text-white md:hover:text-green-500"
-                            aria-current-value="page"
-                            title="Home"
-                        >Home
+                        <NuxtLink to="/" active-class="text-green-500"
+                            class="block rounded py-2 pl-3 pr-4 dark:text-white md:bg-transparent md:p-0 dark:text-white md:hover:text-green-500"
+                            aria-current-value="page" title="Home">Home
                         </NuxtLink>
                     </li>
                     <li>
-                        <NuxtLink
-                            to="/team"
-                            active-class="text-green-500"
-                            class="block rounded py-2 pl-3 pr-4 text-white md:bg-transparent md:p-0 dark:text-white md:hover:text-green-500"
-                            aria-current-value="page"
-                            title="Team"
-                        >Team
+                        <NuxtLink to="/team" active-class="text-green-500"
+                            class="block rounded py-2 pl-3 pr-4 dark:text-white md:bg-transparent md:p-0 dark:text-white md:hover:text-green-500"
+                            aria-current-value="page" title="Team">Team
                         </NuxtLink>
                     </li>
                     <li>
-                        <a
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            href="https://mockbukkit.readthedocs.io/en/v1.21"
+                        <a target="_blank" rel="noopener noreferrer" href="https://mockbukkit.readthedocs.io/en/v1.21"
                             title="Docs"
-                            class="block rounded py-2 pl-3 pr-4 text-gray-900 hover:bg-gray-100 md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-green-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-green-500"
-                        >Docs</a
-                        >
+                            class="block rounded py-2 pl-3 pr-4 text-gray-900 hover:bg-gray-100 md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-green-500 dark:text-white dark:hover:bg-gray-700 dark:hover:dark:text-white md:dark:hover:bg-transparent md:dark:hover:text-green-500">Docs</a>
                     </li>
                     <li>
-                        <a
-                            href="https://github.com/MockBukkit/MockBukkit/blob/v1.21/CONTRIBUTING.md"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            title="Contribute"
-                            class="block rounded py-2 pl-3 pr-4 text-gray-900 hover:bg-gray-100 md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-green-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent md:dark:hover:text-green-500"
-                        >Contribute</a
-                        >
+                        <a href="https://github.com/MockBukkit/MockBukkit/blob/v1.21/CONTRIBUTING.md" target="_blank"
+                            rel="noopener noreferrer" title="Contribute"
+                            class="block rounded py-2 pl-3 pr-4 text-gray-900 hover:bg-gray-100 md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-green-500 dark:text-white dark:hover:bg-gray-700 dark:hover:dark:text-white md:dark:hover:bg-transparent md:dark:hover:text-green-500">Contribute</a>
                     </li>
                     <li>
-                        <a href="https://github.com/MockBukkit/MockBukkit" target="_blank" rel="noopener noreferrer" title="GitHub">
-                            <font-awesome-icon
-                                icon="fa-brands fa-github"
-                                class="text-2xl text-white md:hover:cursor-pointer md:hover:text-green-500"
-                            />
+                        <a href="https://github.com/MockBukkit/MockBukkit" target="_blank" rel="noopener noreferrer"
+                            title="GitHub">
+                            <font-awesome-icon icon="fa-brands fa-github"
+                                class="text-2xl dark:text-white md:hover:cursor-pointer md:hover:text-green-500" />
                         </a>
                     </li>
                     <li>
-                        <a href="https://discord.gg/Xunsn6D8MB" target="_blank" rel="noopener noreferrer" title="Discord">
-                            <font-awesome-icon
-                                icon="fa-brands fa-discord"
-                                class="text-2xl text-white md:hover:cursor-pointer md:hover:text-green-500"
-                            />
+                        <a href="https://discord.gg/Xunsn6D8MB" target="_blank" rel="noopener noreferrer"
+                            title="Discord">
+                            <font-awesome-icon icon="fa-brands fa-discord"
+                                class="text-2xl dark:text-white md:hover:cursor-pointer md:hover:text-green-500" />
                         </a>
                     </li>
                 </ul>
             </div>
             <!--Mobile menu-->
             <div class="navbar-menu relative z-50" v-if="isMenuOpen">
-                <div class="navbar-backdrop fixed inset-0 bg-[#111111] opacity-25"></div>
-                <nav class="fixed top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-6 px-6 bg-[#111111] overflow-y-auto">
+                <div class="navbar-backdrop fixed inset-0 bg-[#666666] dark:bg-[#111111] opacity-25"></div>
+                <nav
+                    class="fixed top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-6 px-6 bg-[#666666] dark:bg-[#111111] overflow-y-auto">
                     <div class="flex items-center mb-8 ml-2">
                         <NuxtLink to="/" class="flex max-md:mx-0 ">
                             <img src="~/assets/mockbukkit_logo.png" alt="logo" class="flex h-auto w-1/6" />
                             <span
                                 class="ml-2 self-center whitespace-nowrap text-2xl font-semibold dark:text-white">Mockbukkit</span>
                         </NuxtLink>
                         <button class="navbar-close" @click="toggleMenu">
-                            <svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none"
-                                 viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            <svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500"
+                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12"></path>
                             </svg>
                         </button>
                     </div>
                     <div>
                         <ul>
                             <li class="mb-8">
                                 <NuxtLink active-class="text-green-500"
-                                          class="block ml-4 text-sm font-semibold text-white hover:bg-blue-50 rounded" to="/">Home
+                                    class="block ml-4 text-sm font-semibold dark:text-white hover:bg-blue-50 rounded"
+                                    to="/">
+                                    Home
                                 </NuxtLink>
                             </li>
                             <li class="mb-8">
                                 <NuxtLink active-class="text-green-500"
-                                          class="block ml-4 text-sm font-semibold text-white hover:bg-blue-50 rounded" to="/team">
+                                    class="block ml-4 text-sm font-semibold dark:text-white hover:bg-blue-50 rounded"
+                                    to="/team">
                                     Team
                                 </NuxtLink>
                             </li>
                             <li class="mb-8">
-                                <a class="block ml-4 text-sm font-semibold text-white hover:bg-blue-50 rounded"
-                                   href="https://mockbukkit.readthedocs.io/en/v1.21"
-                                   target="_blank"
-                                   title="Docs"
-                                   rel="noopener noreferrer">
+                                <a class="block ml-4 text-sm font-semibold dark:text-white hover:bg-blue-50 rounded"
+                                    href="https://mockbukkit.readthedocs.io/en/v1.21" target="_blank" title="Docs"
+                                    rel="noopener noreferrer">
                                     Docs
                                 </a>
                             </li>
                             <li class="mb-8">
-                                <a class="block ml-4 text-sm font-semibold text-white hover:bg-blue-50 rounded"
-                                   href="https://github.com/MockBukkit/MockBukkit/blob/v1.21/CONTRIBUTING.md"
-                                   target="_blank"
-                                   title="Contribute"
-                                   rel="noopener noreferrer">
+                                <a class="block ml-4 text-sm font-semibold dark:text-white hover:bg-blue-50 rounded"
+                                    href="https://github.com/MockBukkit/MockBukkit/blob/v1.21/CONTRIBUTING.md"
+                                    target="_blank" title="Contribute" rel="noopener noreferrer">
                                     Contribute
                                 </a>
                             </li>
                             <li class="mb-8 flex ">
-                                <a class="flex-1 ml-4" href="https://github.com/MockBukkit/MockBukkit" target="_blank" rel="noopener noreferrer" title="GitHub">
-                                    <font-awesome-icon
-                                        icon="fa-brands fa-github"
-                                        class="text-2xl text-white md:hover:cursor-pointer md:hover:text-green-500"
-                                    />
+                                <a class="flex-1 ml-4" href="https://github.com/MockBukkit/MockBukkit" target="_blank"
+                                    rel="noopener noreferrer" title="GitHub">
+                                    <font-awesome-icon icon="fa-brands fa-github"
+                                        class="text-2xl dark:text-white md:hover:cursor-pointer md:hover:text-green-500" />
                                 </a>
                             </li>
                             <li class="mb-8 flex ">
-                                <a class="flex-1 ml-4" href="https://discord.gg/Xunsn6D8MB" target="_blank" rel="noopener noreferrer" title="Discord">
-                                    <font-awesome-icon
-                                        icon="fa-brands fa-discord"
-                                        class="text-2xl text-white md:hover:cursor-pointer md:hover:text-green-500"
-                                    />
+                                <a class="flex-1 ml-4" href="https://discord.gg/Xunsn6D8MB" target="_blank"
+                                    rel="noopener noreferrer" title="Discord">
+                                    <font-awesome-icon icon="fa-brands fa-discord"
+                                        class="text-2xl dark:text-white md:hover:cursor-pointer md:hover:text-green-500" />
                                 </a>
                             </li>
                         </ul>
@@ -180,9 +161,9 @@ const toggleMenu = () => {
 const route = useRoute();
 
 watch(() => route.fullPath, () => {
-        console.log("Route refresh");
-        isMenuOpen.value = false;
-    },
+    console.log("Route refresh");
+    isMenuOpen.value = false;
+},
     {
         deep: true,
         immediate: true

diff --git a/components/footer/Footer.vue b/components/footer/Footer.vue
@@ -69,7 +69,7 @@ const footer_categories = [
                 class="h-auto w-1/6 max-md:mx-auto max-md:my-4 max-md:w-2/3 max-xl:ml-4"
             />
             <div>
-                <p class="text-sm text-neutral-400 max-md:text-center max-xl:mr-4">
+                <p class="text-sm text-neutral-800 dark:text-neutral-400 max-md:text-center max-xl:mr-4">
                     © 2024 The Mockbukkit Team.
                 </p>
             </div>

diff --git a/components/footer/FooterCategory.vue b/components/footer/FooterCategory.vue
@@ -21,10 +21,10 @@ const props = defineProps({
 
 <template>
     <div class="w-40 my-8 text-center max-md:mx-auto max-md:my-2">
-        <h2 class="my-5 font-bold text-white">{{ title }}</h2>
+        <h2 class="my-5 font-bold dark:text-white">{{ title }}</h2>
         <ul>
             <li v-for="link in links" :key="link.name">
-                <a :href="link.url" class="text-neutral-400 hover:text-neutral-200" :title="link.title">{{ link.name }}</a>
+                <a :href="link.url" class="dark:text-neutral-400 dark:hover:text-neutral-200 hover:text-neutral-500" :title="link.title">{{ link.name }}</a>
             </li>
         </ul>
     </div>

diff --git a/components/highlight/HighlightCard.vue b/components/highlight/HighlightCard.vue
@@ -19,12 +19,12 @@ const props = defineProps({
 
 <template>
     <div
-        class="flex flex-col rounded-lg bg-gradient-to-b from-green-800 to-green-700 pb-10 pt-3 shadow-xl transition duration-200 ease-in-out scale-95 hover:scale-100"
+        class="flex flex-col rounded-lg bg-gradient-to-b from-green-500 to-green-400 dark:from-green-800 dark:to-green-700 pb-10 pt-3 shadow-xl transition duration-200 ease-in-out scale-95 hover:scale-100"
     >
         <div class="mt-3 flex flex-col items-center justify-center">
-            <font-awesome-icon class="mb-3 text-3xl text-white" :icon="icon" />
-            <h3 class="font-bold text-white">{{ title }}</h3>
+            <font-awesome-icon class="mb-3 text-3xl dark:text-white" :icon="icon" />
+            <h3 class="font-bold dark:text-white">{{ title }}</h3>
         </div>
-        <p class="items-center p-4 text-center text-white">{{ text }}</p>
+        <p class="items-center p-4 text-center dark:text-white">{{ text }}</p>
     </div>
 </template>
diff --git a/components/highlight/HighlightSection.vue b/components/highlight/HighlightSection.vue
@@ -32,10 +32,10 @@ const loopCards = computed(() => {
 </script>
 
 <template>
-    <div class="my-8 flex w-full flex-col bg-neutral-800 py-8">
+    <div class="my-8 flex w-full flex-col bg-neutral-400 dark:bg-neutral-800 py-8">
         <div class="mx-auto flex flex-row">
-            <h3 class="font text-xl font-semibold text-white">Make your development life</h3>
-            <h3 class="ml-1 text-xl font-semibold text-green-500">easier.</h3>
+            <h3 class="font text-xl font-semibold dark:text-white">Make your development life</h3>
+            <h3 class="ml-1 text-xl font-semibold text-green-700 dark:text-green-500">easier.</h3>
         </div>
         <div class="mx-auto my-8 flex max-w-screen-xl flex-row max-lg:flex-col">
             <HighlightCard

diff --git a/components/team/ContributorsSection.vue b/components/team/ContributorsSection.vue
@@ -43,8 +43,8 @@ if (data.value != null) {
 </script>
 
 <template>
-    <div class="bg-neutral-800 p-4">
-        <h2 class="py-4 text-center text-3xl font-bold text-white">Contributors</h2>
+    <div class="bg-neutral-400 dark:bg-neutral-800 p-4">
+        <h2 class="py-4 text-center text-3xl font-bold dark:text-white">Contributors</h2>
         <div class="mx-auto grid max-w-screen-xl gap-4 pb-8 pt-4 max-md:grid-cols-3 lg:grid-cols-8">
             <a v-for="contributor in contributors" :href="contributor.html_url" target="_blank" rel="noopener noreferrer">
                 <img

diff --git a/components/team/TeamCard.vue b/components/team/TeamCard.vue
@@ -11,13 +11,13 @@ const props = defineProps({
 
 <template>
     <div
-        class="mx-auto my-2 rounded bg-white bg-gradient-to-b from-green-800 to-green-700 p-2 text-center shadow-xl transition duration-200 ease-in-out hover:scale-105 max-md:mx-6"
+        class="mx-auto my-2 rounded bg-white bg-gradient-to-b from-green-500 to-green-400 dark:from-green-800 dark:to-green-700 p-2 text-center shadow-xl transition duration-200 ease-in-out hover:scale-105 max-md:mx-6"
     >
         <img class="mx-auto mt-4 w-1/3 rounded-full shadow-xl max-md:w-1/4" :src="image" alt="pic" />
-        <h2 class="mt-2 text-lg font-bold text-white">{{ name }}</h2>
+        <h2 class="mt-2 text-lg font-bold dark:text-white">{{ name }}</h2>
         <h3 class="text-neutral-900">{{ role }}</h3>
         <a :href="github" target="_blank" rel="noopener noreferrer"
-            ><font-awesome-icon class="mt-5 text-3xl text-white" icon="fa-brands fa-github"
+            ><font-awesome-icon class="mt-5 text-3xl dark:text-white" icon="fa-brands fa-github"
         /></a>
     </div>
 </template>