feat(ui): dark theme toggle

Author: Mikadows

src/App.tsx

@@ -15,7 +15,7 @@ function App() {
   const queryClient = new QueryClient();
 
   return (
-    <div className="wrapper">
+    <div className="wrapper transition duration-500 dark:bg-gray-600 h-screen">
       <QueryClientProvider client={queryClient}>
         <BrowserRouter>
           <Switch>

src/components/Benchmarks/BenchmarkDetail.tsx

@@ -14,6 +14,7 @@ import Page from '../Page/Page';
 import Leaderboard from '../leaderboard/Leaderboard';
 import { languagesList } from '../../assets/languages';
 import { XIcon } from '@heroicons/react/outline';
+import useDarkMode from '../../hooks/darkmode';
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(' ');
@@ -30,10 +31,13 @@ const BenchmarkDetail = ({
 }: RouteComponentProps<BenchmarkDetailParams>) => {
   const [selected, setSelected] = useState(languages[0]);
   const [open, setOpen] = useState(false);
+  const [colorTheme] = useDarkMode();
 
   //Get monaco instance to access code later
   const editorRef: any = useRef<null>(null);
 
+  let editorTheme = colorTheme === 'dark' ? 'light' : 'vs-dark';
+
   function handleEditorDidMount(editor: any, monaco: any) {
     editorRef.current = editor;
   }
@@ -185,16 +189,16 @@ const BenchmarkDetail = ({
         <div className="grid w-2/5">
           <div className="pl-8 pr-8 border-4 border-dashed border-gray-200 rounded-lg h-96 p-4">
             <div className="flex justify-between">
-              <h1 className="text-2xl pb-3">Subject</h1>
+              <h1 className="text-2xl pb-3 dark:text-white">Subject</h1>
               <div className="">
                 <Listbox value={selected} onChange={setSelected}>
                   {({ open }) => (
                     <>
-                      <Listbox.Label className="block text-sm font-medium text-gray-700">
+                      <Listbox.Label className="block dark:text-white text-sm font-medium text-gray-700">
                         Languages
                       </Listbox.Label>
                       <div className="mt-1 relative">
-                        <Listbox.Button className="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                        <Listbox.Button className="dark:text-white dark:bg-gray-800 relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                           <span className="flex items-center">
                             <img
                               src={selected.avatar}
@@ -222,7 +226,7 @@ const BenchmarkDetail = ({
                         >
                           <Listbox.Options
                             static
-                            className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                            className="dark:text-white dark:bg-gray-800 absolute z-10 mt-1 w-full bg-white shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
                           >
                             {languages.map((language) => (
                               <Listbox.Option
@@ -231,7 +235,7 @@ const BenchmarkDetail = ({
                                   classNames(
                                     active
                                       ? 'text-white bg-indigo-600'
-                                      : 'text-gray-900',
+                                      : 'text-gray-900 dark:text-white',
                                     'cursor-default select-none relative py-2 pl-3 pr-9',
                                   )
                                 }
@@ -262,7 +266,7 @@ const BenchmarkDetail = ({
                                         className={classNames(
                                           active
                                             ? 'text-white'
-                                            : 'text-indigo-600',
+                                            : 'text-indigo-600 dark:text-white',
                                           'absolute inset-y-0 right-0 flex items-center pr-4',
                                         )}
                                       >
@@ -284,7 +288,9 @@ const BenchmarkDetail = ({
                 </Listbox>
               </div>
             </div>
-            <ReactMarkdown>{benchmarkData?.subject || ''}</ReactMarkdown>
+            <ReactMarkdown className="dark:text-white">
+              {benchmarkData?.subject || ''}
+            </ReactMarkdown>
             <div className="flex">
               <button
                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold mt-2 py-2 px-4 rounded-full"
@@ -300,6 +306,7 @@ const BenchmarkDetail = ({
             <Editor
               onMount={handleEditorDidMount}
               height="100%"
+              theme={editorTheme}
               value={lastSubmission && lastSubmission}
               language={selected.name}
             />

src/components/Benchmarks/Benchmarks.tsx

@@ -36,29 +36,29 @@ const Benchmarks: React.FC = () => {
             <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
               <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                 <table className="min-w-full divide-y divide-gray-200">
-                  <thead className="bg-gray-50">
+                  <thead className="bg-gray-50 dark:bg-gray-800">
                     <tr>
                       <th
                         scope="col"
-                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                        className="dark:text-white px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                       >
                         Title
                       </th>
                       <th
                         scope="col"
-                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                        className="dark:text-white px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                       >
                         Subject
                       </th>
                       <th
                         scope="col"
-                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                        className="dark:text-white px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                       >
                         Difficulty
                       </th>
                       <th
                         scope="col"
-                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                        className="dark:text-white px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                       >
                         Creator
                       </th>
@@ -67,7 +67,7 @@ const Benchmarks: React.FC = () => {
                       </th>
                     </tr>
                   </thead>
-                  <tbody className="bg-white divide-y divide-gray-200">
+                  <tbody className="bg-white dark:bg-gray-300 divide-y divide-gray-200">
                     {benchmarks.map((benchmark: benchmarkModel) => (
                       <BenchmarkRow
                         key={benchmark.id?.toString()}

src/components/Benchmarks/Result.tsx

@@ -22,11 +22,11 @@ const Result: React.FC<LayoutProps> = ({
   lintScore,
 }) => {
   return (
-    <div className="flex">
+    <div className="flex dark:text-white">
       <div className="w-1/3">
         <ScoresComponent qualityScore={qualityScore} lintScore={lintScore} />
       </div>
-      <div className="w-2/3">
+      <div className="w-2/3 ml-2">
         <b>Status: </b>
         {status}
         <div className="flex justify-between">

src/components/Page/Header.tsx

@@ -11,7 +11,7 @@ const Header: React.FC<HeaderProps> = ({ title, button, navTo }) => {
   const isButtonNeeded = button !== undefined && navTo !== undefined;
 
   return (
-    <header className="bg-white shadow">
+    <header className="bg-white dark:bg-gray-800 shadow">
       {button === 'back' ? (
         <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex ">
           {isButtonNeeded ? (
@@ -37,11 +37,15 @@ const Header: React.FC<HeaderProps> = ({ title, button, navTo }) => {
           ) : (
             <></>
           )}
-          <h1 className="text-3xl font-bold text-gray-900 ml-2">{title}</h1>
+          <h1 className="text-3xl dark:text-white font-bold text-gray-900 ml-2">
+            {title}
+          </h1>
         </div>
       ) : (
         <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between">
-          <h1 className="text-3xl font-bold text-gray-900">{title}</h1>
+          <h1 className="text-3xl dark:text-white font-bold text-gray-900">
+            {title}
+          </h1>
           {isButtonNeeded ? (
             <Link
               className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"