Fix visibility of VS Code and DevTools icons in dark mode (#12366)

On the pages https://docs.flutter.dev/tools/vs-code#advanced-debugging
and
https://docs.flutter.dev/tools/devtools/inspector#debugging-layout-issues-visually,
the icons are not properly visible in dark mode. Added some css to make
it visible in both dark and light mode.

Fixes #12365 

**Before:**
<img width="400" alt="Screenshot 2025-08-28 at 12 53 11 PM"
src="https://github.com/user-attachments/assets/f661892d-dfb4-42fb-b0d1-d5380fab5938"
/>
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/e4f91f9c-e542-4e02-9d58-44a2988e9300"
/>
---
**After:**
<img width="500" alt="Screenshot 2025-08-28 at 5 51 11 PM"
src="https://github.com/user-attachments/assets/ef0e9fa6-1b4b-49f8-a673-e672dfe06cfe"
/>
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/e1c23e85-2cd5-4f7a-908c-00b960ec6994"
/>
_PS: No changes have been made for the light theme_

Author: dixita0607

src/_sass/components/_icons.scss

@@ -0,0 +1,5 @@
+.theme-icon {
+  @at-root body.dark-mode & {
+    filter: invert(1) brightness(0.8);
+  }
+}

src/_sass/site.scss

@@ -23,6 +23,7 @@
 @use 'components/expansion-list';
 @use 'components/footer';
 @use 'components/header';
+@use 'components/icons';
 @use 'components/misc';
 @use 'components/next-prev-nav';
 @use 'components/os-selector';

src/content/tools/devtools/inspector.md

@@ -41,35 +41,35 @@ The following is a guide to the features available in the
 inspector's toolbar. When space is limited, the icon is
 used as the visual version of the label.
 
-![Select widget mode button](/assets/images/docs/tools/devtools/select-widget-mode-button.png){:width="20px"}
+![Select widget mode button](/assets/images/docs/tools/devtools/select-widget-mode-button.png)
 **Select widget mode**
 : Enable this button in order to select
   a widget on the device to inspect it. To learn more,
   check out [Inspecting a widget](#inspecting-a-widget).
 
-![Show implementation widgets button](/assets/images/docs/tools/devtools/show-implementation-widgets-button.png){:width="20px"}
+![Show implementation widgets button](/assets/images/docs/tools/devtools/show-implementation-widgets-button.png)
 **Show implementation widgets**
 : Enable this button in to show implementation widgets in the widget tree. To learn more,
   check out [Use the Widget Tree](#use-the-widget-tree).
 
-![Refresh tree icon](/assets/images/docs/tools/devtools/refresh-tree-icon.png){:width="20px"} **Refresh tree**
+![Refresh tree icon](/assets/images/docs/tools/devtools/refresh-tree-icon.png){:.theme-icon width="20px"} **Refresh tree**
 : Reload the current widget info.
 
-![Slow animations icon](/assets/images/docs/tools/devtools/slow-animations-icon.png){:width="20px"} **[Slow animations][]**
+![Slow animations icon](/assets/images/docs/tools/devtools/slow-animations-icon.png){:.theme-icon width="20px"} **[Slow animations][]**
 : Run animations 5 times slower to help fine-tune them.
 
-![Show guidelines mode icon](/assets/images/docs/tools/devtools/debug-paint-mode-icon.png){:width="20px"} **[Show guidelines][]**
+![Show guidelines mode icon](/assets/images/docs/tools/devtools/debug-paint-mode-icon.png){:.theme-icon width="20px"} **[Show guidelines][]**
 : Overlay guidelines to assist with fixing layout issues.
 
-![Show baselines icon](/assets/images/docs/tools/devtools/paint-baselines-icon.png){:width="20px"} **[Show baselines][]**
+![Show baselines icon](/assets/images/docs/tools/devtools/paint-baselines-icon.png){:.theme-icon width="20px"} **[Show baselines][]**
 : Show baselines, which are used for aligning text.
   Can be useful for checking if text is aligned.
 
-![Highlight repaints icon](/assets/images/docs/tools/devtools/repaint-rainbow-icon.png){:width="20px"} **[Highlight repaints][]**
+![Highlight repaints icon](/assets/images/docs/tools/devtools/repaint-rainbow-icon.png){:.theme-icon width="20px"} **[Highlight repaints][]**
 : Show borders that change color when elements repaint.
   Useful for finding unnecessary repaints.
 
-![Highlight oversized images icon](/assets/images/docs/tools/devtools/invert_oversized_images_icon.png){:width="20px"} **[Highlight oversized images][]**
+![Highlight oversized images icon](/assets/images/docs/tools/devtools/invert_oversized_images_icon.png){:.theme-icon width="20px"} **[Highlight oversized images][]**
 : Highlights images that are using too much memory
   by inverting colors and flipping them.
 

src/content/tools/vs-code.md

@@ -267,13 +267,13 @@ several additional debugging commands are added to the
 When space is limited, the icon is used as the visual
 version of the label.
 
-**Toggle Baseline Painting** ![Baseline painting icon](/assets/images/docs/tools/devtools/paint-baselines-icon.png){:width="20px"}
+**Toggle Baseline Painting** ![Baseline painting icon](/assets/images/docs/tools/devtools/paint-baselines-icon.png){:.theme-icon width="20px"}
 : Causes each RenderBox to paint a line at each of its baselines.
 
-**Toggle Repaint Rainbow** ![Repaint rainbow icon](/assets/images/docs/tools/devtools/repaint-rainbow-icon.png){:width="20px"}
+**Toggle Repaint Rainbow** ![Repaint rainbow icon](/assets/images/docs/tools/devtools/repaint-rainbow-icon.png){:.theme-icon width="20px"}
 : Shows rotating colors on layers when repainting.
 
-**Toggle Slow Animations** ![Slow animations icon](/assets/images/docs/tools/devtools/slow-animations-icon.png){:width="20px"}
+**Toggle Slow Animations** ![Slow animations icon](/assets/images/docs/tools/devtools/slow-animations-icon.png){:.theme-icon width="20px"}
 : Slows down animations to enable visual inspection.
 
 **Toggle Debug Mode Banner** ![Debug mode banner icon](/assets/images/docs/tools/devtools/debug-mode-banner-icon.png){:width="20px"}