From cd2dcba484a57ec87dde83558c5701acad83bf78 Mon Sep 17 00:00:00 2001
From: Kristina <kristina.durivage@grafana.com>
Date: Wed, 30 Aug 2023 11:11:42 -0500
Subject: [PATCH] Datasource Picker: Invert the builtin svg logos on light mode
 (#71684)

* Invert the builtin svg logos on light mode

* Empty-Commit
---
 .../datasources/components/picker/DataSourceCard.tsx      | 8 +++++---
 .../datasources/components/picker/DataSourceLogo.tsx      | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/public/app/features/datasources/components/picker/DataSourceCard.tsx b/public/app/features/datasources/components/picker/DataSourceCard.tsx
index 0aa14d799b6..162fbaea0d6 100644
--- a/public/app/features/datasources/components/picker/DataSourceCard.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceCard.tsx
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React from 'react';
 
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
-import { Card, TagList, useStyles2 } from '@grafana/ui';
+import { Card, TagList, useTheme2 } from '@grafana/ui';
 
 interface DataSourceCardProps {
   ds: DataSourceInstanceSettings;
@@ -12,7 +12,8 @@ interface DataSourceCardProps {
 }
 
 export function DataSourceCard({ ds, onClick, selected, description, ...htmlProps }: DataSourceCardProps) {
-  const styles = useStyles2(getStyles);
+  const theme = useTheme2();
+  const styles = getStyles(theme, ds.meta.builtIn);
 
   return (
     <Card
@@ -37,7 +38,7 @@ export function DataSourceCard({ ds, onClick, selected, description, ...htmlProp
 }
 
 // Get styles for the component
-function getStyles(theme: GrafanaTheme2) {
+function getStyles(theme: GrafanaTheme2, builtIn = false) {
   return {
     card: css`
       cursor: pointer;
@@ -75,6 +76,7 @@ function getStyles(theme: GrafanaTheme2) {
       > img {
         max-height: 100%;
         min-width: 24px;
+        filter: invert(${builtIn && theme.isLight ? 1 : 0});
       }
     `,
     name: css`
diff --git a/public/app/features/datasources/components/picker/DataSourceLogo.tsx b/public/app/features/datasources/components/picker/DataSourceLogo.tsx
index 55b3857892c..022ed55573f 100644
--- a/public/app/features/datasources/components/picker/DataSourceLogo.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceLogo.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { DataSourceInstanceSettings, DataSourceJsonData, GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { useStyles2, useTheme2 } from '@grafana/ui';
 
 export interface DataSourceLogoProps {
   dataSource: DataSourceInstanceSettings<DataSourceJsonData> | undefined;
@@ -10,7 +10,8 @@ export interface DataSourceLogoProps {
 
 export function DataSourceLogo(props: DataSourceLogoProps) {
   const { dataSource } = props;
-  const styles = useStyles2(getStyles);
+  const theme = useTheme2();
+  const styles = getStyles(theme, dataSource?.meta.builtIn);
 
   if (!dataSource) {
     return DataSourceLogoPlaceHolder();
@@ -30,11 +31,12 @@ export function DataSourceLogoPlaceHolder() {
   return <div className={styles.pickerDSLogo}></div>;
 }
 
-function getStyles(theme: GrafanaTheme2) {
+function getStyles(theme: GrafanaTheme2, builtIn = false) {
   return {
     pickerDSLogo: css`
       height: 20px;
       width: 20px;
+      filter: invert(${builtIn && theme.isLight ? 1 : 0});
     `,
   };
 }