update dark mode theme for editorjs tools

Author: Roshan Jossy

.eslintrc.json

@@ -18,7 +18,8 @@
     "sourceType": "module"
   },
   "rules": {
-    "@next/next/no-html-link-for-pages": "off"
+    "@next/next/no-html-link-for-pages": "off",
+    "@next/next/no-img-element": "off"
   },
   "plugins": ["@typescript-eslint"]
 }

src/components/Card.tsx

@@ -9,7 +9,9 @@ export default function Card({
 }) {
   return (
     <div
-      className={`py-4 px-8 bg-white dark:bg-dark-700 rounded-lg ${classes}`}
+      className={`py-4 px-8 bg-white dark:bg-dark-700 rounded-lg ${
+        classes || ''
+      }`}
     >
       {children}
     </div>

src/components/UserDetails/Badges/Badge.tsx

@@ -1,8 +1,9 @@
 import { graphql, useFragment } from 'react-relay'
-import BadgeIcon from './BadgeIcon'
+import { Badge_node$key } from '../../../queries/__generated__/Badge_node.graphql'
+import BadgeIcon, { LanguageName } from './BadgeIcon'
 import Hexagon from './Hexagon'
 
-const Badge = ({ badge }: any) => {
+const Badge = ({ badge }: { badge: Badge_node$key }) => {
   const data = useFragment(
     graphql`
       fragment Badge_node on Badge {
@@ -17,7 +18,7 @@ const Badge = ({ badge }: any) => {
   return (
     <div className="flex items-center ">
       <Hexagon size={60} color="red">
-        <BadgeIcon displayName={data.displayName} />
+        <BadgeIcon displayName={data.displayName as LanguageName} />
       </Hexagon>
       <div className=" ml-8 dark:text-gray-300">
         <span className="font-bold block">Level: {data.currentLevel}</span>

src/components/UserDetails/Badges/BadgeIcon.tsx

@@ -25,8 +25,10 @@ const iconMap = {
   PHP: <SiPhp />,
 }
 
+export type LanguageName = keyof typeof iconMap
+
 type BadgeIconProps = {
-  displayName: keyof typeof iconMap
+  displayName: LanguageName
 }
 
 export default function BadgeIcon({ displayName }: BadgeIconProps) {

src/components/story/StoryEditor.tsx

@@ -98,7 +98,7 @@ export default function Editor({ title, body }: EditorProps) {
     })
   }
   return (
-    <Card classes="prose max-w-none">
+    <Card classes="prose max-w-none dark:prose-invert">
       <div>
         <div id={EDITTOR_HOLDER_ID}> </div>
       </div>

src/styles/globals.css

@@ -3,3 +3,24 @@
 @tailwind utilities;
 
 
+.dark .ce-inline-tool,
+.dark .ce-toolbar__plus,
+.dark .ce-toolbar__settings-btn {
+    @apply text-gray-400
+}
+
+.dark .ce-inline-toolbar,
+.dark .ce-conversion-toolbar,
+.dark .ce-toolbox,
+.dark .ce-popover,
+.dark .ce-settings  {
+    @apply bg-dark-600 border-dark-500
+}
+
+.dark .ce-popover__item-icon {
+    @apply bg-dark-500
+}
+
+.dark .ce-block--selected {
+    @apply bg-dark-500 text-gray-800
+}

tailwind.config.js

@@ -12,8 +12,8 @@ module.exports = {
           200: '#eaddd7',
           300: '#e0cec7',
           400: '#d2bab0',
-          500: '#bfa094',
-          600: '#40444b',
+          500: '#40444b',
+          600: '#42464d',
           700: '#36393f',
           800: '#2f3136',
           900: '#202225',