Merge branch 'ADP-4608' into develop

# Conflicts:
#	src/css/custom.css
#	versioned_docs/version-3.0/img/meta-destination.webp
#	versioned_docs/version-3.0/ios-sdk-migration-guides.md
#	versioned_docs/version-3.0/meta-create-campaign.md
#	versioned_docs/version-3.0/tiktok-create-campaign.md
#	versioned_docs/version-3.0/ua-facebook.md

Author: eandreeva-twr

docusaurus.config.js

@@ -358,8 +358,8 @@ const config = {
       // Configure the color mode to default to light and disable the dark mode switch
       colorMode: {
         defaultMode: 'light', // Set default theme to light mode
-        disableSwitch: true,  // Disable the toggle for switching themes
-        respectPrefersColorScheme: false, // Ignore system preference for dark mode
+        disableSwitch: false,  // Enable the toggle for switching themes
+        respectPrefersColorScheme: true, // Respect system preference for dark mode
       },
       sidebar: {
         autoCollapseCategories: true,

src/components/ArticleButtons/styles.module.css

@@ -61,4 +61,30 @@
 .theme-doc-markdown h1 {
   margin-bottom: 0.5em;
   margin-top: 0;
+}
+
+/* Dark Mode Styles */
+[data-theme='dark'] .button {
+  background: #1e1e1e;
+  border: 1px solid #2a2a2a;
+  color: var(--textPrimary);
+}
+
+[data-theme='dark'] .button svg {
+  fill: var(--textPrimary);
+  color: var(--textPrimary);
+}
+
+[data-theme='dark'] .button:hover {
+  background: #252525;
+  border-color: #3a3a3a;
+}
+
+[data-theme='dark'] .button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
+}
+
+[data-theme='dark'] .divider {
+  background: #2a2a2a;
 } 

src/components/CustomDocCardList/index.js

@@ -80,8 +80,8 @@ export default function CustomDocCardList({ ids = null }) {
 
         if (filteredItems.length === 0) {
             return (
-                <div style={{padding: '20px', border: '1px solid #e1e5e9', borderRadius: '8px', margin: '20px 0', backgroundColor: '#f8f9fa'}}>
-                    <h3 style={{color: '#4a5568', margin: '0 0 10px 0'}}>Related Topics</h3>
+                <div className={styles.emptyState}>
+                    <h3>Related Topics</h3>
                     <p>No related topics found for the specified IDs.</p>
                 </div>
             );
@@ -99,8 +99,8 @@ export default function CustomDocCardList({ ids = null }) {
     // Default behavior: use current category items
     if (!category || !category.items) {
         return (
-            <div style={{padding: '20px', border: '1px solid #e1e5e9', borderRadius: '8px', margin: '20px 0', backgroundColor: '#f8f9fa'}}>
-                <h3 style={{color: '#4a5568', margin: '0 0 10px 0'}}>Related Topics</h3>
+            <div className={styles.emptyState}>
+                <h3>Related Topics</h3>
                 <p>No related topics found. This might be because the current page doesn't have child pages in the sidebar.</p>
             </div>
         );
@@ -114,8 +114,8 @@ export default function CustomDocCardList({ ids = null }) {
 
     if (filteredItems.length === 0) {
         return (
-            <div style={{padding: '20px', border: '1px solid #e1e5e9', borderRadius: '8px', margin: '20px 0', backgroundColor: '#f8f9fa'}}>
-                <h3 style={{color: '#4a5568', margin: '0 0 10px 0'}}>Related Topics</h3>
+            <div className={styles.emptyState}>
+                <h3>Related Topics</h3>
                 <p>No related topics found. This might be because the current page doesn't have child pages in the sidebar.</p>
             </div>
         );

src/components/CustomDocCardList/styles.module.css

@@ -107,4 +107,51 @@
         font-size: 11px;
         -webkit-line-clamp: 2;
     }
+}
+
+/* Empty state styling */
+.emptyState {
+    padding: 20px;
+    border: 1px solid #e1e5e9;
+    border-radius: 8px;
+    margin: 20px 0;
+    background-color: #f8f9fa;
+}
+
+.emptyState h3 {
+    color: #4a5568;
+    margin: 0 0 10px 0;
+}
+
+/* Dark Mode Styles */
+[data-theme='dark'] .card {
+    background: #1e1e1e;
+    border: 1px solid #2a2a2a;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] .card:hover {
+    border-color: var(--purplePrimary);
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
+}
+
+[data-theme='dark'] .cardTitle {
+    color: var(--purplePrimary) !important;
+}
+
+[data-theme='dark'] .cardDescription {
+    color: var(--textSecondary) !important;
+}
+
+[data-theme='dark'] .emptyState {
+    background-color: #1e1e1e;
+    border-color: #2a2a2a;
+}
+
+[data-theme='dark'] .emptyState h3 {
+    color: var(--textPrimary);
+}
+
+[data-theme='dark'] .emptyState p {
+    color: var(--textSecondary);
 }

src/components/SidebarMenu/index.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useHistory } from '@docusaurus/router';
 import { useActiveDocContext } from '@docusaurus/plugin-content-docs/client';
 import { isMobileSdkDocument, getCorrespondingDocId } from '../../lib/sidebarMapping';
+import styles from './styles.module.css';
 
 
 
@@ -132,56 +133,20 @@ export default function SidebarMenu() {
 
 
   return (
-    <div style={{
-      width: '100%',
-      padding: '24px 16px 8px 16px',
-      background: '#f8f9fa',
-      borderBottom: '1px solid #e9ecef',
-      flexShrink: 0,
-      boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
-    }}>
-      <div style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px'
-      }}>
-        <div style={{
-          color: '#495057',
-          fontWeight: '600',
-          fontSize: '15px',
-          whiteSpace: 'nowrap'
-        }}>
+    <div className={styles.platformSwitcher}>
+      <div className={styles.switcherInner}>
+        <div className={styles.switcherLabel}>
           Platform:
         </div>
-        <div style={{ position: 'relative', flex: 1 }}>
+        <div className={styles.selectWrapper}>
           <button
-            style={{
-              width: '100%',
-              background: 'white',
-              border: '1px solid #dee2e6',
-              borderRadius: '8px',
-              color: '#495057',
-              fontSize: '15px',
-              fontWeight: '500',
-              padding: '8px 12px',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              minWidth: '0'
-            }}
+            className={styles.selectButton}
             onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             onBlur={() => setTimeout(() => setIsDropdownOpen(false), 150)}
           >
             <span>{currentPlatform.name}</span>
             <svg
-              style={{
-                width: '12px',
-                height: '12px',
-                marginLeft: '8px',
-                transform: isDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-                transition: 'transform 0.2s ease'
-              }}
+              className={`${styles.selectIcon} ${isDropdownOpen ? styles.selectIconOpen : ''}`}
               fill="currentColor"
               viewBox="0 0 20 20"
             >
@@ -190,54 +155,15 @@ export default function SidebarMenu() {
           </button>
 
           {isDropdownOpen && (
-            <div style={{
-              position: 'absolute',
-              top: '100%',
-              left: '0',
-              right: '0',
-              background: 'white',
-              border: '1px solid #dee2e6',
-              borderRadius: '8px',
-              boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-              zIndex: 1000,
-              marginTop: '2px',
-              padding: '8px'
-            }}>
+            <div className={styles.dropdown}>
               {platforms.map((platform) => (
                 <button
                   key={platform.name}
-                  style={{
-                    width: '100%',
-                    padding: '6px 16px',
-                    background: platform.name === currentPlatform.name ? 'var(--ifm-menu-color-background-active)' : 'transparent',
-                    border: 'none',
-                    textAlign: 'left',
-                    cursor: 'pointer',
-                    fontSize: '15px',
-                    color: platform.name === currentPlatform.name ? 'var(--purplePrimary)' : 'var(--textSecondary)',
-                    fontWeight: platform.name === currentPlatform.name ? '600' : '400',
-                    borderRadius: '8px',
-                    margin: '0'
-                  }}
+                  className={`${styles.dropdownItem} ${platform.name === currentPlatform.name ? styles.dropdownItemActive : ''}`}
                   onClick={() => {
                     handlePlatformChange(platform);
                     setIsDropdownOpen(false);
                   }}
-                  onMouseEnter={(e) => {
-                    if (platform.name !== currentPlatform.name) {
-                      e.target.style.background = 'var(--ifm-menu-color-background-hover)';
-                      e.target.style.color = 'var(--textPrimary)';
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (platform.name !== currentPlatform.name) {
-                      e.target.style.background = 'transparent';
-                      e.target.style.color = 'var(--textSecondary)';
-                    } else {
-                      e.target.style.background = 'var(--ifm-menu-color-background-active)';
-                      e.target.style.color = 'var(--purplePrimary)';
-                    }
-                  }}
                 >
                   {platform.name}
                 </button>