From 912fa3fe49a2bfc7ca96777c96eecc3fecff77c8 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Mon, 8 Jun 2026 12:33:35 +0500
Subject: [PATCH] mobile: make intro illustration work with light mode

---
 .../app/components/intro/illustration.tsx     | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/apps/mobile/app/components/intro/illustration.tsx b/apps/mobile/app/components/intro/illustration.tsx
index 0d2595da5..ebed3200d 100644
--- a/apps/mobile/app/components/intro/illustration.tsx
+++ b/apps/mobile/app/components/intro/illustration.tsx
@@ -37,6 +37,7 @@ import Svg, {
   Path,
   Rect
 } from "react-native-svg";
+import { useThemeColors } from "@notesnook/theme";
 
 const SPRING_CONFIG = {
   damping: 14,
@@ -75,6 +76,7 @@ function useFloatAnim(delay: number, range = 6) {
 }
 
 export const IntroIllustration = () => {
+  const { isDark } = useThemeColors();
   // Gesture-driven tilt
   const tiltX = useSharedValue(0); // rotateX: finger up/down
   const tiltY = useSharedValue(0); // rotateY: finger left/right
@@ -134,7 +136,7 @@ export const IntroIllustration = () => {
             cx={116}
             cy={105}
             r={104.75}
-            stroke="#1F2722"
+            stroke={isDark ? "#1F2722" : "#E8F4ED"}
             strokeWidth={0.5}
           />
           <Circle
@@ -142,8 +144,8 @@ export const IntroIllustration = () => {
             cy={105.5}
             r={95.25}
             fill="#008836"
-            fillOpacity={0.04}
-            stroke="#233C2D"
+            fillOpacity={0.05}
+            stroke={isDark ? "#233C2D" : "#E8F0EC"}
             strokeWidth={0.5}
           />
           <Circle
@@ -151,8 +153,8 @@ export const IntroIllustration = () => {
             cy={105.5}
             r={82.25}
             fill="#008836"
-            fillOpacity={0.05}
-            stroke="#233C2D"
+            fillOpacity={0.04}
+            stroke={isDark ? "#233C2D" : "#E3F1E8"}
             strokeWidth={0.5}
           />
           <Circle
@@ -161,7 +163,7 @@ export const IntroIllustration = () => {
             r={62.25}
             fill="#008836"
             fillOpacity={0.06}
-            stroke="#233C2D"
+            stroke={isDark ? "#233C2D" : "#D3E8DB"}
             strokeWidth={0.5}
           />
           <Circle cx={116.5} cy={105.5} r={44.5} fill="#008836" />
@@ -213,11 +215,17 @@ export const IntroIllustration = () => {
               width={46.5}
               height={46.5}
               rx={7.75}
-              fill="#1A1D1B"
-              stroke="#233C2D"
+              fill={isDark ? "#1A1D1B" : "#f7f7f7"}
+              stroke={isDark ? "#233C2D" : "#D3E8DB"}
               strokeWidth={0.5}
             />
-            <Rect width={22} height={22} x={13} y={12} fill="#171F1A" />
+            <Rect
+              width={22}
+              height={22}
+              x={13}
+              y={12}
+              fill={isDark ? "#1A1D1B" : "#f7f7f7"}
+            />
             <Path
               d="M28.125 25.75C27.6663 25.7499 27.2124 25.8417 26.7899 26.0202C26.3674 26.1987 25.9851 26.4601 25.6654 26.789L21.7037 24.2427C22.0153 23.4435 22.0153 22.5565 21.7037 21.7573L25.6654 19.211C26.2605 19.8206 27.0607 20.1875 27.911 20.2406C28.7612 20.2937 29.6008 20.0292 30.2671 19.4984C30.9334 18.9675 31.3788 18.2082 31.5171 17.3677C31.6554 16.5271 31.4766 15.6651 31.0154 14.9488C30.5542 14.2326 29.8435 13.7131 29.0211 13.4911C28.1987 13.269 27.3231 13.3603 26.5641 13.7472C25.8051 14.134 25.2169 14.7889 24.9133 15.5849C24.6098 16.3808 24.6126 17.2612 24.9212 18.0552L20.9595 20.6015C20.4824 20.1117 19.8701 19.7753 19.2009 19.6353C18.5317 19.4953 17.8359 19.5581 17.2025 19.8156C16.5691 20.0731 16.0269 20.5136 15.6452 21.0808C15.2635 21.6481 15.0596 22.3163 15.0596 23C15.0596 23.6837 15.2635 24.3519 15.6452 24.9192C16.0269 25.4864 16.5691 25.9269 17.2025 26.1844C17.8359 26.4419 18.5317 26.5047 19.2009 26.3647C19.8701 26.2247 20.4824 25.8883 20.9595 25.3985L24.9212 27.9448C24.6558 28.6294 24.6165 29.3809 24.8091 30.0893C25.0018 30.7978 25.4161 31.4259 25.9916 31.8819C26.567 32.3378 27.2733 32.5975 28.007 32.6229C28.7408 32.6484 29.4634 32.4383 30.069 32.0233C30.6747 31.6084 31.1316 31.0105 31.3729 30.3171C31.6141 29.6237 31.627 28.8712 31.4097 28.17C31.1924 27.4687 30.7562 26.8554 30.1652 26.42C29.5741 25.9845 28.8591 25.7497 28.125 25.75ZM28.125 14.75C28.5329 14.75 28.9317 14.871 29.2708 15.0976C29.61 15.3242 29.8744 15.6463 30.0305 16.0232C30.1866 16.4001 30.2274 16.8148 30.1478 17.2149C30.0683 17.615 29.8718 17.9825 29.5834 18.2709C29.2949 18.5594 28.9274 18.7558 28.5273 18.8354C28.1273 18.915 27.7126 18.8741 27.3357 18.718C26.9588 18.5619 26.6367 18.2975 26.4101 17.9584C26.1834 17.6192 26.0625 17.2204 26.0625 16.8125C26.0625 16.2655 26.2798 15.7409 26.6666 15.3541C27.0533 14.9673 27.578 14.75 28.125 14.75ZM18.5 25.0625C18.092 25.0625 17.6933 24.9415 17.3541 24.7149C17.0149 24.4883 16.7506 24.1662 16.5945 23.7893C16.4384 23.4124 16.3975 22.9977 16.4771 22.5976C16.5567 22.1975 16.7531 21.83 17.0416 21.5416C17.33 21.2532 17.6975 21.0567 18.0976 20.9771C18.4977 20.8976 18.9124 20.9384 19.2892 21.0945C19.6661 21.2506 19.9882 21.515 20.2149 21.8541C20.4415 22.1933 20.5625 22.5921 20.5625 23C20.5625 23.547 20.3452 24.0716 19.9584 24.4584C19.5716 24.8452 19.047 25.0625 18.5 25.0625ZM28.125 31.25C27.717 31.25 27.3183 31.129 26.9791 30.9024C26.6399 30.6758 26.3756 30.3537 26.2195 29.9768C26.0634 29.5999 26.0225 29.1852 26.1021 28.7851C26.1817 28.385 26.3781 28.0175 26.6666 27.7291C26.955 27.4407 27.3225 27.2442 27.7226 27.1646C28.1227 27.0851 28.5374 27.1259 28.9142 27.282C29.2911 27.4381 29.6132 27.7025 29.8399 28.0416C30.0665 28.3808 30.1875 28.7796 30.1875 29.1875C30.1875 29.7345 29.9702 30.2591 29.5834 30.6459C29.1966 31.0327 28.672 31.25 28.125 31.25Z"
               fill="#008836"
@@ -236,8 +244,8 @@ export const IntroIllustration = () => {
               width={31.5}
               height={31.5}
               rx={7.75}
-              fill="#1A1D1B"
-              stroke="#233C2D"
+              fill={isDark ? "#1A1D1B" : "#f7f7f7"}
+              stroke={isDark ? "#233C2D" : "#D3E8DB"}
               strokeWidth={0.5}
             />
             <Path
@@ -258,8 +266,8 @@ export const IntroIllustration = () => {
               width={34.5}
               height={34.5}
               rx={7.75}
-              fill="#1A1D1B"
-              stroke="#233C2D"
+              fill={isDark ? "#1A1D1B" : "#f7f7f7"}
+              stroke={isDark ? "#233C2D" : "#D3E8DB"}
               strokeWidth={0.5}
             />
             <Rect
@@ -267,7 +275,7 @@ export const IntroIllustration = () => {
               height={18.3333}
               x={8.3334}
               y={8.333}
-              fill="#171F1A"
+              fill={isDark ? "#1A1D1B" : "#f7f7f7"}
             />
             <Path
               d="M23.6346 14.178L19.6242 10.168C19.5709 10.114 19.5077 10.072 19.4382 10.044C19.3686 10.015 19.2941 10 19.2188 10H12.3438C12.0399 10 11.7485 10.121 11.5336 10.336C11.3187 10.551 11.198 10.842 11.198 11.146V23.75C11.198 24.054 11.3187 24.345 11.5336 24.56C11.7485 24.775 12.0399 24.896 12.3438 24.896H22.6563C22.9602 24.896 23.2517 24.775 23.4666 24.56C23.6814 24.345 23.8022 24.054 23.8022 23.75V14.583C23.8022 14.508 23.7875 14.434 23.7587 14.364C23.7299 14.295 23.6878 14.231 23.6346 14.178ZM19.7917 11.956L21.8464 14.01H19.7917V11.956ZM22.6563 23.75H12.3438V11.146H18.6459V14.583C18.6459 14.735 18.7063 14.881 18.8137 14.989C18.9212 15.096 19.0669 15.156 19.2188 15.156H22.6563V23.75ZM20.3647 18.021C20.3647 18.173 20.3043 18.319 20.1969 18.426C20.0894 18.533 19.9437 18.594 19.7917 18.594H15.2084C15.0565 18.594 14.9107 18.533 14.8033 18.426C14.6959 18.319 14.6355 18.173 14.6355 18.021C14.6355 17.869 14.6959 17.723 14.8033 17.616C14.9107 17.508 15.0565 17.448 15.2084 17.448H19.7917C19.9437 17.448 20.0894 17.508 20.1969 17.616C20.3043 17.723 20.3647 17.869 20.3647 18.021ZM20.3647 20.313C20.3647 20.465 20.3043 20.61 20.1969 20.718C20.0894 20.825 19.9437 20.885 19.7917 20.885H15.2084C15.0565 20.885 14.9107 20.825 14.8033 20.718C14.6959 20.61 14.6355 20.465 14.6355 20.313C14.6355 20.161 14.6959 20.015 14.8033 19.907C14.9107 19.8 15.0565 19.74 15.2084 19.74H19.7917C19.9437 19.74 20.0894 19.8 20.1969 19.907C20.3043 20.015 20.3647 20.161 20.3647 20.313Z"
@@ -287,8 +295,8 @@ export const IntroIllustration = () => {
               width={42.5}
               height={42.5}
               rx={7.75}
-              fill="#1A1D1B"
-              stroke="#233C2D"
+              fill={isDark ? "#1A1D1B" : "#f7f7f7"}
+              stroke={isDark ? "#233C2D" : "#D3E8DB"}
               strokeWidth={0.5}
             />
             <G>