improve dark mode support

NetCoreTemplates · Feb 15, 2024 · f14a071 · f14a071
1 parent 31c81dd
commit f14a071
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 33 deletions.
diff --git a/MyApp.Client/src/components/BlogPosts.vue b/MyApp.Client/src/components/BlogPosts.vue
@@ -15,7 +15,7 @@
             <p class="text-xl font-semibold text-gray-900 dark:text-gray-50 whitespace-nowrap overflow-hidden text-ellipsis" :title="post.title">
               {{post.title}}
             </p>
-            <p class="mt-3 text-base text-gray-500">{{post.summary}}</p>
+            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">{{post.summary}}</p>
           </a>
         </div>
         <div class="mt-6 flex items-center">
@@ -26,11 +26,11 @@
             </a>
           </div>
           <div class="ml-3">
-            <p class="text-sm font-medium text-gray-900">
+            <p class="text-sm font-medium text-gray-900 dark:text-gray-50">
               <RouterLink v-if="authorLink(post.author)" :to="authorLink(post.author)!" class="hover:underline">{{post.author}}</RouterLink>
               <span v-else>{{post.author}}</span>
             </p>
-            <div class="flex space-x-1 text-sm text-gray-500">
+            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
               <time :datetime="dateTimestamp(post.date)">{{dateLabel(post.date)}}</time>
               <span class="px-1" aria-hidden="true">&middot;</span>
               <span>{{post.minutesToRead}} min read</span>

diff --git a/MyApp.Client/src/components/BlogTitle.vue b/MyApp.Client/src/components/BlogTitle.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="text-center">
-    <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">{{blogTitle}}</h2>
-    <p class="mx-auto mt-3 max-w-2xl text-xl text-gray-500 sm:mt-4" v-html="heading">
+    <h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">{{blogTitle}}</h2>
+    <p class="mx-auto mt-3 max-w-2xl text-xl text-gray-500 dark:text-gray-400 sm:mt-4" v-html="heading">
     </p>
   </div>
 </template>

diff --git a/MyApp.Client/src/components/GettingStarted.vue b/MyApp.Client/src/components/GettingStarted.vue
@@ -15,7 +15,7 @@
                   <Iconify icon="logos:vue" class="w-12 h-12" />
                 </div>
               </div>
-              <div class="text-xl font-medium text-gray-700">Vue SPA</div>
+              <div class="text-xl font-medium text-gray-700 dark:text-gray-300">Vue SPA</div>
               <div class="flex justify-center h-8"></div>
               <span class="archive-name px-4 pb-2 text-blue-600 dark:text-indigo-400">{{ projectZip }}</span>
               <div class="count mt-1 text-gray-400 text-sm"></div>

diff --git a/MyApp.Client/src/components/MarkdownPage.vue b/MyApp.Client/src/components/MarkdownPage.vue
@@ -2,7 +2,7 @@
   <article v-if="frontmatter.nowrap">
     <slot></slot>
   </article>
-  <div v-else class="prose lg:prose-xl text-left mt-8 mb-20 mx-auto max-w-fit">
+  <div v-else class="prose dark:prose-invert lg:prose-xl text-left mt-8 mb-20 mx-auto max-w-fit">
     <h1 class="mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">{{frontmatter.title}}</h1>
     <div class="max-w-3xl mx-auto">
       <article class="max-w-none mb-32">

diff --git a/MyApp.Client/src/components/VideoGroup.vue b/MyApp.Client/src/components/VideoGroup.vue
@@ -14,8 +14,8 @@
             </div>
             <div>
               <div class="flex items-center gap-x-4 text-xs">
-                <time datetime="2020-03-16" class="text-gray-500">{{dateFmt(video.date)}}</time>
-                <span v-for="tag in video.tags" class="relative z-10 rounded-full bg-gray-50 dark:bg-gray-900 py-1.5 px-3 font-medium text-gray-600 dark:text-gray-300">
+                <time datetime="2020-03-16" class="text-gray-500 dark:text-gray-400">{{dateFmt(video.date)}}</time>
+                <span v-for="tag in video.tags" class="relative z-10 rounded-full bg-gray-50 dark:bg-gray-800 py-1.5 px-3 font-medium text-gray-600 dark:text-gray-300">
                   {{ tag }}
                 </span>
               </div>
