✨ ライトモード対応

ci7lus · Mar 23, 2020 · 5e69ca7 · 5e69ca7 · vercel · Mar 23, 2020
1 parent 3c9b93c
commit 5e69ca7
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 27 deletions.
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
@@ -2,6 +2,16 @@ body {
   background-color: black;
 }
 
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: #edf2f7;
+  }
+
+  .logo {
+    filter: brightness(0.2);
+  }
+}
+
 img[lazy] {
   transition: all 0.3s ease-out;
 }

diff --git a/src/components/commons/PostCard.tsx b/src/components/commons/PostCard.tsx
@@ -39,13 +39,13 @@ export const PostCard = tsx.component({
           <div class="md:max-w-full md:flex items-stretch py-4 block">
             {this.post.image ? (
               <div
-                class="h-48 md:h-auto md:w-1/4 flex-none bg-cover text-center bg-gray-700 rounded-t lg:rounded-t-none lg:rounded-l bg-cover bg-center"
+                class="h-48 md:h-auto md:w-1/4 flex-none bg-cover text-center bg-gray-700 rounded-t lg:rounded-t-none lg:rounded-l bg-cover bg-center light:bg-gray-400"
                 style={{ backgroundImage: `url("${this.post.image}")` }}
               />
             ) : (
-              <div class="h-48 md:h-auto md:w-1/4 flex-none bg-cover text-center bg-gray-700 rounded-t lg:rounded-t-none lg:rounded-l bg-cover bg-center" />
+              <div class="h-48 md:h-auto md:w-1/4 flex-none bg-cover text-center bg-gray-700 rounded-t lg:rounded-t-none lg:rounded-l bg-cover bg-center light:bg-gray-400" />
             )}
-            <div class="bg-gray-800 p-4 flex flex-col justify-between leading-normal rounded-b lg:rounded-b-none lg:rounded-r md:w-3/4">
+            <div class="bg-gray-800 p-4 flex flex-col justify-between leading-normal rounded-b lg:rounded-b-none lg:rounded-r md:w-3/4 light:bg-gray-100">
               <div class="mb-4">
                 <div class="pb-2">
                   {this.post.tags.map(tag => (

diff --git a/src/components/commons/PostTag.tsx b/src/components/commons/PostTag.tsx
@@ -18,7 +18,7 @@ export const PostTag = tsx.component({
           event.stopPropagation()
           this.$emit("click", this.tag)
         }}
-        class="inline-block bg-gray-700 p-3 py-1 text-xs font-semibold mr-2 rounded"
+        class="inline-block bg-gray-700 p-3 py-1 text-xs font-semibold mr-2 rounded light:bg-gray-300"
       >
         #{this.tag}
       </button>

diff --git a/src/components/partials/global/TheError.tsx b/src/components/partials/global/TheError.tsx
@@ -13,7 +13,7 @@ export const TheError = tsx.component({
   },
   render(): VNode {
     return (
-      <div class="flex-1 bg-black m-auto">
+      <div class="flex-1 bg-black m-auto light:bg-gray-200">
         <div class="container max-w-screen-md m-auto p-4">
           <div class="text-6xl">{this.statusCode}</div>
           <p>{this.error.message}</p>

diff --git a/src/components/partials/global/TheFooter.tsx b/src/components/partials/global/TheFooter.tsx
@@ -7,9 +7,9 @@ export const TheFooter = tsx.component({
   name: "TheFooter",
   render(): VNode {
     return (
-      <div class="bg-gray-900">
+      <div class="bg-gray-900 light:bg-gray-100">
         <div class="container mx-auto max-w-screen-md">
-          <div class="flex justify-end text-xs p-4 text-gray-200">
+          <div class="flex justify-end text-xs p-4 text-gray-200 light:text-gray-800">
             {SITE_NAME} - Made with
             <a
               href="https://github.com/ci7lus/caramelize"
@@ -24,7 +24,7 @@ export const TheFooter = tsx.component({
               <FeatherHeartIcon size={12} />
             </span>
             {GA && (
-              <span class="text-gray-400">
+              <span class="text-gray-400 light:text-gray-800">
                 &nbsp;/&nbsp;
                 <nuxt-link to="/privacy-policy">Privacy</nuxt-link>
               </span>

diff --git a/src/components/partials/global/TheHeader.tsx b/src/components/partials/global/TheHeader.tsx
@@ -10,7 +10,7 @@ export const TheHeader = tsx.component({
   name: "TheHeader",
   render(): VNode {
     return (
-      <div class="bg-gray-900">
+      <div class="bg-gray-900 light:bg-gray-100">
         <div class="flex items-center container mx-auto flex justify-between max-w-screen-md">
           <div class="flex items-center justify-start">
             <nuxt-link to="/" tag="a">
@@ -22,10 +22,11 @@ export const TheHeader = tsx.component({
                     loading="auto"
                     width="100"
                     height="30"
+                    class="logo"
                   />
                 ) : (
                   <h1
-                    class="font-bold text-lg"
+                    class="font-bold text-lg light:text-gray-900"
                     style={{ fontFamily: "Avenir Next" }}
                   >
                     {SITE_NAME}
@@ -43,7 +44,7 @@ export const TheHeader = tsx.component({
                   rel="noopener"
                 >
                   <button class="ml-2" aria-label="著者の Twitter">
-                    <div class="flex items-center justify-center rounded-md p-2 bg-gray-800">
+                    <div class="flex items-center justify-center rounded-md p-2 bg-gray-800 light:bg-blue-300 light:text-gray-100">
                       <FeatherTwitterIcon size={14} />
                     </div>
                   </button>
@@ -56,7 +57,7 @@ export const TheHeader = tsx.component({
                   rel="noopener"
                 >
                   <button class="ml-2" aria-label="著者の GitHub">
-                    <div class="flex items-center justify-center rounded-md p-2 bg-gray-800">
+                    <div class="flex items-center justify-center rounded-md p-2 bg-gray-800 light:bg-gray-800 light:text-gray-100">
                       <FeatherGithubIcon size={14} />
                     </div>
                   </button>

diff --git a/src/components/partials/index/ThePostList.tsx b/src/components/partials/index/ThePostList.tsx
@@ -29,16 +29,16 @@ export const ThePostList = tsx.component({
             <nuxt-link
               to={`/?p=${this.page === 0 ? this.page : this.page - 1}`}
               tag="button"
-              class={`bg-gray-600 hover:bg-gray-500 text-gray-200 font-bold py-2 px-4 rounded-l ${this
+              class={`bg-gray-600 hover:bg-gray-500 text-gray-200 font-bold py-2 px-4 rounded-l light:bg-gray-100 light:text-gray-800 ${this
                 .page === 0 &&
-                "cursor-not-allowed bg-gray-500 hover:bg-gray-500"}`}
+                "cursor-not-allowed bg-gray-500 hover:bg-gray-500 light:bg-gray-300 light:hover:bg-gray-300"}`}
             >
               Prev
             </nuxt-link>
             <nuxt-link
               to={`/?p=${this.posts.length < 10 ? this.page : this.page + 1}`}
               tag="button"
-              class="bg-gray-600 hover:bg-gray-500 text-gray-200 font-bold py-2 px-4 rounded-r"
+              class="bg-gray-600 hover:bg-gray-500 text-gray-200 font-bold py-2 px-4 rounded-r light:bg-gray-100 light:text-gray-800"
             >
               Next
             </nuxt-link>

diff --git a/src/components/partials/posts/ThePostDetail.tsx b/src/components/partials/posts/ThePostDetail.tsx
@@ -94,13 +94,13 @@ export const ThePostDetail = tsx.component({
               &nbsp;Tweet
             </button>
           </div>
-          <div class="hidden md:block py-6 px-1 bg-gray-800" />
+          <div class="hidden md:block py-6 px-1 bg-gray-800 light:bg-gray-400" />
           <div class="flex items-center justify-center p-4 m-2">
             <div class="pr-4">
               <FeatherPenToolIcon />
             </div>
             <img
-              class="w-10 h-10 mr-2 bg-gray-600 rounded"
+              class="w-10 h-10 mr-2 bg-gray-600 rounded light:bg-gray-400"
               src={this.post.user.photo}
               alt="著者の画像"
               loading="lazy"
@@ -117,7 +117,7 @@ export const ThePostDetail = tsx.component({
                   rel="noopener"
                 >
                   <button aria-label="著者の Twitter">
-                    <div class="p-2 flex items-center justify-center leading-none rounded-md bg-gray-800">
+                    <div class="p-2 flex items-center justify-center leading-none rounded-md bg-gray-800 light:bg-blue-300 light:text-gray-100">
                       <FeatherTwitterIcon size={14} />
                     </div>
                   </button>
@@ -132,7 +132,7 @@ export const ThePostDetail = tsx.component({
                   rel="noopener"
                 >
                   <button aria-label="著者の GitHub">
-                    <div class="p-2 flex items-center justify-center leading-none rounded-md bg-gray-800">
+                    <div class="p-2 flex items-center justify-center leading-none rounded-md bg-gray-800 light:bg-gray-800 light:text-gray-100">
                       <FeatherGithubIcon size={14} />
                     </div>
                   </button>
@@ -208,7 +208,7 @@ export const lineNodeTypeRender = (
         <button
           key={key}
           type="button"
-          class="inline-block bg-gray-600 p-2 py-1 text-xs font-semibold mr-2 rounded"
+          class="inline-block bg-gray-600 p-2 py-1 text-xs font-semibold mr-2 rounded light:bg-gray-300"
           aria-label={`${node.href} の投稿一覧`}
         >
           <nuxt-link to={`/tags/${node.href}`}>#{node.href}</nuxt-link>
@@ -273,7 +273,7 @@ export const lineNodeTypeRender = (
           )
         default:
           return (
-            <p class="text-gray-600 text-sm" key={key}>
+            <p class="text-gray-600 text-sm light:texr-gray-400" key={key}>
               not supported icon ({node!.pathType})
             </p>
           )
@@ -288,7 +288,10 @@ export const lineNodeTypeRender = (
       return <span key={key}>{node.text}</span>
     case "quote":
       return (
-        <p key={key} class="border-l-4 pl-2 border-gray-600 bg-gray-900">
+        <p
+          key={key}
+          class="border-l-4 pl-2 border-gray-600 bg-gray-900 light:bg-gray-200 light:border-gray-400"
+        >
           {node.nodes.map((childNode, k) =>
             lineNodeTypeRender(childNode, k, h)
           )}
@@ -304,7 +307,7 @@ export const lineNodeTypeRender = (
       )
     default:
       return (
-        <p class="text-gray-600 text-sm" key={key}>
+        <p class="text-gray-600 text-sm light:text-gray-400" key={key}>
           not supported ({node!.type})
         </p>
       )
@@ -342,7 +345,7 @@ export const contentRender = (content: PageType, h: CreateElement) => {
           .pop()!
         return (
           <div class="text-sm leading-relaxed py-2">
-            <code class="bg-gray-800">{line.fileName}</code>
+            <code class="bg-gray-800 light:bg-gray-200">{line.fileName}</code>
             <highlight-code lang={languages[ext] && ext}>
               <pre>{line.content}</pre>
             </highlight-code>

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="min-h-screen w-full flex flex-col text-gray-200">
+  <div
+    class="min-h-screen w-full flex flex-col text-gray-200 light:text-gray-800"
+  >
     <TheHeader />
-    <div class="flex-1 bg-black">
+    <div class="flex-1 bg-black light:bg-gray-200">
       <nuxt />
     </div>
     <TheFooter />

diff --git a/src/tailwind.config.js b/src/tailwind.config.js
@@ -5,7 +5,13 @@
  ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
  */
 module.exports = {
-  theme: {},
+  theme: {
+    extend: {
+      screens: {
+        light: { raw: "(prefers-color-scheme: light)" },
+      },
+    },
+  },
   variants: {},
   plugins: [],
 }