Add primary color to buttons that are active/selected

plugins/user-settings/src/components/FeatureFlagsItem.tsx

@@ -45,7 +45,7 @@ export const FlagItem = ({ flag, enabled, toggleHandler }: Props) => (
         onChange={() => toggleHandler(flag.name)}
       >
         <Tooltip placement="top" arrow title={enabled ? 'Disable' : 'Enable'}>
-          <CheckIcon />
+          <CheckIcon color={enabled ? 'primary' : undefined} />
         </Tooltip>
       </ToggleButton>
     </ListItemSecondaryAction>

plugins/user-settings/src/components/PinButton.tsx

@@ -37,7 +37,7 @@ export const SidebarPinButton = () => {
       arrow
       title={`${isPinned ? 'Unpin' : 'Pin'} Sidebar`}
     >
-      {isPinned ? <LockIcon /> : <LockOpenIcon />}
+      {isPinned ? <LockIcon color="primary" /> : <LockOpenIcon />}
     </Tooltip>
   );
 

plugins/user-settings/src/components/ProviderSettingsItem.tsx

@@ -77,15 +77,9 @@ export const ProviderSettingsItem: FC<OAuthProviderSidebarProps> = ({
           selected={signedIn}
           onChange={() => (signedIn ? api.signOut() : api.signIn())}
         >
-          <Tooltip
-            placement="top"
-            arrow
-            title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}
-          >
-            <PowerButton />
-          </Tooltip>
-        </ToggleButton>
-      </ListItemSecondaryAction>
-    </ListItem>
-  );
-};
+          <PowerButton color={signedIn ? 'primary' : undefined} />
+        </Tooltip>
+      </ToggleButton>
+    </ListItemSecondaryAction>
+  </ListItem>
+);

plugins/user-settings/src/components/ThemeToggle.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { cloneElement } from 'react';
 import { useObservable } from 'react-use';
 import AutoIcon from '@material-ui/icons/BrightnessAuto';
-import { appThemeApiRef, useApi } from '@backstage/core';
+import { AppTheme, appThemeApiRef, useApi } from '@backstage/core';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import {
@@ -47,6 +47,23 @@ export const SidebarThemeToggle = () => {
     }
   };
 
+  const ThemeIcon = ({ theme }: { theme: AppTheme }) => {
+    const themeIcon = themeIds.find(t => t.id === theme.id)?.icon;
+    const icon = themeIcon ? (
+      cloneElement(themeIcon, {
+        color: themeId === theme.id ? 'primary' : undefined,
+      })
+    ) : (
+      <AutoIcon color={themeId === theme.id ? 'primary' : undefined} />
+    );
+
+    return (
+      <Tooltip placement="top" arrow title={`Select ${theme.variant} theme`}>
+        {icon}
+      </Tooltip>
+    );
+  };
+
   return (
     <ListItem>
       <ListItemText primary="Theme" secondary="Change the theme mode" />
@@ -59,18 +76,12 @@ export const SidebarThemeToggle = () => {
         >
           {themeIds.map(theme => (
             <ToggleButton key={theme.id} value={theme.variant}>
-              <Tooltip
-                placement="top"
-                arrow
-                title={`Select ${theme.variant} theme`}
-              >
-                {themeIds.find(t => t.id === theme.id)!.icon ?? <AutoIcon />}
-              </Tooltip>
+              <ThemeIcon theme={theme} />
             </ToggleButton>
           ))}
           <ToggleButton value="auto">
             <Tooltip placement="top" arrow title="Select auto theme">
-              <AutoIcon />
+              <AutoIcon color={themeId === undefined ? 'primary' : undefined} />
             </Tooltip>
           </ToggleButton>
         </ToggleButtonGroup>