Gauge: Only show spotlight in dark themes (#114524)

* Gauge: Only show spotlight in dark themes

* Update

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}

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>
   );
 }

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",