feat: custom theme switcher button styles

Author: Varnika060306

app/tag-data.json

@@ -1,20 +1,20 @@
 {
+  "markdown": 1,
+  "code": 1,
+  "features": 1,
   "next-js": 6,
-  "tailwind": 3,
-  "guide": 5,
-  "feature": 2,
-  "multi-author": 1,
-  "hello": 1,
   "math": 1,
   "ols": 1,
   "github": 1,
-  "writings": 1,
-  "book": 1,
-  "reflection": 1,
+  "guide": 5,
+  "tailwind": 3,
+  "hello": 1,
   "holiday": 1,
   "canada": 1,
   "images": 1,
-  "markdown": 1,
-  "code": 1,
-  "features": 1
+  "feature": 2,
+  "writings": 1,
+  "book": 1,
+  "reflection": 1,
+  "multi-author": 1
 }

components/ThemeSwitch.tsx

@@ -78,14 +78,14 @@ const ThemeSwitch = () => {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <MenuItems className="ring-opacity-5 absolute right-0 z-50 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white ring-1 shadow-lg ring-black focus:outline-hidden dark:bg-gray-800">
+          <MenuItems className="ring-opacity-5 absolute right-0 z-50 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black focus:outline-hidden dark:bg-gray-800">
             <RadioGroup value={theme} onChange={setTheme}>
               <div className="p-1">
                 <Radio value="light">
                   <MenuItem>
                     {({ focus }) => (
                       <button
-                        className={`${focus ? 'bg-primary-600 text-white' : ''} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                        className={`${focus ? 'bg-yellow-300 text-black' : ''} group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                       >
                         <div className="mr-2">
                           <Sun />
@@ -100,7 +100,7 @@ const ThemeSwitch = () => {
                     {({ focus }) => (
                       <button
                         className={`${
-                          focus ? 'bg-primary-600 text-white' : ''
+                          focus ? 'bg-gray-800 text-white' : ''
                         } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                       >
                         <div className="mr-2">
@@ -116,7 +116,9 @@ const ThemeSwitch = () => {
                     {({ focus }) => (
                       <button
                         className={`${
-                          focus ? 'bg-primary-600 text-white' : ''
+                          focus
+                            ? 'bg-gradient-to-r from-gray-300 via-white to-gray-300 text-black'
+                            : ''
                         } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                       >
                         <div className="mr-2">