@@ -26,7 +26,7 @@
                   </a>
                 </h3>
                 <div class="mt-5 text-sm leading-6 text-gray-600 dark:text-gray-400">
-                  <div class="prose">
+                  <div class="prose dark:prose-invert">
                     <MarkdownComponent type="videos" :doc="video" :group="group" />
                   </div>
                 </div>

diff --git a/MyApp.Client/src/pages/blog.vue b/MyApp.Client/src/pages/blog.vue
@@ -47,7 +47,7 @@
               </p>
               <RouterLink :to="postLink(post)" class="mt-2 block">
                 <p class="text-xl font-semibold text-gray-900 dark:text-gray-50">{{post.title}}</p>
-                <p class="mt-3 text-base text-gray-500">{{post.summary}}</p>
+                <p class="mt-3 text-base text-gray-500 dark:text-gray-400">{{post.summary}}</p>
               </RouterLink>
             </div>
             <div class="mt-6 flex items-center">
@@ -58,11 +58,11 @@
                 </span>
               </div>
               <div class="ml-3">
-                <p class="text-sm font-medium text-gray-900">
+                <p class="text-sm font-medium text-gray-900 dark:text-gray-50">
                   <RouterLink v-if="authorLink(post.author)" :to="authorLink(post.author)!" class="hover:underline">{{post.author}}</RouterLink>
                   <span v-else>{{post.author}}</span>
                 </p>
-                <div class="flex space-x-1 text-sm text-gray-500">
+                <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                   <time :datetime="dateTimestamp(post.date)">{{dateLabel(post.date)}}</time>
                   <span class="px-1" aria-hidden="true">&middot;</span>
                   <span>{{post.minutesToRead}} min read</span>
@@ -82,7 +82,7 @@
               <div class="w-3/4">
                 <RouterLink :to="postLink(post)" class="mt-2 block">
                   <p class="text-xl font-semibold text-gray-900 dark:text-gray-50">{{post.title}}</p>
-                  <p class="mt-3 text-base text-gray-500">{{post.summary}}</p>
+                  <p class="mt-3 text-base text-gray-500 dark:text-gray-400">{{post.summary}}</p>
                 </RouterLink>
                 <div class="mt-6 flex items-center">
                   <div class="flex-shrink-0">
@@ -92,11 +92,11 @@
                     </span>
                   </div>
                   <div class="ml-3">
-                    <p class="text-sm font-medium text-gray-900">
+                    <p class="text-sm font-medium text-gray-900 dark:text-gray-50">
                       <RouterLink v-if="authorLink(post.author)" :to="authorLink(post.author)!" class="hover:underline">{{post.author}}</RouterLink>
                       <span v-else>{{post.author}}</span>
                     </p>
-                    <div class="flex space-x-1 text-sm text-gray-500">
+                    <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                       <time :datetime="dateTimestamp(post.date)">{{dateLabel(post.date)}}</time>
                       <span class="px-1" aria-hidden="true">&middot;</span>
                       <span>{{post.minutesToRead}} min read</span>

diff --git a/MyApp.Client/src/pages/index.vue b/MyApp.Client/src/pages/index.vue
@@ -6,7 +6,7 @@
         <span class="block xl:inline">Welcome to </span>
         <span class="block text-green-600 dark:text-green-500 xl:inline">Vue SPA</span>
       </h1>
-      <p class="mx-auto mt-3 max-w-md text-base text-gray-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
+      <p class="mx-auto mt-3 max-w-md text-base text-gray-500 dark:text-gray-400 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
         Welcome to your new Vue SPA App, checkout links below to get started:
       </p>
       <div class="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">

diff --git a/MyApp.Client/src/pages/posts/[slug].vue b/MyApp.Client/src/pages/posts/[slug].vue
@@ -24,10 +24,10 @@
         <div class="flex max-w-3xl mx-auto justify-between">
           <div>
             <div class="mb-4 flex flex-wrap">
