feat(darkMode): add dark mode to Gallery

src/pages/Gallery/ChapterGroup.tsx

@@ -9,16 +9,16 @@ const ChapterGroup: React.FC<ChapterGroupProps> = ({ count }) => {
     <main className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {range(count).map((index) => (
         <button
-          className="relative p-4 w-36 bg-gray-50 border border-gray-300 shadow-lg rounded-md text-left overflow-hidden focus:outline-none"
+          className="relative p-4 w-36 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-10 border border-gray-300 dark:border-gray-500 shadow-lg rounded-md text-left overflow-hidden focus:outline-none"
           onClick={() => setSelectedChapter(index)}
           key={index}
         >
-          {/* todo: 部分字典的最后一个章节并非20词  */}
-          <p className="text-lg text-gray-800  w-full ">Chapter {index + 1}</p>
-          <p className="text-sm font-bold text-gray-600">20 词</p>
+          {/* TODO: 部分字典的最后一个章节并非20词  */}
+          <p className="text-lg text-gray-800 dark:text-white dark:text-opacity-80 w-full">Chapter {index + 1}</p>
+          <p className="text-sm font-bold text-gray-600 dark:text-white dark:text-opacity-60">20 词</p>
           {selectedChapter === index ? (
             <FontAwesomeIcon
-              className="absolute -right-4 -bottom-4 text-6xl text-green-500 opacity-60"
+              className="absolute -right-4 -bottom-4 text-6xl text-green-500 dark:text-green-300 opacity-60"
               icon={['fas', 'check-circle']}
               fixedWidth
             />

src/pages/Gallery/DictionaryCard.tsx

@@ -8,15 +8,15 @@ const DictionaryCard: React.FC<DictionaryCardProps> = ({ dictionary }) => {
   const setDictionary = useSetDictionary()
   return (
     <button
-      className="relative p-4 w-48 bg-gray-50 border border-gray-300 shadow-lg rounded-md text-left overflow-hidden focus:outline-none "
+      className="relative p-4 w-48 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-10 border border-gray-300 dark:border-gray-500 shadow-lg rounded-md text-left overflow-hidden focus:outline-none "
       onClick={setDictionary.bind(null, dictionary.id)}
     >
-      <p className="mb-1 text-xl text-gray-800">{dictionary.name}</p>
-      <p className="mb-1 text-xs text-gray-900">{dictionary.description}</p>
-      <p className="text-sm font-bold text-gray-600">{dictionary.length} 词</p>
+      <p className="mb-1 text-xl text-gray-800 dark:text-white dark:text-opacity-80">{dictionary.name}</p>
+      <p className="mb-1 text-xs text-gray-900 dark:text-white dark:text-opacity-90">{dictionary.description}</p>
+      <p className="text-sm font-bold text-gray-600 dark:text-white dark:text-opacity-60">{dictionary.length} 词</p>
       {selectedDictionary.id === dictionary.id ? (
         <FontAwesomeIcon
-          className="absolute -right-4 -bottom-4 text-6xl text-green-500 opacity-60"
+          className="absolute -right-4 -bottom-4 text-6xl text-green-500 dark:text-green-300 opacity-60"
           icon={['fas', 'check-circle']}
           fixedWidth
         />

src/pages/Gallery/DictionaryGroup.tsx

@@ -5,7 +5,7 @@ import DictionaryCard from './DictionaryCard'
 const DictionaryGroup: React.FC<DictionaryGroupProps> = ({ title, dictionaries }) => {
   return (
     <section>
-      <h3 className="mb-2 text-sm font-bold text-gray-600">{title}</h3>
+      <h3 className="mb-2 text-sm font-bold text-gray-600 dark:text-white dark:text-opacity-60">{title}</h3>
       <main className="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
         {dictionaries.map((dict) => (
           <DictionaryCard key={dict.id} dictionary={dict} />

src/pages/Gallery/index.tsx

@@ -20,19 +20,23 @@ const GalleryPage: React.FC = () => {
   return (
     <Layout>
       <Header>
-        <NavLink className="bg-indigo-400 text-white text-lg px-6 py-1 rounded-lg focus:outline-none" to="/">
+        <NavLink className="bg-indigo-400 text-white dark:text-opacity-80 text-lg px-6 py-1 rounded-lg focus:outline-none" to="/">
           返回练习
         </NavLink>
       </Header>
       <div className="mt-auto mb-auto flex w-auto space-x-4 overflow-y-auto">
-        <div className="bg-indigo-50 rounded-lg p-6 space-y-2 overflow-y-auto">
-          <h2 className="sticky top-0 mb-4 font-bold text-lg text-gray-700 text-shadow z-10">词典选择</h2>
+        <div className="bg-indigo-50 dark:bg-blue-gray-800 rounded-lg p-6 space-y-2 overflow-y-auto">
+          <h2 className="sticky top-0 mb-4 font-bold text-lg text-gray-700 dark:text-white dark:text-opacity-70 text-shadow z-10">
+            词典选择
+          </h2>
           {groups.map(([name, items]) => (
             <DictionaryGroup key={name} title={name} dictionaries={items} />
           ))}
         </div>
-        <div className="p-6 overflow-y-auto bg-indigo-50 rounded-lg">
-          <h2 className="sticky top-0 mb-4 font-bold text-lg text-gray-700 text-shadow z-10">章节选择</h2>
+        <div className="p-6 overflow-y-auto bg-indigo-50 dark:bg-blue-gray-800 rounded-lg">
+          <h2 className="sticky top-0 mb-4 font-bold text-lg text-gray-700 dark:text-white dark:text-opacity-70 text-shadow z-10">
+            章节选择
+          </h2>
           {/* TODO: remove magic number here. */}
           <ChapterGroup count={Math.ceil(selectedDictionary.length / 20)} />
         </div>

src/pages/Typing/index.tsx

@@ -164,13 +164,13 @@ const App: React.FC = () => {
           <Header>
             <div className="group relative">
               <NavLink
-                className="text-lg px-4 py-1 rounded-lg transition-colors duration-150 ease-in-out focus:outline-none hover:bg-indigo-400 hover:text-white"
+                className="text-lg px-4 py-1 rounded-lg transition-colors duration-300 ease-in-out focus:outline-none dark:text-white dark:text-opacity-60 hover:bg-indigo-400 hover:text-opacity-100"
                 to="/gallery"
               >
                 {wordList.dictName} 第 {wordList.chapter + 1} 章
               </NavLink>
               <div className="invisible group-hover:visible absolute top-full left-1/2 w-40 -ml-20 pt-0 flex items-center justify-center">
-                <span className="py-1 px-3 text-gray-500 text-xs">词典章节切换</span>
+                <span className="py-1 px-3 text-gray-500 dark:text-gray-400 text-xs">词典章节切换</span>
               </div>
             </div>
             <PronunciationSwitcher state={pronunciation.toString()} changePronunciationState={changePronunciation} />

tailwind.config.js

@@ -1,7 +1,14 @@
+const colors = require('tailwindcss/colors')
+
 module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   darkMode: 'class',
   theme: {
+    extend: {
+      colors: {
+        'blue-gray': colors.blueGray,
+      },
+    },
     borderRadius: {
       large: '0.75rem',
       lg: '0.5rem',