Add support for dark mode to new homepage cards (#2442)

* Update docusaurus.config.js for production launch

* Add support for both color modes

* Remove border in dark mode

* Add screenshot for CMS dark mode

* Fix non external link

Previously cards opened the pages in a new tab

* Update homepage images

Author: pwizla

docusaurus/docusaurus.config.js

@@ -10,7 +10,7 @@ const darkCodeTheme = themes.dracula;
 const config = {
   title: 'Strapi 5 Documentation',
   tagline: 'Design APIs fast, manage content easily.',
-  url: 'https://docs-next.strapi.io',
+  url: 'https://docs.strapi.io',
   baseUrl: '/',
   onBrokenLinks: 'throw', // replace with 'throw' to stop building if broken links
   onBrokenMarkdownLinks: 'throw',
@@ -128,7 +128,7 @@ const config = {
         docs: {
           routeBasePath: '/',
           sidebarPath: require.resolve('./sidebars.js'),
-          editUrl: 'https://github.com/strapi/documentation/edit/next/docusaurus', // TODO change back to next then main for production releases          admonitions: {
+          editUrl: 'https://github.com/strapi/documentation/edit/main/docusaurus',
           admonitions: {
             keywords: [
               // Admonitions defaults
@@ -194,8 +194,8 @@ const config = {
         hideOnScroll: false,
         logo: {
           alt: 'Strapi Documentation Logo',
-          src: 'img/logo-beta.png',
-          srcDark: 'img/logo-beta-dark.png',
+          src: 'img/logo.png',
+          srcDark: 'img/logo-dark.png',
         },
         items: [
           {

docusaurus/src/components/Card/Card.jsx

@@ -1,4 +1,3 @@
-
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import styles from './card.module.scss';
@@ -10,13 +9,16 @@ export function CardIcon ({
   name,
   color = '#000',
   className,
+  isDarkTheme = false,
   ...rest
 }) {
+  const iconColor = isDarkTheme ? color : color;
+  
   return (
     <div className={styles['card-category-icon-container']}>
       <Icon
         name={name}
-        color={color}
+        color={iconColor}
       />
     </div>
   )
@@ -30,7 +32,6 @@ export function CardTitle({
   ...rest
 }) {
   const TitleElement = (as || 'h3');
-
   return (
     <TitleElement
       className={clsx(
@@ -55,7 +56,6 @@ export function CardDescription({
   ...rest
 }) {
   const DescriptionElement = (as || 'div');
-
   return (
     <DescriptionElement
       className={clsx(
@@ -84,13 +84,15 @@ export function CardImgBg({
 
 export function CardImg({
   className,
+  isDarkTheme = false,
   ...rest
 }) {
   return (
     <img
       className={clsx(
         styles['card__img'],
         className,
+        isDarkTheme ? styles['card__img--dark'] : ''
       )}
       {...rest}
     />
@@ -104,8 +106,11 @@ export function CardCta({
   color = '#000',
   withArrow,
   asPlainContent = false,
+  isDarkTheme = false,
   ...rest
 }) {
+  const ctaColor = isDarkTheme ? (color === '#000' ? '#FFFFFF' : color) : color;
+  
   const contentJSX = (
     <>
       {text}
@@ -116,13 +121,13 @@ export function CardCta({
       )}
     </>
   );
-
+  
   if (asPlainContent) {
     return (
       <div 
-        className={className} 
+        className={clsx(className, isDarkTheme ? styles['card-cta--dark'] : '')} 
         style={{
-          color: color,
+          color: ctaColor,
           paddingTop: '15px',
           paddingBottom: '50px',
         }}
@@ -132,13 +137,13 @@ export function CardCta({
       </div>
     );
   }
-
+  
   return (
     <Link
-      className={className}
+      className={clsx(className, isDarkTheme ? styles['card-cta--dark'] : '')}
       to={to}
       style={{
-        color: color,
+        color: ctaColor,
         paddingTop: '15px',
         paddingBottom: '50px',
       }}
@@ -157,24 +162,42 @@ export function Card({
   isContentDelimited,
   to,
   variant,
+  isDarkTheme = false,
   ...rest
 }) {
   const isCallToAction = !!(href || to || asCallToAction);
-  const CardElement = (to ? Link : (href ? 'a' : 'div'));
-
+  
+  let CardElement;
+  let linkProps = {};
+  
+  if (to) {
+    CardElement = Link;
+    linkProps = { to };
+  } else if (href) {
+    if (href.startsWith('/')) {
+      CardElement = Link;
+      linkProps = { to: href };
+    } else {
+      CardElement = 'a';
+      linkProps = { href, target: '_blank' };
+    }
+  } else {
+    CardElement = 'div';
+  }
+  
   return (
     <CardElement
-      {...(!href ? {} : { href, target: '_blank' })}
-      {...(!to ? {} : { to })}
+      {...linkProps}
       className={clsx(
         styles.card,
         (isCallToAction && styles['card--cta']),
         (isContentDelimited && styles['card--content-delimited']),
         (variant && styles[`card--${variant}`]),
         className,
-        categoryType ? `category-${categoryType}` : ''
+        categoryType ? `category-${categoryType}` : '',
+        isDarkTheme ? styles['card--dark'] : ''
       )}
       {...rest}
     />
   );
-}
+}

docusaurus/src/components/Card/card.module.scss

@@ -240,4 +240,8 @@
       }
     }
   }
+
+  [class*="card__img"] {
+    border: none !important;
+  }
 }