Merge pull request #118 from arifszn/117-package-title-is-hidden-if-system-has-dark-mode-enabled-in-next

Better dark mode support

src/components/avatar-card/index.jsx

@@ -38,7 +38,9 @@ const AvatarCard = ({ profile, loading }) => {
             {loading || !profile ? (
               skeleton({ width: 'w-48', height: 'h-8' })
             ) : (
-              <span className="opacity-70">{profile.name}</span>
+              <span className="text-base-content opacity-70">
+                {profile.name}
+              </span>
             )}
           </h5>
           <div className="mt-3 text-base-content text-opacity-60 font-mono">

src/components/blog/index.jsx

@@ -139,7 +139,7 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
                     <h2 className="font-semibold text-base-content opacity-60">
                       {article.title}
                     </h2>
-                    <p className="opacity-50 text-xs">
+                    <p className="text-base-content opacity-50 text-xs">
                       {formatDistance(article.publishedAt, new Date(), {
                         addSuffix: true,
                       })}
@@ -150,7 +150,7 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
                     <div className="mt-4 flex items-center flex-wrap justify-center md:justify-start">
                       {article.categories.map((category, index2) => (
                         <div
-                          className="py-2 px-4 text-xs leading-3 rounded-full bg-base-300 mr-1 mb-1 opacity-50"
+                          className="py-2 px-4 text-xs leading-3 rounded-full bg-base-300 mr-1 mb-1 opacity-50 text-base-content"
                           key={index2}
                         >
                           #{category}
@@ -167,7 +167,9 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
     ) : (
       <div className="text-center mb-6">
         <AiOutlineContainer className="mx-auto h-12 w-12 opacity-30" />
-        <p className="mt-1 text-sm opacity-50">No recent post</p>
+        <p className="mt-1 text-sm opacity-50 text-base-content">
+          No recent post
+        </p>
       </div>
     );
   };
@@ -191,7 +193,9 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
                       {loading ? (
                         skeleton({ width: 'w-28', height: 'h-8' })
                       ) : (
-                        <span className="opacity-70">Recent Posts</span>
+                        <span className="text-base-content opacity-70">
+                          Recent Posts
+                        </span>
                       )}
                     </h5>
                   </div>

src/components/education/index.jsx

@@ -48,7 +48,9 @@ const Education = ({ loading, education }) => {
                 {loading ? (
                   skeleton({ width: 'w-32', height: 'h-8' })
                 ) : (
-                  <span className="opacity-70">Education</span>
+                  <span className="text-base-content opacity-70">
+                    Education
+                  </span>
                 )}
               </h5>
             </div>

src/components/experience/index.jsx

@@ -48,7 +48,9 @@ const Experience = ({ experiences, loading }) => {
                 {loading ? (
                   skeleton({ width: 'w-32', height: 'h-8' })
                 ) : (
-                  <span className="opacity-70">Experience</span>
+                  <span className="text-base-content opacity-70">
+                    Experience
+                  </span>
                 )}
               </h5>
             </div>

src/components/project/index.jsx

@@ -82,7 +82,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
-                className="inline-block w-5 h-5 mr-2 stroke-current"
+                className="text-base-content inline-block w-5 h-5 mr-2 stroke-current"
               >
                 <path
                   strokeLinecap="round"
@@ -92,7 +92,9 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                 ></path>
               </svg>
               <span>
-                <h5 className="card-title text-lg">{item.name}</h5>
+                <h5 className="card-title text-lg text-base-content">
+                  {item.name}
+                </h5>
               </span>
             </div>
             <p className="mb-5 mt-1 text-base-content text-opacity-60 text-sm">
@@ -137,7 +139,9 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                     {loading ? (
                       skeleton({ width: 'w-28', height: 'h-8' })
                     ) : (
-                      <span className="opacity-70">My Projects</span>
+                      <span className="text-base-content opacity-70">
+                        My Projects
+                      </span>
                     )}
                   </h5>
                   {loading ? (
@@ -147,7 +151,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                       href={`https://github.com/${github.username}?tab=repositories`}
                       target="_blank"
                       rel="noreferrer"
-                      className="opacity-50"
+                      className="text-base-content opacity-50"
                     >
                       See All
                     </a>

src/components/skill/index.jsx

@@ -25,7 +25,9 @@ const Skill = ({ loading, skills }) => {
                 {loading ? (
                   skeleton({ width: 'w-32', height: 'h-8' })
                 ) : (
-                  <span className="opacity-70">Tech Stack</span>
+                  <span className="text-base-content opacity-70">
+                    Tech Stack
+                  </span>
                 )}
               </h5>
             </div>

src/components/theme-changer/index.jsx

@@ -21,7 +21,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
             {loading ? (
               skeleton({ width: 'w-20', height: 'h-8', className: 'mb-1' })
             ) : (
-              <span className="opacity-70">Theme</span>
+              <span className="text-base-content opacity-70">Theme</span>
             )}
           </h5>
           <span className="text-base-content text-opacity-40 capitalize text-sm">
@@ -43,7 +43,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
             <div title="Change Theme" className="dropdown dropdown-end">
               <div
                 tabIndex={0}
-                className="btn btn-ghost m-1 normal-case opacity-50"
+                className="btn btn-ghost m-1 normal-case opacity-50 text-base-content"
               >
                 <AiOutlineControl className="inline-block w-5 h-5 stroke-current md:mr-2" />
                 <span className="hidden md:inline">Change Theme</span>