-              <RouterLink v-for="tag in post.tags" :to="tagLink(tag)" class="mr-2 text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5">{{tag}}</RouterLink>
+              <RouterLink v-for="tag in post.tags" :to="tagLink(tag)" class="mr-2 mb-2 text-xs leading-5 font-semibold bg-slate-400/10 dark:bg-slate-400/30 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:hover:bg-slate-400/40 dark:highlight-white/5">{{tag}}</RouterLink>
             </div>
             <div v-if="post.date" class="max-w-3xl mx-auto">
-              <div class="mb-6 text-lg text-gray-500">
+              <div class="mb-6 text-lg text-gray-500 dark:text-gray-400">
                 <time :datetime="dateTimestamp(post.date)">{{dateLabel(post.date)}}</time>
                 <span class="px-1" aria-hidden="true">&middot;</span>
                 <span>{{post.wordCount}} min read</span>
@@ -36,14 +36,14 @@
           </div>
         </div>
         <div class="max-w-3xl mx-auto">
-          <div id="post" class="prose lg:prose-xl max-w-none mb-32">
+          <div id="post" class="prose dark:prose-invert lg:prose-xl max-w-none mb-32">
             <MarkdownComponent type="blog" :doc="post" />
           </div>
         </div>
       </article>
     </div>
 
-    <div v-if="author && authorPosts.length" class="bg-gray-50 py-20">
+    <div v-if="author && authorPosts.length" class="bg-gray-50 dark:bg-gray-900 py-20">
       <div class="max-w-3xl mx-auto">
         <div class="flex justify-between">
           <div>
@@ -53,7 +53,7 @@
             <div class="mt-2 font-medium text-2xl">
               Written by {{author.name}}
             </div>
-            <div class="text-gray-600">
+            <div class="text-gray-600 dark:text-gray-300">
               {{author.bio}}
             </div>
           </div>
@@ -62,7 +62,7 @@
           </div>
         </div>
         <div class="mt-4 border-t">
-          <div class="py-8 text-lg text-gray-700 font-medium">
+          <div class="py-8 text-lg text-gray-700 dark:text-gray-200 font-medium">
             More from {{author.name}}
           </div>
           <div class="grid grid-cols-2 gap-8">
@@ -82,7 +82,7 @@
                       <p class="text-xl font-semibold text-gray-900 dark:text-gray-50 whitespace-nowrap overflow-hidden text-ellipsis" :title="authorPost.title">
                         {{authorPost.title}}
                       </p>
-                      <p class="mt-3 text-base text-gray-500">{{authorPost.summary}}</p>
+                      <p class="mt-3 text-base text-gray-500 dark:text-gray-400">{{authorPost.summary}}</p>
                     </RouterLink>
                   </div>
                   <div class="mt-6 flex items-center">
@@ -91,11 +91,11 @@
                       <img class="h-10 w-10 rounded-full" :src="authorProfileUrl" :alt="`${authorPost.title} background`">
                     </div>
                     <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900">
+                      <p class="text-sm font-medium text-gray-900 dark:text-gray-50">
                         <RouterLink v-if="authorLink(authorPost.author)" :to="authorLink(authorPost.author)!" class="hover:underline">{{authorPost.author}}</RouterLink>
                         <span v-else>{{authorPost.author}}</span>
                       </p>
-                      <div class="flex space-x-1 text-sm text-gray-500">
+                      <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                         <time :datetime="dateTimestamp(authorPost.date)">{{dateLabel(authorPost.date)}}</time>
                         <span class="px-1" aria-hidden="true">&middot;</span>
                         <span>{{authorPost.minutesToRead}} min read</span>

diff --git a/MyApp.Client/src/pages/posts/index.vue b/MyApp.Client/src/pages/posts/index.vue
@@ -8,13 +8,13 @@
     </div>
     <div class="relative my-4 mx-auto max-w-7xl">
       <div class="flex flex-wrap justify-center">
-        <a v-for="tag in allTags" :href="tagLink(tag)" class="mr-2 mb-2 text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5">{{tag}}</a>
+        <RouterLink v-for="tag in allTags" :to="tagLink(tag)" class="mr-2 mb-2 text-xs leading-5 font-semibold bg-slate-400/10 dark:bg-slate-400/30 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:hover:bg-slate-400/40 dark:highlight-white/5">{{tag}}</RouterLink>
       </div>
     </div>
     <div class="relative mb-8 mx-auto max-w-7xl">
       <div class="flex flex-wrap justify-center">
         <b class="text-sm font-semibold">{{ thisYear }}</b>
