ENG-6637: replace color_mode_cond with dark: utility for images (#1475)

carlosabadia · web-flow · commit d0326f7f616e · 2025-07-09T16:07:11.000-07:00
* replace color_mode_cond with dark: utility

* add missing f
diff --git a/pcweb/components/hosting_banner.py b/pcweb/components/hosting_banner.py
@@ -1,15 +1,9 @@
 import reflex as rx
 
-from pcweb.constants import REFLEX_BUILD_URL
-
 
 def glow() -> rx.Component:
     return rx.box(
-        class_name="absolute w-[120rem] h-[23.75rem] flex-shrink-0 rounded-[120rem] left-1/2 -translate-x-1/2 z-[0] top-[-16rem]",
-        background_image=rx.color_mode_cond(
-            "radial-gradient(50% 50% at 50% 50%, rgba(235, 228, 255, 0.95) 0%, rgba(252, 252, 253, 0.00) 100%)",
-            "radial-gradient(50% 50% at 50% 50%, rgba(58, 45, 118, 1) 0%, rgba(21, 22, 24, 0.00) 100%)",
-        ),
+        class_name="absolute w-[120rem] h-[23.75rem] flex-shrink-0 rounded-[120rem] left-1/2 -translate-x-1/2 z-[0] top-[-16rem] dark:[background-image:radial-gradient(50%_50%_at_50%_50%,_rgba(58,45,118,1)_0%,_rgba(21,22,24,0.00)_100%)] [background-image:radial-gradient(50%_50%_at_50%_50%,_rgba(235,228,255,0.95)_0%,_rgba(252,252,253,0.00)_100%)]",
     )
 
 
diff --git a/pcweb/components/icons/patterns.py b/pcweb/components/icons/patterns.py
@@ -77,16 +77,23 @@ def landing_patterns() -> rx.Component:
 def hosting_patterns() -> rx.Component:
     return [
         rx.image(
-            src=rx.color_mode_cond(
-                light="/hosting/light/hosting_patterns.svg",
-                dark="/hosting/dark/hosting_patterns.svg",
+            src="/hosting/light/hosting_patterns.svg",
+            alt="Reflex Hosting Patterns",
+            class_name="dark:hidden desktop-only absolute top-0 z-[-1] w-[1028px] h-[478px] pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            + rx.cond(
+                HostingBannerState.show_banner,
+                " lg:mt-[24rem] mt-[3.5rem]",
+                " lg:mt-[19rem] mt-[8.5rem]",
             ),
+        ),
+        rx.image(
+            src="/hosting/dark/hosting_patterns.svg",
             alt="Reflex Hosting Patterns",
-            class_name="desktop-only absolute top-0 z-[-1] w-[1028px] h-[478px] pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            class_name="dark:flex hidden desktop-only absolute top-0 z-[-1] w-[1028px] h-[478px] pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
             + rx.cond(
                 HostingBannerState.show_banner,
                 " lg:mt-[24rem] mt-[3.5rem]",
                 " lg:mt-[19rem] mt-[8.5rem]",
             ),
-        )
+        ),
     ]
