diff --git a/docs/rgb-leds.mdx b/docs/rgb-leds.mdx
index b906d6a..20bdf91 100644
--- a/docs/rgb-leds.mdx
+++ b/docs/rgb-leds.mdx
@@ -10,6 +10,7 @@ description: "How to use addressable RGB LEDs to your controller. Hotkeys and an
import InputLabelSelector, {
Hotkey,
} from "@site/src/components/LabelSelector.tsx";
+import { ColorBlock } from "@site/src/components/LEDColors";
# RGB LEDs
@@ -21,38 +22,105 @@ Select the button labels to be displayed in the usage guide:
GP2040-CE requires that addressable RGB LEDs be used for nearly all LED functions.
-The exception to this are [Player LEDs](./add-ons/player-number.mdx), which can use pulse width modulation (PWM) to vary the brightness of the LEDs.
+The exception to this are [Player LEDs](./add-ons/player-number.mdx), which can use pulse width modulation (PWM) to vary
+the brightness of the LEDs.
## RGB LED Hotkeys
-| Hotkey | Description |
-| -------------------------------------- | ---------------------- |
-| | Next Animation |
-| | Previous Animation |
-| | Brightness Up |
-| | Brightness Down |
-| | LED Parameter Up |
-| | LED Parameter Down |
-| | Pressed Parameter Up |
-| | Pressed Parameter Down |
+| Hotkey | Description |
+| -------------------------------------- | -------------------------- |
+| | Next Animation |
+| | Previous Animation |
+| | Brightness Up |
+| | Brightness Down |
+| | LED Parameter Up |
+| | LED Parameter Down |
+| | Pressed Parameter Up |
+| | Pressed Parameter Down |
+| | Decrease LED Fade Duration |
+| | Increase LED Fade Duration |
:::note
-The `LED Parameter` hotkeys may affect color, speed or theme depending on the current RGB LED animation. The `Pressed Parameter` options will change the colors/effects for the on-press animations.
+The `LED Parameter` hotkeys may affect color, speed or theme depending on the current RGB LED animation.
+
+The `Pressed Parameter` options will change the colors/effects for the on-press animations.
+
+:::
+
+### RGB LED Animations
+
+Using these hotkeys will cycle through the animation modes. The following animations are available:
+
+| Name | Description |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Rainbow Chase | A fading, rainbow cycling lines travels across the LED chain |
+| Static Theme | Set the LEDs to a pre-defined static theme |
+| Custom Theme | Set the LEDs to a custom theme set up in [WebConfig - Custom LED Theme](./web-configurator/menu-pages/06-custom-led-theme.mdx) |
+| Static Color | Sets all LEDs to the same color |
+| Rainbow Cycle | All LEDs cycle through the color wheel displaying the same color |
+
+### RGB LED Brightness
+
+These hotkeys will increase or decrease the brightness of the controller LEDs based on the `Brightness Steps` and
+`Max Brightness` settings in [LED Configuration](/docs/web-configurator/menu-pages/05-led-configuration.mdx#rgb-led-configuration).
+
+### RGB LED Parameter
+
+Depending on the specific animation, changing the LED parameter will result in different behavior.
+
+| Name | LED Parameter |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Rainbow Chase | Adjust animation speed |
+| Static Theme | Cycle through themes, see [RGB LED Static Themes](#rgb-led-static-themes) for details. |
+| Static Color | Cycle through colors: Black, White, Red, Orange, Yellow, Lime Green, Green, Seafoam, Aqua, Sky Blue, Blue, Purple, Pink, Magenta |
+| Rainbow Cycle | Adjust animation speed |
+
+:::note Custom LED Theme
+
+When using a custom LED theme, these hotkeys will not affect the settings in any other animation mode.
+
+:::
+
+### RGB LED Pressed Parameter
+
+
+
+Changes the color the LED changes to when the button is pressed
+
+Cycle through colors: Black, White, Red,
+Orange, Yellow, Lime Green,
+Green, Seafoam, Aqua,
+Sky Blue, Blue, Purple,
+Pink, Magenta
+
+:::note Custom LED Theme
+
+When using a custom LED theme, these hotkeys will not affect the settings in any other animation mode.
:::
-## RGB LED Animations
+### RGB LED Fade Duration
-The following animations are available:
+Using these hotkeys will affect the duration for the fade animation on the LED after a button press.
+
+:::note
-| Name | Description | LED Parameter |
-| ------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| Off | Turn off per-button RGB LEDs | - |
-| Static Color | Sets all LEDs to the same color | Cycle through colors: _Red_, _Orange_, _Yellow_, _Lime Green_, _Green_, _Seafoam_, _Aqua_, _Sky Blue_, _Blue_, _Purple_, _Pink_, _Magenta_ |
-| Rainbow Cycle | All LEDs cycle through the color wheel displaying the same color | Adjust animation speed |
-| Rainbow Chase | A fading, rainbow cycling lines travels across the LED chain | Adjust animation speed |
-| Static Theme | Set the LEDs to a pre-defined static theme | Cycle through themes, see [RGB LED Static Themes](#rgb-led-static-themes) for details. |
+This duration is shared across all themes and buttons and cannot be set individually per theme nor per button.
+
+:::
+
+| Parameter | Description |
+| ---------------- | ----------- |
+| Default Duration | 500ms |
+| Duration Range | 0ms - 500ms |
+| Hotkey Increment | 500ms |
+
+:::tip
+
+If you want to disable the Fade animation, set the duration to 0ms.
+
+:::
## RGB LED Static Themes
diff --git a/src/components/LEDColors.tsx b/src/components/LEDColors.tsx
new file mode 100644
index 0000000..ea940d6
--- /dev/null
+++ b/src/components/LEDColors.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+
+// Convert a number to hex
+const intToHex = (d) => {
+ return ("0" + Number(d).toString(16)).slice(-2).toLowerCase();
+};
+
+// Takes an array of 8-bit RGB values and returns the hex value
+const rgbArrayToHex = (values) => {
+ let [r, g, b] = values;
+
+ if (!(r >= 0 && r <= 255)) r = 0;
+ if (!(g >= 0 && g <= 255)) g = 0;
+ if (!(b >= 0 && b <= 255)) r = 0;
+
+ return `#${intToHex(r)}${intToHex(g)}${intToHex(b)}`;
+};
+
+const Black = rgbArrayToHex([0, 0, 0]);
+const White = rgbArrayToHex([255, 255, 255]);
+const Red = rgbArrayToHex([255, 0, 0]);
+const Orange = rgbArrayToHex([255, 128, 0]);
+const Yellow = rgbArrayToHex([255, 255, 0]);
+const LimeGreen = rgbArrayToHex([128, 255, 0]);
+const Green = rgbArrayToHex([0, 255, 0]);
+const Seafoam = rgbArrayToHex([0, 255, 128]);
+const Aqua = rgbArrayToHex([0, 255, 255]);
+const SkyBlue = rgbArrayToHex([0, 128, 255]);
+const Blue = rgbArrayToHex([0, 0, 255]);
+const Purple = rgbArrayToHex([128, 0, 255]);
+const Pink = rgbArrayToHex([255, 0, 255]);
+const Magenta = rgbArrayToHex([255, 0, 128]);
+
+const LEDColors = [
+ { name: "Black", value: Black },
+ { name: "White", value: White },
+ { name: "Red", value: Red },
+ { name: "Orange", value: Orange },
+ { name: "Yellow", value: Yellow },
+ { name: "LimeGreen", value: LimeGreen },
+ { name: "Green", value: Green },
+ { name: "Seafoam", value: Seafoam },
+ { name: "Aqua", value: Aqua },
+ { name: "SkyBlue", value: SkyBlue },
+ { name: "Blue", value: Blue },
+ { name: "Purple", value: Purple },
+ { name: "Pink", value: Pink },
+ { name: "Magenta", value: Magenta },
+];
+
+export function ColorBlock({ color }) {
+ let cleanColor = color.trim().split(" ").join("");
+ try {
+ let colorValue = LEDColors.find(
+ (ledColor) => ledColor.name.toLowerCase() === cleanColor.toLowerCase()
+ ).value;
+
+ return (
+
+ ■
+
+ );
+ } catch (error) {
+ return (
+
+ ■
+
+ );
+ }
+}