From c74af430a608a8feb75f49308a6c215625cafdc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 5 Dec 2025 08:48:39 +0100
Subject: [PATCH] Gauge: Only show spotlight in dark themes (#114524)

* Gauge: Only show spotlight in dark themes

* Update
---
 .../components/RadialGauge/RadialGauge.tsx    |  2 +-
 .../plugins/panel/radialbar/EffectsEditor.tsx | 23 +++++++++++--------
 public/locales/en-US/grafana.json             |  3 ++-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx
index 3dcc25e8875..96e8b0f50f3 100644
--- a/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialGauge.tsx
@@ -135,7 +135,7 @@ export function RadialGauge(props: RadialGaugeProps) {
       displayProcessor,
     });
 
-    if (spotlight) {
+    if (spotlight && theme.isDark) {
       defs.push(
         <SpotlightGradient
           key={spotlightGradientId}
diff --git a/public/app/plugins/panel/radialbar/EffectsEditor.tsx b/public/app/plugins/panel/radialbar/EffectsEditor.tsx
index 91805596a79..0794207f35a 100644
--- a/public/app/plugins/panel/radialbar/EffectsEditor.tsx
+++ b/public/app/plugins/panel/radialbar/EffectsEditor.tsx
@@ -1,6 +1,6 @@
 import { StandardEditorProps } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Stack, Switch, Label } from '@grafana/ui';
+import { Stack, Switch, Label, Tooltip } from '@grafana/ui';
 
 import { GaugePanelEffects } from './panelcfg.gen';
 
@@ -36,15 +36,18 @@ export function EffectsEditor(props: StandardEditorProps<GaugePanelEffects>) {
         />
         <Label htmlFor="radialbar-center-glow">{t('radialbar.config.effects.center-glow', 'Center glow')}</Label>
       </Stack>
-      <Stack>
-        <Switch
-          id="radialbar-spotlight"
-          label={t('radialbar.config.effects.spotlight', 'Spotlight')}
-          value={!!props.value?.spotlight}
-          onChange={(e) => props.onChange({ ...props.value, spotlight: e.currentTarget.checked })}
-        />
-        <Label htmlFor="radialbar-spotlight">{t('radialbar.config.effects.spotlight', 'Spotlight')}</Label>
-      </Stack>
+      <Tooltip content={t('radialbar.config.effects.spotlight-tooltip', 'Only visible in dark themes')}>
+        <Stack>
+          <Switch
+            id="radialbar-spotlight"
+            label={t('radialbar.config.effects.spotlight', 'Spotlight')}
+            value={!!props.value?.spotlight}
+            onChange={(e) => props.onChange({ ...props.value, spotlight: e.currentTarget.checked })}
+          />
+
+          <Label htmlFor="radialbar-spotlight">{t('radialbar.config.effects.spotlight', 'Spotlight')}</Label>
+        </Stack>
+      </Tooltip>
     </Stack>
   );
 }
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 81c9583040e..6ee3b9e50e6 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -12396,7 +12396,8 @@
         "bar-glow": "Bar glow",
         "center-glow": "Center glow",
         "rounded-bars": "Rounded bars",
-        "spotlight": "Spotlight"
+        "spotlight": "Spotlight",
+        "spotlight-tooltip": "Only visible in dark themes"
       },
       "gradient": "Gradient",
       "gradient-auto": "Auto",