Remove light-mode color scheme for simplicity

Author: cmpadden

components/Header.vue

@@ -222,64 +222,6 @@ const route = useRoute();
                   </a>
                 </HeadlessMenuItem>
               </div>
-
-              <!-- Divider -->
-              <div class="border-t border-gray-300 dark:border-gray-600"></div>
-
-              <!-- Theme Toggle Section -->
-              <div class="px-1 py-1">
-                <HeadlessMenuItem v-slot="{ active }">
-                  <button
-                    @click="
-                      $colorMode.preference =
-                        $colorMode.value === 'dark' ? 'light' : 'dark'
-                    "
-                    :class="[
-                      active
-                        ? 'bg-orange-500/50 text-white dark:text-white'
-                        : 'text-gray-700 dark:text-white',
-                      'group flex w-full items-center rounded-md px-2 py-2 text-sm',
-                    ]"
-                  >
-                    <!-- Sun icon for when we're in dark mode (clicking switches to light) -->
-                    <svg
-                      v-if="$colorMode.value === 'dark'"
-                      class="mr-2 inline h-5 w-5"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-                      />
-                    </svg>
-
-                    <!-- Moon icon for when we're in light mode (clicking switches to dark) -->
-                    <svg
-                      v-else
-                      class="mr-2 inline h-5 w-5"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-                      />
-                    </svg>
-                    <span class="translate-y-0.5">{{
-                      $colorMode.value === "dark" ? "Light Mode" : "Dark Mode"
-                    }}</span>
-                  </button>
-                </HeadlessMenuItem>
-              </div>
             </HeadlessMenuItems>
           </transition>
         </HeadlessMenu>

components/MoreLink.vue

