diff --git a/weave-js/src/components/Callout/Callout.tsx b/weave-js/src/components/Callout/Callout.tsx
index 51028420f46..9fc6535d9cf 100644
--- a/weave-js/src/components/Callout/Callout.tsx
+++ b/weave-js/src/components/Callout/Callout.tsx
@@ -18,6 +18,7 @@ export const Callout = ({className, color, icon, size}: CalloutProps) => {
     <Tailwind>
       <div
         className={twMerge(
+          'night-aware',
           getTagColorClass(color),
           'flex items-center justify-center rounded-full',
           size === 'x-small' && 'h-[40px] w-[40px]',