diff --git a/pcweb/pages/customers/views/bento_cards.py b/pcweb/pages/customers/views/bento_cards.py
@@ -4,24 +4,34 @@
 def card(company: str, text: str, class_name: str = "") -> rx.Component:
     return rx.link(
         # Top-Left corner company logo
+        # Light
         rx.image(
-            src=rx.color_mode_cond(
-                light=f"/customers/light/{company}/{company}_top.svg",
-                dark=f"/customers/dark/{company}/{company}_top.svg",
-            ),
+            src=f"/customers/light/{company}/{company}_top.svg",
+            alt=f"{company} logo",
+            loading="lazy",
+            class_name="absolute top-10 left-10 z-[2] max-h-[32px] dark:hidden",
+        ),
+        # Dark
+        rx.image(
+            src=f"/customers/dark/{company}/{company}_top.svg",
             alt=f"{company} logo",
             loading="lazy",
-            class_name="absolute top-10 left-10 z-[2] max-h-[32px]",
+            class_name="absolute top-10 left-10 z-[2] max-h-[32px] dark:block hidden",
         ),
         # Center company logo
+        # Light
         rx.image(
-            rx.color_mode_cond(
-                light=f"/customers/light/{company}/{company}_middle.svg",
-                dark=f"/customers/dark/{company}/{company}_middle.svg",
-            ),
+            src=f"/customers/light/{company}/{company}_middle.svg",
             alt=f"{company} small logo",
             loading="lazy",
-            class_name="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[2] max-h-[88px]",
+            class_name="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[2] max-h-[88px] dark:hidden",
+        ),
+        # Dark
+        rx.image(
+            src=f"/customers/dark/{company}/{company}_middle.svg",
+            alt=f"{company} small logo",
+            loading="lazy",
+            class_name="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[2] max-h-[88px] dark:block hidden",
         ),
         # Wave pattern
         rx.html(
@@ -102,14 +112,19 @@ def _card(company: str, is_company: bool = True, **kwarg) -> rx.Component:
         # Center company logo
         rx.cond(
             is_company,
-            rx.image(
-                rx.color_mode_cond(
-                    light=f"/customers/light/{company}/{company}_middle.svg",
-                    dark=f"/customers/dark/{company}/{company}_middle.svg",
+            rx.fragment(
+                rx.image(
+                    f"/customers/light/{company}/{company}_middle.svg",
+                    alt=f"{company} small logo",
+                    loading="lazy",
+                    class_name="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[2] max-h-[88px] dark:hidden",
+                ),
+                rx.image(
+                    f"/customers/dark/{company}/{company}_middle.svg",
+                    alt=f"{company} small logo",
+                    loading="lazy",
+                    class_name="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[2] max-h-[88px] dark:block hidden",
                 ),
-                alt=f"{company} small logo",
-                loading="lazy",
-                class_name="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[2] max-h-[88px]",
             ),
             rx.image(
                 **kwarg,
diff --git a/pcweb/pages/customers/views/customers_list.py b/pcweb/pages/customers/views/customers_list.py
@@ -91,13 +91,16 @@ def customers_list_item(
     return rx.link(
         rx.box(
             rx.image(
-                src=rx.color_mode_cond(
-                    light=f"/customers/light/{company.lower()}/{company.lower()}_small.svg",
-                    dark=f"/customers/dark/{company.lower()}/{company.lower()}_small.svg",
-                ),
+                src=f"/customers/light/{company.lower()}/{company.lower()}_small.svg",
+                alt=f"{company} logo",
+                loading="lazy",
+                class_name="dark:hidden h-5 w-auto shrink-0",
+            ),
+            rx.image(
+                src=f"/customers/dark/{company.lower()}/{company.lower()}_small.svg",
                 alt=f"{company} logo",
                 loading="lazy",
-                class_name="h-5 w-auto shrink-0",
+                class_name="dark:block hidden h-5 w-auto shrink-0",
             ),
             rx.text(company, class_name="font-base font-semibold text-slate-12"),
             class_name="flex flex-row items-center gap-2.5 flex-1 justify-start",
diff --git a/pcweb/pages/framework/views/companies.py b/pcweb/pages/framework/views/companies.py
@@ -3,21 +3,19 @@
 
 def logo(path: str, height: str) -> rx.Component:
     return rx.fragment(
-        rx.color_mode_cond(
-            rx.image(
-                src=f"/companies/light/{path}.svg",
-                alt=f"{path} logo",
-                loading="lazy",
-                height=height,
-                class_name="shrink-0",
-            ),
-            rx.image(
-                src=f"/companies/dark/{path}.svg",
-                alt=f"{path} logo",
-                height=height,
-                loading="lazy",
-                class_name="shrink-0",
-            ),
+        rx.image(
+            src=f"/companies/light/{path}.svg",
+            alt=f"{path} logo",
+            loading="lazy",
+            height=height,
+            class_name="shrink-0 dark:hidden",
+        ),
+        rx.image(
+            src=f"/companies/dark/{path}.svg",
+            alt=f"{path} logo",
+            height=height,
+            loading="lazy",
+            class_name="shrink-0 dark:block hidden",
         ),
     )
 
diff --git a/pcweb/pages/framework/views/frontend_features.py b/pcweb/pages/framework/views/frontend_features.py
@@ -18,11 +18,16 @@ def frontend_card(
             class_name="flex flex-col gap-2 px-10 pt-10",
         ),
         rx.image(
-            src=rx.color_mode_cond(
-                light=f"/landing/frontend_features/light/{image}",
-                dark=f"/landing/frontend_features/dark/{image}",
-            ),
-            class_name="w-full absolute shrink-0" + " " + image_cn,
+            src=f"/landing/frontend_features/light/{image}",
+            class_name="dark:hidden w-full absolute shrink-0" + " " + image_cn,
+            top=top,
+            height=height,
+            loading="lazy",
+            alt=title + " image",
+        ),
+        rx.image(
+            src=f"/landing/frontend_features/dark/{image}",
+            class_name="dark:block hidden w-full absolute shrink-0" + " " + image_cn,
             top=top,
             height=height,
             loading="lazy",
diff --git a/pcweb/pages/framework/views/hosting_features.py b/pcweb/pages/framework/views/hosting_features.py
@@ -21,13 +21,16 @@ def graphic_card() -> rx.Component:
             class_name="pointer-events-none w-auto h-auto -rotate-90 shrink-0 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[1]",
         ),
         rx.image(
-            src=rx.color_mode_cond(
-                light="/landing/hosting_features/light/deploy.svg",
-                dark="/landing/hosting_features/dark/deploy.svg",
-            ),
+            src="/landing/hosting_features/light/deploy.svg",
+            alt="Hosting graphic",
+            loading="lazy",
+            class_name="w-[7.875rem] h-[8.5rem] shrink-0 z-[2] dark:hidden",
+        ),
+        rx.image(
+            src="/landing/hosting_features/dark/deploy.svg",
             alt="Hosting graphic",
             loading="lazy",
-            class_name="w-[7.875rem] h-[8.5rem] shrink-0 z-[2]",
+            class_name="w-[7.875rem] h-[8.5rem] shrink-0 z-[2] dark:block hidden",
         ),
         class_name="flex justify-center items-center relative pointer-events-none h-full w-full lg:my-0 my-10",
     )
diff --git a/pcweb/pages/hosting/views/preview.py b/pcweb/pages/hosting/views/preview.py
@@ -26,12 +26,15 @@ def preview() -> rx.Component:
     return rx.box(
         pattern_1(),
         rx.image(
-            src=rx.color_mode_cond(
-                light="/hosting/light/hosting-preview.jpg",
-                dark="/hosting/dark/hosting-preview.jpg",
-            ),
+            src="/hosting/light/hosting-preview.jpg",
             alt="Reflex Hosting Preview",
-            class_name="w-full h-full rounded-lg lg:rounded-2xl object-cover bg-center border border-slate-3",
+            class_name="dark:hidden w-full h-full rounded-lg lg:rounded-2xl object-cover bg-center border border-slate-3",
+            loading="lazy",
+        ),
+        rx.image(
+            src="/hosting/dark/hosting-preview.jpg",
+            alt="Reflex Hosting Preview",
+            class_name="dark:block hidden w-full h-full rounded-lg lg:rounded-2xl object-cover bg-center border border-slate-3",
             loading="lazy",
         ),
         class_name="w-full h-full max-w-[71rem] max-h-[41rem] rounded-[2rem] backdrop-blur-[6px] bg-[rgba(26, 27, 29, 0.48)] lg:p-4 lg:border border-slate-3 relative lg:mt-0 mt-[3.5rem]",
diff --git a/pcweb/pages/landing/views/companies.py b/pcweb/pages/landing/views/companies.py
@@ -138,7 +138,7 @@ def quote_badge() -> rx.Component:
 
 
 @rx.memo
-def company_card(image: str, name: str, id: str) -> rx.Component:
+def company_card(name: str, id: str) -> rx.Component:
     area_x_pos = ClientStateVar.create(
         var_name="area_x_pos", default=0, global_ref=False
     )
@@ -163,9 +163,18 @@ def company_card(image: str, name: str, id: str) -> rx.Component:
                 class_name="flex flex-col gap-2.5 w-full h-[10.75rem] justify-between bg-slate-1 border-box p-4 overflow-hidden",
             ),
             rx.box(
+                # Light
                 rx.image(
-                    src=image,
-                    class_name="w-[4.75rem] h-auto pointer-events-none group-hover:grayscale-0 grayscale-[1] opacity-50 group-hover:opacity-100 transition-all",
+                    src=f"/landing/companies/light/{name}.svg",
+                    class_name="w-[4.75rem] h-auto pointer-events-none group-hover:grayscale-0 grayscale-[1] opacity-50 group-hover:opacity-100 transition-all dark:hidden",
+                    loading="lazy",
+                    alt=f"{name} logo",
+                ),
+                # Dark
+                rx.image(
+                    src=f"/landing/companies/dark/{name}.svg",
+                    class_name="w-[4.75rem] h-auto pointer-events-none group-hover:grayscale-0 grayscale-[1] opacity-50 group-hover:opacity-100 transition-all dark:block hidden",
+                    loading="lazy",
                     alt=f"{name} logo",
                 ),
                 class_name=(
@@ -240,7 +249,6 @@ def companies() -> rx.Component:
         rx.box(
             *[
                 company_card(
-                    image=f"/landing/companies/{rx.color_mode_cond(light='light', dark='dark')}/{company}.svg",
                     name=company,
                     id=f"landing-company-card-{company}",
                 )
diff --git a/pcweb/pages/landing/views/hosting_section.py b/pcweb/pages/landing/views/hosting_section.py
@@ -77,8 +77,12 @@ def content() -> rx.Component:
         ),
         rx.box(
             rx.image(
-                src=f"/landing/hosting_features/{rx.color_mode_cond(light='light', dark='dark')}/card.webp",
-                class_name="absolute top-0 left-0 w-full h-full object-cover pointer-events-none",
+                src=f"/landing/hosting_features/light/card.webp",
+                class_name="absolute top-0 left-0 w-full h-full object-cover pointer-events-none dark:hidden",
+            ),
+            rx.image(
+                src=f"/landing/hosting_features/dark/card.webp",
+                class_name="absolute top-0 left-0 w-full h-full object-cover pointer-events-none dark:block hidden",
             ),
             class_name="justify-center items-center relative overflow-hidden w-full lg:flex hidden",
         ),
diff --git a/pcweb/pages/library_previews.py b/pcweb/pages/library_previews.py
@@ -7,13 +7,16 @@ def component_card(name: str, link: str, section: str) -> rx.Component:
     return rx.link(
         rx.box(
             rx.image(
-                src=rx.color_mode_cond(
-                    f"/components_previews/{section.lower()}/light/{name.lower()}.svg",
-                    f"/components_previews/{section.lower()}/dark/{name.lower()}.svg",
-                ),
+                src=f"/components_previews/{section.lower()}/light/{name.lower()}.svg",
+                loading="lazy",
+                alt=f"Image preview of {name}",
+                class_name="object-contain object-center h-full w-full dark:hidden",
+            ),
+            rx.image(
+                src=f"/components_previews/{section.lower()}/dark/{name.lower()}.svg",
                 loading="lazy",
-                alt="Image preview of " + name,
-                class_name="object-contain object-center h-full w-full",
+                alt=f"Image preview of {name}",
+                class_name="object-contain object-center h-full w-full dark:block hidden",
             ),
             rx.box(
                 rx.text(
diff --git a/pcweb/pages/pricing/faq.py b/pcweb/pages/pricing/faq.py
@@ -5,11 +5,7 @@
 
 def glow() -> rx.Component:
     return rx.box(
-        class_name="absolute flex-shrink-0 rounded-[120rem] left-1/2 -translate-x-1/2 z-[-1] top-[-1.25rem] pointer-events-none w-[20rem] h-[5rem]",
-        background_image=rx.color_mode_cond(
-            "radial-gradient(50% 50% at 50% 50%, rgba(235, 228, 255, 0.661) 0%, rgba(252, 252, 253, 0.00) 100%) !important",
-            "radial-gradient(50% 50% at 50% 50%, rgba(58, 45, 118, 0.207) 0%, rgba(21, 22, 24, 0.00) 100%) !important",
-        ),
+        class_name="absolute flex-shrink-0 rounded-[120rem] left-1/2 -translate-x-1/2 z-[-1] top-[-1.25rem] pointer-events-none w-[20rem] h-[5rem] dark:[background-image:radial-gradient(50%_50%_at_50%_50%,_rgba(58,45,118,0.207)_0%,_rgba(21,22,24,0.00)_100%)] [background-image:radial-gradient(50%_50%_at_50%_50%,_rgba(235,228,255,0.661)_0%,_rgba(252,252,253,0.00)_100%)]",
     )
 
 
diff --git a/pcweb/pages/pricing/plan_cards.py b/pcweb/pages/pricing/plan_cards.py
@@ -18,14 +18,19 @@ def radial_circle(violet: bool = False) -> rx.Component:
 
     """
     theme = "violet" if violet else ""
-    return rx.image(
-        src=rx.color_mode_cond(
-            light=f"/logos/light/radial_circle{theme}.svg",
-            dark=f"/logos/dark/radial_circle{theme}.svg",
+    return rx.fragment(
+        rx.image(
+            src=f"/logos/light/radial_circle{theme}.svg",
+            alt="Radial circle",
+            loading="lazy",
+            class_name="top-0 right-0 absolute pointer-events-none z-[-1] dark:hidden",
+        ),
+        rx.image(
+            src=f"/logos/dark/radial_circle{theme}.svg",
+            alt="Radial circle",
+            loading="lazy",
+            class_name="dark:block hidden top-0 right-0 absolute pointer-events-none z-[-1]",
         ),
-        alt="Radial circle",
-        loading="lazy",
-        class_name="top-0 right-0 absolute pointer-events-none z-[-1]",
     )
 
 
@@ -228,12 +233,14 @@ def _render_feature_list(features: list[tuple[str, str]]) -> rx.Component:
             rx.el.li(
                 rx.icon("check", class_name="!text-green-500", size=16),
                 feature[1],
-                rx.tooltip(
-                    rx.icon("info", class_name="!text-slate-9", size=12),
-                    content=feature[2],
-                )
-                if len(feature) == 3
-                else "",
+                (
+                    rx.tooltip(
+                        rx.icon("info", class_name="!text-slate-9", size=12),
+                        content=feature[2],
+                    )
+                    if len(feature) == 3
+                    else ""
+                ),
                 class_name="text-sm font-medium text-slate-11 flex items-center gap-3 mb-2",
             )
             for feature in features
