{meta.metaTitle || meta.title}

diff --git a/package.json b/package.json index 048a17d7..d93dfafa 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "intersection-observer": "^0.12.0", "minimatch": "^3.0.4", "next": "^12.0.7", + "next-themes": "^0.0.15", "postcss": "^8.4.4", "postcss-focus-visible": "^5.0.0", "postcss-import": "^14.0.2", diff --git a/remark/withSyntaxHighlighting.js b/remark/withSyntaxHighlighting.js index 0548621a..9394e3d7 100644 --- a/remark/withSyntaxHighlighting.js +++ b/remark/withSyntaxHighlighting.js @@ -17,7 +17,7 @@ module.exports.withSyntaxHighlighting = () => { if (node.lang !== null) { node.type = 'html' node.value = [ - `

`, + `

`, `

`,
diff --git a/src/components/Community.js b/src/components/Community.js
index 63ed8351..b3054373 100644
--- a/src/components/Community.js
+++ b/src/components/Community.js
@@ -1,7 +1,7 @@
 export function Community() {
   return (
     
-      
+      

         
           
           
-            GitHub Discussions
+            GitHub Discussions
             Connect with members of the Javaistic community.
           
         
       
-      
+      

         
           
           
-            Discord
+            Discord
             Join our Discord group to chat with other Javaistic users.
           
         
       
-      
+      

         
           
           
-            Twitter
+            Twitter
             Follow the Javaistic Twitter account for news and updates.
           
         
diff --git a/src/components/Header.js b/src/components/Header.js
index fa5f3f24..34b153df 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,12 +3,14 @@ import { Search } from '@/components/Search'
 import clsx from 'clsx'
 import Link from 'next/link'
 import Router from 'next/router'
+import ThemeChanger from './ThemeChanger'
+
 
 export function Header({ navIsOpen, onNavToggle }) {
   return (
     <>
-      
-        
+      
+        
           
             
               Javaistic home page
-              
+              
             
           
         
         
           
           
+            
             
               Javaistic on GitHub
               

       
           

diff --git a/src/components/home/common.js b/src/components/home/common.js
index 09546a88..37620370 100644
--- a/src/components/home/common.js
+++ b/src/components/home/common.js
@@ -48,7 +48,7 @@ export function Link({ className = '', href, ...props }) {
 }
 
 export function InlineCode({ className = '', ...props }) {
-  return 
+  return 
 }
 
 export { Widont } from '@/components/Widont'
diff --git a/src/css/docsearch.css b/src/css/docsearch.css
index 17ae936e..2064d8c6 100644
--- a/src/css/docsearch.css
+++ b/src/css/docsearch.css
@@ -58,7 +58,7 @@
   min-height: 0;
   border-radius: 0.7rem;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  background: white;
+  @apply bg-white dark:bg-gray-800;
 }
 
 .DocSearch-SearchBar {
@@ -69,6 +69,7 @@
   display: flex;
   align-items: center;
   margin: 0 1.5rem;
+  @apply border-b border-gray-300 dark:border-gray-600;
 }
 
 .DocSearch-Form {
@@ -104,15 +105,14 @@
 
 .DocSearch-Input {
   appearance: none;
-  background: transparent;
   height: 4.5rem;
   font-size: 1rem;
   font-weight: 500;
-  color: black;
   margin-left: 1rem;
   margin-right: 1rem;
   flex: auto;
   min-width: 0;
+  @apply text-black dark:text-white bg-transparent;
 }
 
 .DocSearch-Input:focus {
@@ -138,14 +138,13 @@
   flex: none;
   font-size: 0;
   border-radius: 0.375rem;
-  background-color: theme('colors.gray.50');
-  border: 1px solid theme('colors.gray.300');
+  @apply bg-gray-50 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-500 shadow;
   padding: 0.125rem 0.375rem;
 }
 
 .DocSearch-Cancel::before {
   content: 'esc';
-  color: theme('colors.gray.400');
+  @apply text-gray-900 dark:text-gray-200;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -155,9 +154,9 @@
 }
 
 .DocSearch-Hit-source {
+  @apply text-gray-600 dark:text-gray-300;
   line-height: 1.5rem;
   font-weight: bold;
-  color: theme('colors.gray.600');
   margin-top: 1.5rem;
   margin-bottom: 1rem;
 }
@@ -197,15 +196,15 @@
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 500;
-  color: theme('colors.gray.500');
+  @apply text-gray-600 dark:text-gray-300 hover:text-blue-500;
 }
 
 .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path {
-  color: theme('colors.blue.200');
+  @apply text-blue-200 dark:text-blue-100;
 }
 
 .DocSearch-Hit-title {
-  color: black;
+  @apply text-black dark:text-gray-300;
   line-height: 1.5rem;
   font-weight: 600;
   overflow: hidden;
@@ -245,14 +244,14 @@
 
 .DocSearch-Hit > a {
   display: block;
-  background: theme('colors.gray.50');
   border-radius: 0.5rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   padding: 0 1.25rem 0 1rem;
+  @apply bg-white dark:bg-gray-900 shadow;
 }
 
 .DocSearch-Hit[aria-selected='true'] > a {
-  background: theme('colors.blue.500');
+  @apply bg-blue-500 dark:bg-blue-500;
 }
 
 .DocSearch-Hit + .DocSearch-Hit {
@@ -278,6 +277,7 @@
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='200' viewBox='0 0 12 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1 0 V 200 M 1 100 H 12' stroke='%23a1a1aa' stroke-width='2'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
   background-position: center left;
+  @apply bg-white dark:bg-gray-800;
 }
 
 .DocSearch-Hit--Child:last-child::before,
@@ -292,7 +292,7 @@
   left: 0;
   width: 1.25rem;
   height: 0.25rem;
-  background: #fff;
+  @apply bg-white dark:bg-gray-800;
 }
 
 .DocSearch-Hit--Child + .DocSearch-Hit:not(.DocSearch-Hit--Child)::before {
@@ -304,12 +304,12 @@
 
 .DocSearch-Hits mark {
   background: none;
-  color: theme('colors.blue.500');
+  @apply text-blue-500 dark:text-blue-400;
 }
 
 .DocSearch-Hit[aria-selected='true'] mark {
   color: inherit;
-  text-decoration: underline;
+  @apply underline;
 }
 
 .DocSearch-Footer {
@@ -318,7 +318,6 @@
   display: flex;
   justify-content: flex-end;
   margin: 0 1.5rem;
-  border-top: 1px solid theme('colors.gray.200');
   padding: 1.25rem 0;
   flex-direction: row-reverse;
   position: relative;
@@ -327,6 +326,7 @@
   -ms-user-select: none;
   user-select: none;
   justify-content: space-between;
+  @apply border-t-2 border-gray-200 dark:border-gray-600;
 }
 
 .DocSearch-Logo a {
@@ -338,17 +338,21 @@
 }
 
 .DocSearch-Logo svg {
-  color: #5468ff;
+  @apply text-[#5468ff] dark:text-blue-400;
   margin-left: 0.5rem;
 }
 
+.DocSearch-Logo .DocSearch-Label {
+  @apply text-gray-600 dark:text-gray-300;
+}
+
 .DocSearch-Commands {
-  color: theme('colors.gray.500');
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: 0.75rem;
+  @apply text-gray-500 dark:text-gray-300;
 }
 
 .DocSearch-Commands li {
@@ -362,15 +366,18 @@
 
 .DocSearch-Commands-Key {
   align-items: center;
-  background: theme('colors.gray.200');
   border-radius: 2px;
-  box-shadow: theme('colors.gray.600');
   display: flex;
   height: 18px;
   justify-content: center;
   margin-right: 0.4em;
   padding-bottom: 1px;
   width: 20px;
+  @apply bg-gray-200 dark:bg-gray-500 shadow drop-shadow;
+}
+
+.DocSearch-Commands-Key svg {
+  @apply text-gray-500 dark:text-gray-900;
 }
 
 .DocSearch-Hit--deleting,
@@ -380,7 +387,8 @@
 }
 
 .DocSearch-NoResults .DocSearch-Screen-Icon {
-  display: none;
+  display: true;
+  @apply mb-4;
 }
 
 .DocSearch-Title {
@@ -390,7 +398,7 @@
 }
 
 .DocSearch-Title strong {
-  color: theme('colors.gray.900');
+  @apply text-gray-900 dark:text-gray-300;
   font-weight: 500;
 }
 
@@ -398,6 +406,11 @@
 .DocSearch-NoResults {
   padding-top: 2.5rem;
   padding-bottom: 1rem;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  @apply text-gray-500 dark:text-gray-300;
 }
 
 .DocSearch-StartScreen .DocSearch-Help {
@@ -422,7 +435,7 @@
 
 .DocSearch-NoResults-Prefill-List button {
   font-weight: 500;
-  color: theme('colors.blue.600');
+  @apply text-blue-600 dark:text-blue-400;
 }
 
 .DocSearch-NoResults-Prefill-List + .DocSearch-Help {
@@ -432,9 +445,9 @@
 }
 
 .DocSearch-NoResults-Prefill-List + .DocSearch-Help a {
-  box-shadow: theme('boxShadow.link');
-  color: theme('colors.blue.700');
+  text-decoration: underline;
   font-weight: 500;
+  @apply text-blue-600 dark:text-blue-400;
 }
 
 @media (max-width: 500px) {
diff --git a/src/css/main.css b/src/css/main.css
index 39ae973f..3c9deb2d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -8,3 +8,42 @@
 
 @import 'tailwindcss/components';
 @import 'utilities.css';
+
+/*Custom CSS*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+code,
+strong,
+prose {
+  @apply text-gray-900 dark:text-white;
+}
+
+p {
+  @apply text-gray-500 dark:text-gray-300;
+}
+
+p a,.prose a {
+  @apply text-blue-500 dark:text-blue-300 no-underline hover:underline;
+}
+
+.prose p code,
+li code {
+  @apply text-gray-700 dark:text-white bg-gray-200 dark:bg-gray-600;
+}
+
+hr {
+  @apply border-gray-300 dark:border-gray-700;
+}
+
+thead tr th {
+  @apply text-gray-700 dark:text-white bg-gray-200 dark:bg-gray-600;
+}
+
+.prose {
+  @apply text-gray-500 dark:text-gray-300;
+}
diff --git a/src/layouts/ContentsLayout.js b/src/layouts/ContentsLayout.js
index 471a7006..97e99184 100644
--- a/src/layouts/ContentsLayout.js
+++ b/src/layouts/ContentsLayout.js
@@ -29,10 +29,10 @@ function TableOfContents({ tableOfContents, currentSection }) {
 
   return (
     <>
-      
+      

         On this page
       
-      
+      
         {tableOfContents.map((section) => {
           let sectionIsActive =
             currentSection === section.slug ||
@@ -45,9 +45,9 @@ function TableOfContents({ tableOfContents, currentSection }) {
                   href={`#${section.slug}`}
                   onClick={closeNav}
                   className={clsx(
-                    'block transform transition-colors duration-200 py-2 hover:text-gray-900',
+                    'block transform transition-colors duration-200 py-2 hover:text-gray-900 dark:hover:text-white',
                     {
-                      'text-gray-900': sectionIsActive,
+                      'text-gray-900 dark:text-white': sectionIsActive,
                     }
                   )}
                 >
@@ -69,9 +69,9 @@ function TableOfContents({ tableOfContents, currentSection }) {
                       href={`#${subsection.slug}`}
                       onClick={closeNav}
                       className={clsx(
-                        'block py-2 transition-colors duration-200 hover:text-gray-900 font-medium',
+                        'block py-2 transition-colors duration-200 hover:text-gray-900 dark:hover:text-white font-medium',
                         {
-                          'text-gray-900': subsectionIsActive,
+                          'text-gray-900 dark:text-white': subsectionIsActive,
                         }
                       )}
                     >
@@ -191,7 +191,7 @@ export function ContentsLayout({ children, meta, classes, tableOfContents }) {
           
             {prev && (
               
-                
+                
                   
                     ←
                   
@@ -201,7 +201,7 @@ export function ContentsLayout({ children, meta, classes, tableOfContents }) {
             )}
             {next && (
               
-                
+                
                   {next.shortTitle || next.title}
                   
                     →
@@ -211,16 +211,16 @@ export function ContentsLayout({ children, meta, classes, tableOfContents }) {
             )}
           

         )}
-        
+        
           
-            Edit this page on GitHub
+            Edit this page on GitHub
           
         
         
           
-            Powered by ▲Vercel
+            Powered by ▲Vercel
           
         
       
diff --git a/src/layouts/SidebarLayout.js b/src/layouts/SidebarLayout.js
index f0cfd22c..aa97b96a 100644
--- a/src/layouts/SidebarLayout.js
+++ b/src/layouts/SidebarLayout.js
@@ -14,13 +14,13 @@ const NavItem = forwardRef(({ href, children, isActive, isPublished, fallbackHre
       
         
           
@@ -55,7 +55,7 @@ function Nav({ nav, children, fallbackHref }) {
     
       
         
@@ -113,10 +113,10 @@ const TopLevelAnchor = forwardRef(
           href={href}
           onClick={onClick}
           className={clsx(
-            'flex items-center px-3 hover:text-gray-900 transition-colors duration-200',
+            'flex items-center px-3 hover:text-gray-900 dark:hover:text-white dark:text-gray-400 transition-colors duration-200',
             className,
             {
-              'text-gray-900': isActive,
+              'text-gray-900 dark:text-white': isActive,
             }
           )}
         >
@@ -294,7 +294,7 @@ export function SidebarLayout({ children, navIsOpen, setNavIsOpen, nav, sidebar,
            {
       Router.events.off('routeChangeComplete', handleRouteChange)
     }
-  }, [navIsOpen],[router.events])
+  }, [navIsOpen], [router.events])
 
   const Layout = Component.layoutProps?.Layout || Fragment
   const layoutProps = Component.layoutProps?.Layout
@@ -65,36 +66,38 @@ export default function App({ Component, pageProps, router }) {
 
   return (
     <>
-      {meta.metaTitle || meta.title}
-      
-        
-        
-        
-        
-        
-        
-        
-        
-        
-      
-      {router.pathname !== '/' && (
-         setNavIsOpen(isOpen)} />
-      )}
-      
-        
-      
+      
+        {meta.metaTitle || meta.title}
+        
+          
+          
+          
+          
+          
+          
+          
+          
+          
+        
+        {router.pathname !== '/' && (
+           setNavIsOpen(isOpen)} />
+        )}
+        
+          
+        
+      
     
   )
 }
diff --git a/src/pages/_document.js b/src/pages/_document.js
index 1ecfb8e6..9723f989 100644
--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@@ -11,7 +11,7 @@ export default class Document extends NextDocument {
       
         
@@ -40,7 +40,7 @@ export default class Document extends NextDocument {
             }}
           />
         
-        
+        
           
           
           
diff --git a/src/pages/docs/index.js b/src/pages/docs/index.js
index 0d3fd44b..28489f84 100644
--- a/src/pages/docs/index.js
+++ b/src/pages/docs/index.js
@@ -20,8 +20,8 @@ export default function DocsLandingPage() {
           
             
               
-                Read the docs
-                
+                
Read the docs
+                
                   Learn how to get Java set up in your project.
                 
                 
@@ -46,8 +46,8 @@ export default function DocsLandingPage() {
           
             
               
-                Java Programs
-                
+                
Java Programs
+                
                   Start coding right now or go through Java code.
                 
                 
       
         
-          
+          
             
               
                 
-                  
+                  
                 
               
             
-            
+            
               
               
-                
+                
                   Documentation
                 
               
               
+              
               
             

           

-          
+          

             Learn{' '}
             
               Java
@@ -92,7 +94,7 @@ export default function Home() {
               
             
             
-              
             
@@ -115,7 +117,7 @@ export default function Home() {
       

       
         
-          
+          
             “ Learning By Doing ” actually works.
           
           
diff --git a/src/pages/programs/index.js b/src/pages/programs/index.js
index 232e7020..31992feb 100644
--- a/src/pages/programs/index.js
+++ b/src/pages/programs/index.js
@@ -18,7 +18,7 @@ export default function ProgramsLandingPage() {
           
             
               
-                Java Programs
+                Java Programs
                 
                   A bunch of Java programms for learning and practicing.
                 
diff --git a/src/pages/sponsors/index.js b/src/pages/sponsors/index.js
index c04c210e..f36a0994 100644
--- a/src/pages/sponsors/index.js
+++ b/src/pages/sponsors/index.js
@@ -19,8 +19,8 @@ export default function Sponsors() {
           
             
               
-                
-                  
+                
+                  
                     
                   
@@ -46,7 +46,7 @@ export default function Sponsors() {
                       Visit Vercel
                       
               
-                
-                  
+                
+                  
                     
               
-                
-                  
+                
+                  
                     
-                
-                  
+                
+