added toggle switch

src/_data/catalog/widgets.json

@@ -415,13 +415,15 @@
   },
   {
     "name": "Common Buttons",
-    "description": "Buttons help people take action, such as sending an email, sharing a document, or liking a comment.",
+    "description": "<b>Hover for Dark mode</b><br /><br />Buttons help people take action, such as sending an email, sharing a document, or liking a comment.",
     "categories": [],
     "subcategories": [
       "Actions"
     ],
     "link": "https://api.flutter.dev/flutter/material/ButtonStyle-class.html",
-    "image": "<img alt='' src='/assets/images/docs/widget-catalog/material-3-buttons.png'>"
+    "image": "/assets/images/docs/widget-catalog/material-3-buttons.png",
+    "darkimage": "/assets/images/docs/widget-catalog/material-3-buttons-dark.png'>",
+    "hoverimage": "<img alt='' src='/assets/images/docs/widget-catalog/material-3-buttons-dark.png'>"
   },
   {
     "name": "ConstrainedBox",
@@ -985,13 +987,14 @@
   },
   {
     "name": "Floating Action Button",
-    "description": "The FAB represents the most important action on a screen. It puts key actions within reach.",
+    "description": "<b>Hover for material.io-imagery</b><br /><br />The FAB represents the most important action on a screen. It puts key actions within reach.",
     "categories": [],
     "subcategories": [
       "Actions"
     ],
     "link": "https://api.flutter.dev/flutter/material/FloatingActionButton/FloatingActionButton.html",
-    "image": "<img alt='' src='/assets/images/docs/widget-catalog/material-3-floating-action-button.png'>"
+    "image": "<img alt='' src='/assets/images/docs/widget-catalog/material-3-floating-action-button.png'>",
+    "hoverimage": "<img alt='' src='/assets/images/docs/widget-catalog/material-3-floating-action-button-hover.png'>"
   },
   {
     "name": "FloatingActionButton",

src/_includes/docs/catalogpage-material-3.html

@@ -0,0 +1,96 @@
+<script>
+    var isLightMode = true;
+
+    function flipBrightness() {
+        isLightMode = !isLightMode;
+        const imgElements = document.getElementsByClassName("m3-img");
+        console.log(imgElements.length);
+
+        // Loop through each img element and replace its src with the appropriate light/dark version.
+        Array.from(imgElements).forEach((img) => {
+            const currentSrc = img.getAttribute("src");
+            const splitSrc = currentSrc.split(".");
+            const fileExtension = splitSrc.pop();
+            let fileName = splitSrc.join(".");
+            const textLabel = document.getElementsByClassName("switch label")[0];
+
+            if (!isLightMode) {
+            fileName += "-dark";
+            textLabel.innerHTML = 'Tap to view in light mode';
+            } else {
+            fileName = fileName.replace("-dark", "");
+            textLabel.innerHTML = 'Tap to view in dark mode';
+
+            }
+
+            const newSrc = fileName + "." + fileExtension;
+            img.setAttribute("src", newSrc);
+        });
+    }
+
+</script>
+
+{% for section in site.data.catalog.index %}
+    {% if section.name == include.category %}
+        {% assign category = section %}
+        {% break %}
+    {% endif %}
+{% endfor %}
+
+<div class="catalog">
+    <div class="category-description">
+        <p>{{category.description}}</p>
+    </div>
+    {% if category.subcategories and category.subcategories.size != 0 -%}
+    <ul>
+        {% for sub in category.subcategories -%}
+            <li><a href="#{{sub.name}}">{{sub.name}}</a></li>
+        {% endfor -%}
+    </ul>
+    {% endif -%}
+
+    <p>
+        See more widgets in the <a href="{{site.url}}/development/ui/widgets">widget catalog</a>.
+    </p>
+
+    <label class="switch">
+        <input type="checkbox" checked="true"  onclick="flipBrightness()">
+        <span class="slider round"></span>
+    </label>
+
+    <span class="switch label">
+        Tap to view in dark mode
+    </span>
+
+    {% assign components = site.data.catalog.widgets | where_exp:"comp","comp.categories contains include.category" -%}
+
+    {% if category.subcategories and category.subcategories.size != 0 -%}
+    {% for sub in category.subcategories -%}
+        {% assign components = site.data.catalog.widgets | where_exp:"comp","comp.subcategories contains sub.name" -%}
+        {% if components.size != 0 -%}
+        <h2 id="{{sub.name}}">{{sub.name}}</h2>
+        <div class="card-deck card-deck--responsive">
+            {% for comp in components -%}
+                <div class="card">
+                    <a href="{{comp.link}}">
+                        <div class="card-image-holder-material-3">
+                            <img class="m3-img" src="{{ comp.image }}" alt = ''/>
+                            <div class="card-image-material-3-hover">
+                                {{comp.hoverimage}}
+                            </div>
+                        </div>
+
+                    </a>
+                    <div class="card-body">
+                        <a href="{{comp.link}}"><header class="card-title">{{comp.name}}</header></a>
+                        <p class="card-text">{{ comp.description | truncatewords: 25 }}</p>
+                    </div>
+                </div>
+            {% endfor -%}
+        </div>
+        {% endif -%}
+    {% endfor -%}
+    {% endif -%}
+
+    <p>See more widgets in the <a href="{{site.url}}/development/ui/widgets">widget catalog</a>.</p>
+</div>

src/_includes/docs/catalogpage.html

@@ -48,15 +48,9 @@ <h2 id="{{sub.name}}">{{sub.name}}</h2>
             {% for comp in components -%}
                 <div class="card">
                     <a href="{{comp.link}}">
-                        {% if comp.image contains "material-3" -%}
-                            <div class="card-image-holder-material-3">
-                                {{comp.image}}
-                            </div>
-                        {% else -%}
-                            <div class="card-image-holder">
-                                {{comp.image}}
-                            </div>
-                        {% endif -%}
+                        <div class="card-image-holder">
+                            {{comp.image}}
+                        </div>
                     </a>
                     <div class="card-body">
                         <a href="{{comp.link}}"><header class="card-title">{{comp.name}}</header></a>

src/_sass/base/_base.scss

@@ -80,6 +80,23 @@ dd {
   }
 }
 
+.card-image-material-3-hover {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  opacity: 0;
+  transition: .5s ease;
+}
+
+.card-image-holder-material-3:hover .card-image-material-3-hover {
+  opacity: 1;
+}
+
 .happy-paths-image-holder {
   align-items: left;
   display: flex;
@@ -218,3 +235,75 @@ blockquote {
     text-align: center;
   }
 }
+
+.switch {
+  position: relative;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch.label {
+  top: 5px;
+  left: 10px;
+  position: relative;
+}
+
+.switch.container {
+  display: inline-block;
+
+  background-color: red;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $site-color-light-grey;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: $flutter-color-blue-500;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px $flutter-color-blue-500;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+

src/development/ui/widgets/material3.md

@@ -5,4 +5,4 @@ description: >
   A catalog of Flutter's widgets implementing Material 3 design guidelines.
 ---
 
-{% include docs/catalogpage.html category="Material 3 Components" %}
+{% include docs/catalogpage-material-3.html category="Material 3 Components" %}