@@ -13,7 +13,7 @@ const props = defineProps({
   <div class="flex justify-end">
     <NuxtLink
       :to="props.to"
-      class="flex items-center text-sm font-bold text-gray-700 hover:text-orange-500 dark:text-white"
+      class="flex items-center text-sm font-bold hover:text-orange-500 text-white"
     >
       <span class="translate-y-0.5">More</span>
       <CursorArrowRaysIcon class="ml-1 h-5 w-5" aria-hidden="true" />

components/ThemeToggle.vue

@@ -11,7 +11,7 @@ const props = defineProps({
       <div v-for="(article, ix) of articles" :key="ix">
         <NuxtLink :to="article.path">
           <div
-            class="h-full space-y-4 rounded-lg p-4 text-gray-700 drop-shadow-lg hover:ring-1 hover:ring-gray-300 dark:bg-orange-400/50 dark:text-white dark:hover:ring-white"
+            class="h-full space-y-4 rounded-lg p-4 drop-shadow-lg hover:ring-1 bg-orange-400/50 text-white hover:ring-white"
           >
             <div>
               <div
@@ -24,7 +24,7 @@ const props = defineProps({
                 <NuxtTime
                   v-if="show_dates"
                   :datetime="article.date"
-                  class="text-sm text-gray-600 dark:text-gray-200"
+                  class="text-sm text-gray-200"
                   year="numeric"
                   month="short"
                   day="2-digit"
@@ -34,7 +34,7 @@ const props = defineProps({
                 >
               </div>
             </div>
-            <div class="line-clamp-3 text-sm text-gray-700 dark:text-gray-100">
+            <div class="line-clamp-3 text-sm text-gray-100">
               {{ article.description }}
             </div>
           </div>

components/section/BlogPosts.vue

@@ -100,12 +100,12 @@ const filtered_links = computed(() => {
 
 <template>
   <section
-    class="bg-gradient-to-b from-transparent to-background text-gray-700 dark:to-background-dark dark:text-white"
+    class="bg-gradient-to-b from-transparent to-background-dark text-white"
   >
-    <div class="container mx-auto py-8 text-gray-700 dark:text-white">
+    <div class="container mx-auto py-8 text-white">
       <div class="mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <nuxt-link
-          class="relative hover:ring-1 hover:ring-gray-300 dark:hover:ring-white rounded-lg"
+          class="relative hover:ring-1 hover:ring-white rounded-lg"
           v-for="link in filtered_links"
           :key="link.title"
           :to="link.link"
@@ -115,16 +115,16 @@ const filtered_links = computed(() => {
             :src="link.img || 'images/placeholder.png'"
           />
           <div
-            class="absolute bottom-2 flex w-full items-center justify-center"
+            class="absolute bottom-2 px-2 flex w-full items-center justify-center"
           >
             <div
-              class="w-full bg-black bg-[url('/images/noise.svg')] px-6 py-2 border-t border-b border-white"
+              class="w-full bg-black bg-[url('/images/noise.svg')] px-6 py-2 rounded-lg"
             >
-              <h3 class="text-xl font-bold text-gray-700 dark:text-white">
+              <h3 class="text-xl font-bold text-white">
                 {{ link.title }}
               </h3>
               <div
-                class="line-clamp-1 text-sm text-gray-700 dark:text-gray-300"
+                class="line-clamp-1 text-sm text-gray-300"
                 v-html="link.description"
               ></div>
             </div>

components/section/Playground.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="bg-gradient-to-b from-orange-500 to-red-500">
         <div class="p-[10px]">
-            <main class="flex h-[calc(100vh-20px)] flex-col rounded-3xl bg-background dark:bg-background-dark font-display">
+            <main class="flex h-[calc(100vh-20px)] flex-col rounded-3xl bg-background font-display">
                 <Header />
                 <main class="flex-1 overflow-scroll no-scrollbar">
                     <slot />

layouts/default.vue

@@ -1,28 +1,16 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   components: true,
-  modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "@nuxtjs/color-mode", "nuxt-headlessui"],
+  modules: ["@nuxt/content", "@nuxtjs/tailwindcss", "nuxt-headlessui"],
 
   app: {
     head: {
       bodyAttrs: {
-        class: 'bg-background dark:bg-background-dark'
+        class: 'bg-background'
       }
     }
   },
 
-  // Color mode configuration
-  colorMode: {
-    preference: 'system', // default value of $colorMode.preference
-    fallback: 'dark', // fallback value if not system preference found
-    hid: 'nuxt-color-mode-script',
-    globalName: '__NUXT_COLOR_MODE__',
-    componentName: 'ColorScheme',
-    classPrefix: '',
-    classSuffix: '',
-    storageKey: 'nuxt-color-mode'
-  },
-
   // Optionally change the default prefix.
   headlessui: {
     prefix: "Headless",
@@ -34,10 +22,7 @@ export default defineNuxtConfig({
         // Disable highlighting until interoperability with by the Tailwind Typography plugin is sorted
         // highlight: false
         highlight: {
-          theme: {
-            light: 'github-light',
-            default: 'github-dark'
-          },
+          theme: 'github-dark',
           preload: [
               'bash',
               'js',

nuxt.config.ts

@@ -23,7 +23,6 @@
     "webpack": "^5.99.9"
   },
   "dependencies": {
-    "@nuxtjs/color-mode": "^3.5.2",
     "chords.ts": "^0.1.0",
     "p5": "^1.11.7",
     "tailwindcss": "^3.4.17"

package.json

@@ -8,7 +8,7 @@ const { data: page } = await useAsyncData(route.path, () => {
 
 <template>
   <div
-    class="container mx-auto mb-10 max-w-[1024px] space-y-6 text-gray-700 shadow-lg dark:text-white"
+    class="container mx-auto mb-10 max-w-[1024px] space-y-6 shadow-lg text-white"
     v-if="page"
   >
     <!-- title -->
@@ -26,12 +26,12 @@ const { data: page } = await useAsyncData(route.path, () => {
     <!-- Meta -->
     <div class="flex space-x-2">
       <div>
-        <div class="mb-2 text-xs uppercase text-gray-600 dark:text-gray-400">
+        <div class="mb-2 text-xs uppercase text-gray-400">
           Category
         </div>
         <div class="flex flex-row space-x-2">
           <NuxtLink
-            class="mr-2 w-min rounded-md bg-background text-sm font-bold hover:cursor-pointer hover:text-orange-500 dark:bg-background-dark"
+            class="mr-2 w-min rounded-md text-sm font-bold hover:cursor-pointer hover:text-orange-500 bg-background"
             v-for="(category, ix) in page.categories"
             :key="ix"
             :to="`/articles?category=${category}`"
@@ -41,15 +41,15 @@ const { data: page } = await useAsyncData(route.path, () => {
         </div>
       </div>
 
-      <div class="border-r border-gray-400 dark:border-gray-400"></div>
+      <div class="border-r border-gray-400"></div>
 
       <div>
-        <div class="mb-2 text-xs uppercase text-gray-600 dark:text-gray-400">
+        <div class="mb-2 text-xs uppercase text-gray-400">
           Tags
         </div>
         <div class="flex flex-row md:space-x-2">
           <NuxtLink
-            class="mr-2 w-min rounded-md bg-background text-sm font-bold hover:cursor-pointer hover:text-orange-500 dark:bg-background-dark"
+            class="mr-2 w-min rounded-md text-sm font-bold hover:cursor-pointer hover:text-orange-500 bg-background"
             v-for="(tag, ix) in page.tags"
             :key="ix"
             :to="`/articles?tag=${tag}`"
@@ -65,7 +65,7 @@ const { data: page } = await useAsyncData(route.path, () => {
         - Use prose-pre:bg-white to work with @nuxt/content syntax highlighting, otherwise background-color defaults to `.prose:where(pre)`
       -->
     <article
-      class="prose max-w-[1024px] text-gray-700 prose-h2:mt-8 prose-p:text-justify prose-a:font-bold prose-a:text-orange-400 prose-a:no-underline hover:prose-a:text-orange-500 prose-blockquote:text-gray-400 prose-code:text-white prose-pre:bg-black dark:text-gray-300"
+      class="prose max-w-[1024px] prose-h2:mt-8 prose-p:text-justify prose-a:font-bold prose-a:text-orange-400 prose-a:no-underline hover:prose-a:text-orange-500 prose-blockquote:text-gray-400 prose-code:text-white prose-pre:bg-black text-gray-300"
     >
       <ContentRenderer v-if="page" :value="page" />
     </article>

pages/articles/[...slug].vue

@@ -86,7 +86,7 @@ function toggleCategory(cat) {
 </script>
 
 <template>
-  <section class="container mx-auto font-mono text-gray-700 dark:text-white">
+  <section class="container mx-auto font-mono text-white">
     <div class="grid grid-cols-4 gap-4">
       <div class="col-span-4 lg:col-span-3">
         <div class="grid grid-cols-10 gap-y-4 lg:gap-y-6">
@@ -106,15 +106,15 @@ function toggleCategory(cat) {
                 <ContentRenderer
                   v-if="article.meta?.excerpt"
                   :value="article.meta.excerpt"
-                  class="line-clamp-5 text-xs text-gray-600 dark:text-gray-400"
+                  class="line-clamp-5 text-xs text-gray-400"
                 />
               </div>
             </div>
           </template>
         </div>
       </div>
       <div
-        class="col-span-4 border-l border-gray-300 pl-4 dark:border-gray-700 lg:col-span-1"
+        class="col-span-4 border-l pl-4 border-gray-700 lg:col-span-1"
       >
         <div class="my-2 space-y-2">
           <p class="text-xl font-bold">Categories</p>
@@ -124,7 +124,7 @@ function toggleCategory(cat) {
             :class="{
               'bg-orange-500 text-white': selectedCategories.includes(category),
             }"
-            class="cursor-pointer p-1 text-sm text-gray-600 hover:bg-orange-500 hover:text-white dark:text-gray-400"
+            class="cursor-pointer p-1 text-sm hover:bg-orange-500 hover:text-white text-gray-400"
             @click="toggleCategory(category)"
           >
             {{ category }}
@@ -139,7 +139,7 @@ function toggleCategory(cat) {
             :class="{
               'bg-orange-500 text-white': selectedTags.includes(tag),
             }"
-            class="cursor-pointer select-none p-1 text-sm text-gray-600 hover:bg-orange-500 hover:text-white dark:text-gray-400"
+            class="cursor-pointer select-none p-1 text-sm hover:bg-orange-500 hover:text-white text-gray-400"
             @click="toggleTag(tag)"
           >
             {{ tag }}