-        <a v-for="year in allYears.filter(x => x != thisYear)" class="ml-3 text-sm text-indigo-700 font-semibold hover:underline" :href="yearLink(year)">{{year}}</a>
+        <RouterLink v-for="year in allYears.filter(x => x != thisYear)" class="ml-3 text-sm text-indigo-700 dark:text-indigo-300 font-semibold hover:underline" :to="yearLink(year)">{{year}}</RouterLink>
       </div>
     </div>
     <div class="relative mx-auto max-w-7xl">

diff --git a/MyApp.Client/src/pages/posts/tagged/[tag].vue b/MyApp.Client/src/pages/posts/tagged/[tag].vue
@@ -10,7 +10,7 @@
       <div class="flex flex-wrap justify-center">
         <template v-for="tag in allTags">
           <span v-if="tag == selectedTag" class="mr-2 mb-2 text-xs leading-5 font-semibold bg-indigo-600 text-white rounded-full py-1 px-3 flex items-center space-x-2">{{tag}}</span>
-          <RouterLink v-else :to="tagLink(tag)" class="mr-2 mb-2 text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5">{{tag}}</RouterLink>
+          <RouterLink v-else :to="tagLink(tag)" class="mr-2 mb-2 text-xs leading-5 font-semibold bg-slate-400/10 dark:bg-slate-400/30 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:hover:bg-slate-400/40 dark:highlight-white/5">{{tag}}</RouterLink>
         </template>
       </div>
     </div>

diff --git a/MyApp.Client/src/pages/posts/year/[year].vue b/MyApp.Client/src/pages/posts/year/[year].vue
@@ -10,7 +10,7 @@
       <div class="flex flex-wrap justify-center">
         <template v-for="year in allYears">
           <b v-if="forYear == year" class="ml-3 text-sm font-semibold">{{year}}</b>
-          <RouterLink v-else class="ml-3 text-sm text-indigo-700 font-semibold hover:underline" :to="yearLink(year)">{{year}}</RouterLink>
+          <RouterLink v-else class="ml-3 text-sm text-indigo-700 dark:text-indigo-300 font-semibold hover:underline" :to="yearLink(year)">{{year}}</RouterLink>
         </template>
       </div>
     </div>

diff --git a/MyApp.Client/src/pages/whatsnew.vue b/MyApp.Client/src/pages/whatsnew.vue
@@ -1,15 +1,15 @@
 <template>
     <div class="container mx-auto px-5">
         <section class="flex-col md:flex-row flex justify-center mt-16 mb-16 md:mb-12">
-            <h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
+            <h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 dark:text-slate-50 sm:text-7xl">
                 Latest features & highlights
             </h1>
         </section>
     </div>
     <div class="relative px-6 pt-16 pb-20 lg:px-8 lg:pt-24 lg:pb-28">
         <div v-for="(features, release) in releases" class="relative mx-auto max-w-7xl">
             <h2 class="text-center mb-4 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">{{ releaseVersion(release as string) }}</h2>
-            <div class="text-center text-lg font-normal text-gray-500 mb-8">{{ formatDate(releaseDate(release as string)) }}</div>
+            <div class="text-center text-lg font-normal text-gray-500 dark:text-gray-400 mb-8">{{ formatDate(releaseDate(release as string)) }}</div>
             <div v-for="feature in features" class="flex flex-wrap my-24">
                 <div class="w-full sm:w-1/2 animated px-4">
                     <RouterLink :to="feature.url"><img :src="feature.image" alt="" loading="lazy"></RouterLink>
@@ -18,7 +18,7 @@
                     <h3 class="m-0 mb-4">
                         <RouterLink class="text-2xl font-normal text-blue-500 hover:text-blue-600" :to="feature.url">{{ feature.title }}</RouterLink>
                     </h3>
-                    <div class="prose max-w-none">
+                    <div class="prose dark:prose-invert max-w-none">
                         <MarkdownComponent type="whatsNew" :doc="feature" :group="(release as string)" />
                     </div>
                     <div class="text-center sm:text-left my-10">