diff --git a/README.md b/README.md
index 57a4b20..6fa2570 100644
--- a/README.md
+++ b/README.md
@@ -43,3 +43,4 @@ Afterwards, you will have to restart Kando, and then you can select the new them
| [**Nether Labels**](./themes/nether-labels/)
+
diff --git a/themes/alpha-neon/REUSE.toml b/themes/alpha-neon/REUSE.toml
new file mode 100644
index 0000000..e73b1df
--- /dev/null
+++ b/themes/alpha-neon/REUSE.toml
@@ -0,0 +1,28 @@
+# SPDX-FileCopyrightText: SPDX-FileCopyrightText: Discord user digitalart3d
+# SPDX-License-Identifier: MIT
+
+version = 1
+
+[[annotations]]
+path = ["*.jpg", "*.png"]
+precedence = "aggregate"
+SPDX-FileCopyrightText = "NeighNeighNeigh Discord user digitalart3d"
+SPDX-License-Identifier = "CC-BY-4.0"
+
+[[annotations]]
+path = ["presets/Dark.json"]
+precedence = "override"
+SPDX-FileCopyrightText = "Discord user digitalart3d"
+SPDX-License-Identifier = "CC-BY-4.0"
+
+[[annotations]]
+path = ["presets/Sterelia.json"]
+precedence = "override"
+SPDX-FileCopyrightText = "Discord user Renshu"
+SPDX-License-Identifier = "CC-BY-4.0"
+
+[[annotations]]
+path = ["banner.png"]
+precedence = "override"
+SPDX-FileCopyrightText = "Elfi Ox "
+SPDX-License-Identifier = "CC0-1.0"
diff --git a/themes/alpha-neon/assets/arrow.svg b/themes/alpha-neon/assets/arrow.svg
new file mode 100644
index 0000000..530eb22
--- /dev/null
+++ b/themes/alpha-neon/assets/arrow.svg
@@ -0,0 +1,302 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+
diff --git a/themes/alpha-neon/assets/ring.svg b/themes/alpha-neon/assets/ring.svg
new file mode 100644
index 0000000..2e7ac38
--- /dev/null
+++ b/themes/alpha-neon/assets/ring.svg
@@ -0,0 +1,197 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ image/svg+xml
+
+
+
+
diff --git a/themes/alpha-neon/banner.png b/themes/alpha-neon/banner.png
new file mode 100644
index 0000000..a049a14
Binary files /dev/null and b/themes/alpha-neon/banner.png differ
diff --git a/themes/alpha-neon/presets/Dark.json b/themes/alpha-neon/presets/Dark.json
new file mode 100644
index 0000000..b22273a
--- /dev/null
+++ b/themes/alpha-neon/presets/Dark.json
@@ -0,0 +1,16 @@
+{
+ "colors": {
+ "Outer Ring": "rgb(255 255 255 / 0.1)",
+ "Inner Ring": "rgb(255 255 255 / 0.5)",
+ "Inner Ring〔active〕": "rgb(255 255 255 / 0.1)",
+ "Arrow": "rgb(220 220 220)",
+ "Connector": "rgb(255 255 255 / 0.6)",
+ "Separator": "rgb(255 255 255 / 0.3)",
+ "Wedge": "rgb(255 255 255 / 0.12)",
+ "Center Circle": "rgb(255 255 255 / 0.08)",
+ "Items Circles": "rgba(0, 0, 0, 0.85)",
+ "Items Circles Border": "rgba(255, 255, 255, 0.5)",
+ "Items Circles Border〔hovered〕": "rgba(255, 255, 255, 0.8)",
+ "Items Circles Clicked": "rgba(255, 255, 255, 0.2)"
+ }
+}
diff --git a/themes/alpha-neon/presets/Sterelia.json b/themes/alpha-neon/presets/Sterelia.json
new file mode 100644
index 0000000..a3cb571
--- /dev/null
+++ b/themes/alpha-neon/presets/Sterelia.json
@@ -0,0 +1,16 @@
+{
+ "colors": {
+ "Outer Ring": "rgb(255 127 77 / 0.9)",
+ "Inner Ring": "rgb(255 162 77 / 0.9)",
+ "Inner Ring〔active〕": "rgb(255 217 112 / 0.43)",
+ "Arrow": "rgb(159 81 206)",
+ "Connector": "rgb(152 67 251 / 0.6)",
+ "Separator": "rgb(242 67 244 / 0.3)",
+ "Wedge": "rgb(158 74 255 / 0.3)",
+ "Center Circle": "rgb(162 20 255 / 0.3)",
+ "Items Circles": "rgb(26 11 56 / 0.42)",
+ "Items Circles Border": "rgb(255 255 255 / 0.13)",
+ "Items Circles Border〔hovered〕": "rgb(255 181 33 / 0.69)",
+ "Items Circles Clicked": "rgb(255 0 231 / 0.2)"
+ }
+}
diff --git a/themes/alpha-neon/preview.jpg b/themes/alpha-neon/preview.jpg
new file mode 100644
index 0000000..6f19b81
Binary files /dev/null and b/themes/alpha-neon/preview.jpg differ
diff --git a/themes/alpha-neon/theme.css b/themes/alpha-neon/theme.css
new file mode 100644
index 0000000..fc1b4b9
--- /dev/null
+++ b/themes/alpha-neon/theme.css
@@ -0,0 +1,283 @@
+/*//////////////////////////////////////////////////////////////////////////////////////*/
+/* _ _ ____ _ _ ___ ____ */
+/* |_/ |__| |\ | | \ | | This file belongs to Kando, the cross-platform */
+/* | \_ | | | \| |__/ |__| pie menu. Read more on github.com/kando-menu/kando */
+/* */
+/*//////////////////////////////////////////////////////////////////////////////////////*/
+
+/* SPDX-FileCopyrightText: Discord user digitalart3d */
+/* SPDX-FileCopyrightText: Elfi Ox */
+/* SPDX-License-Identifier: CC-BY-4.0 */
+
+@keyframes rotate {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.menu-node {
+ --child-distance: 100px;
+ --grandchild-distance: 16px;
+ --grandchild-size: 15px;
+ --center-size: 100px;
+ --child-size: 50px;
+ --connector-width: 5px;
+ --menu-transition: all 250ms cubic-bezier(0.775, 1.325, 0.535, 1);
+ --opacity-transition: opacity 250ms ease;
+
+ transition: var(--menu-transition);
+
+ /* Positioning ---------------------------------------------------------------------- */
+
+ /* This theme does not render grandchild items. Children are displayed around the
+ active node. */
+ &.child {
+ transform: translate(calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-x)),
+ calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-y)));
+ }
+
+ /* If there is a hovered child node, we scale all children up a bit to create a cool
+ zoom effect. The hovered child itself is scaled up even more. */
+ &.active:has(>.hovered)>.child {
+ transform: scale(calc(1.5 - pow(var(--angle-diff) / 180, 0.25) * 0.5)) translate(calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-x)),
+ calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-y)));
+
+ &.hovered {
+ transform: scale(1.5) translate(calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-x)),
+ calc(max(var(--child-distance), 10px * var(--sibling-count)) * var(--dir-y)));
+ }
+
+ /* Grandchild items are hidden with this theme, but we have to position them
+ nevertheless to allow for smooth transitions when showing or hiding them. */
+ &.grandchild {
+ transform: translate(calc(var(--grandchild-distance) * var(--dir-x)),
+ calc(var(--grandchild-distance) * var(--dir-y)));
+ }
+ }
+
+
+ /* Theme Layers --------------------------------------------------------------------- */
+
+ /* We hide all icons by default. They will be shown further down in this file for the
+ center item and the child items. */
+ .icon-container {
+ opacity: 0;
+ color: white;
+ transition: var(--opacity-transition);
+ filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 1)) /*-- ICONS DROP SHADOW --*/
+ }
+
+ .arrow-layer,
+ .ring-slow-layer,
+ .ring-slow-layer::before,
+ .ring-fast-layer,
+ .ring-fast-layer::before,
+ .icon-layer {
+ position: absolute;
+ transition: var(--menu-transition);
+ }
+
+ /* The active menu item is the center of the menu. */
+ &.active>.arrow-layer,
+ &.active>.ring-slow-layer,
+ &.active>.ring-fast-layer,
+ &.active>.icon-layer {
+ top: calc(-1 * var(--center-size) / 2);
+ left: calc(-1 * var(--center-size) / 2);
+ width: var(--center-size);
+ height: var(--center-size);
+ }
+
+ &.active>.ring-slow-layer::before,
+ &.active>.ring-fast-layer::before {
+ top: 0;
+ left: 0;
+ width: var(--center-size);
+ height: var(--center-size);
+ }
+
+ .icon-layer::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background: var(--Items Circles);
+ border: 2px solid var(--Items Circles Border);
+ border-radius: 50%;
+ box-shadow: 0 0 15px rgb(from var(--Items Circles Border) r g b / calc(alpha*0.3));
+ }
+
+.arrow-layer {
+ mask-image: url("assets/arrow.svg");
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ background-color: var(--Arrow); /* ----- ARROW COLOR VAR ------ */
+ transform: scale(1) rotate(var(--hovered-child-angle));
+ opacity: 0;
+}
+
+
+ &:has(.dragged)>.arrow-layer {
+ transform: scale(1.6) rotate(var(--pointer-angle));
+ transition: none;
+ }
+
+ .ring-slow-layer {
+ animation: rotate 10s linear infinite;
+ opacity: 1;
+
+ &::before {
+ content: '';
+ mask-image: url(assets/ring.svg);
+ background-color: var(--Inner Ring〔active〕); /*---- RING COLOR VARIABLE ----*/
+ }
+ }
+
+ .ring-fast-layer {
+ animation: rotate 2s linear infinite;
+ opacity: 0;
+ background-image: radial-gradient(circle, var(--Center Circle) 60%, transparent 70%);
+
+ &::before {
+ content: '';
+ mask-image: url(assets/ring.svg);
+ background-color: var(--Outer Ring); /*---- RING COLOR VAR ----*/
+
+ }
+ }
+
+ /* If the center item has a hovered child node, we scale it up and hide its icon. */
+ &.active:has(>.hovered)>.ring-fast-layer {
+ opacity: 1;
+
+ &::before {
+ transform: scale(2.0);
+ }
+ }
+
+ &.parent>.active:not(:has(.hovered))>.ring-slow-layer,
+ &.active.hovered>.ring-slow-layer {
+ opacity: 1;
+
+ &::before {
+ transform: scale(1.0);
+ background-color: var(--Inner Ring); /*---- RING COLOR VARIABLE ----*/
+ }
+ }
+
+ &.active:has(.hovered)>.arrow-layer {
+ opacity: 1;
+ transform: scale(1.6) rotate(var(--hovered-child-angle));
+ }
+
+ &.active:has(.hovered.dragged)>.arrow-layer {
+ transform: scale(1.6) rotate(var(--pointer-angle));
+ }
+
+ /* If the parent or a child node is clicked, we scale it down to normal size. */
+ &.parent.hovered.clicked>.icon-layer,
+ &.child.hovered.clicked>.icon-layer {
+ transform: scale(0.8);
+ }
+
+ /* Hover glow effect on child items */
+ &.child.hovered>.icon-layer::before {
+ box-shadow: 0 0 25px rgb(from var(--Items Circles Border〔hovered〕) r g b / calc(alpha*0.625));
+ border-color: var(--Items Circles Border〔hovered〕);
+ }
+
+ /* Click flash feedback */
+ &.child.clicked>.icon-layer::before {
+ background: var(--Items Circles Clicked);
+ }
+
+ /* Show the icons of the center, parent and child items. */
+ &.parent>.icon-layer>.icon-container,
+ &.child>.icon-layer>.icon-container {
+ opacity: 1;
+ }
+
+ /* Child items are displayed around the active node. The parent node of the active
+ node is displayed in a similar style. */
+ &.parent>.icon-layer,
+ &.child>.icon-layer {
+ top: calc(-1 * var(--child-size) / 2);
+ left: calc(-1 * var(--child-size) / 2);
+ width: var(--child-size);
+ height: var(--child-size);
+ }
+
+ /* Grandchild items are invisible. The sizing is required for transitions from and to
+ this state. */
+ &.grandchild>.icon-layer {
+ top: calc(-1 * var(--grandchild-size) / 2);
+ left: calc(-1 * var(--grandchild-size) / 2);
+ width: var(--grandchild-size);
+ height: var(--grandchild-size);
+ opacity: 0;
+ }
+
+ /* We disable any transition for dragged items. */
+ &.dragged {
+ transition: none;
+ }
+
+ /* Connectors ----------------------------------------------------------------------- */
+
+ .connector {
+ transition: var(--menu-transition);
+ height: var(--connector-width);
+ top: calc(-1 * var(--connector-width) / 2);
+ }
+
+ &:has(.dragged)>.connector {
+ transition: none;
+ }
+
+ .connector {
+ background: linear-gradient(to right, transparent 80px, var(--Connector) 50%, transparent calc(100% - 70px));
+ }
+}
+
+/* Center Text ------------------------------------------------------------------------ */
+
+.center-text {
+ color: white;
+ transition: var(--opacity-transition);
+ text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 22px;
+ overflow: visible;
+ font-family: monospace;
+}
+
+/* Selection Wedges ------------------------------------------------------------------- */
+
+.selection-wedges {
+ mask: radial-gradient(circle at var(--center-x) var(--center-y),
+ transparent 0%,
+ transparent 100px,
+ black 150px,
+ transparent 500px);
+
+ &.hovered {
+ background: conic-gradient(from calc(var(--start-angle)) at var(--center-x) var(--center-y),
+ var(--Wedge) calc(var(--end-angle) - var(--start-angle)),
+ transparent calc(var(--end-angle) - var(--start-angle)));
+ }
+}
+
+.wedge-separators {
+ .separator {
+ background: linear-gradient(to right, transparent 50px, var(--Separator) 100px, transparent 300px);
+ }
+}
\ No newline at end of file
diff --git a/themes/alpha-neon/theme.json5 b/themes/alpha-neon/theme.json5
new file mode 100644
index 0000000..e58000a
--- /dev/null
+++ b/themes/alpha-neon/theme.json5
@@ -0,0 +1,61 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+// _ _ ____ _ _ ___ ____ //
+// |_/ |__| |\ | | \ | | This file belongs to Kando, the cross-platform //
+// | \_ | | | \| |__/ |__| pie menu. Read more on github.com/kando-menu/kando //
+// //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// SPDX-FileCopyrightText: Discord user digitalart3d
+// SPDX-FileCopyrightText: Elfi Ox
+// SPDX-License-Identifier: CC-BY-4.0
+{
+ name: 'Alpha Neon',
+ author: 'AMINE | 3D ARTIST',
+ license: 'CC0-1.0',
+ themeVersion: '3.0',
+
+ // This theme was created for Kando's theme engine version 1. Kando will use this to
+ // check if the theme is compatible with the current version of Kando.
+ engineVersion: 1,
+
+ // When a menu is opened too close to a screen's edge, it is moved away from the edge
+ // by this amount of pixels.
+ maxMenuRadius: 160,
+
+ // The width at which the center text is wrapped.
+ centerTextWrapWidth: 95,
+
+ // This theme draws child items below their parent items.
+ drawChildrenBelow: true,
+
+ // Draw the circle segment of the hovered menu item.
+ drawWedgeSeparators: true,
+
+ // Draw the thin lines between adjacent menu items.
+ drawSelectionWedges: true,
+
+ // These colors can be configured by the user and are vailable in the CSS file as CSS
+ // variables. The default values are used if the user does not provide any values.
+ colors: {
+ 'Outer Ring': 'rgba(108, 255, 240, 0.9)',
+ 'Inner Ring': 'rgba(108, 255, 240, 0.9)',
+ 'Inner Ring〔active〕': 'rgba(108, 255, 240, 0)',
+ 'Arrow': 'rgba(164, 122, 255, 1)',
+ 'Connector': 'rgba(140, 128, 255, 1)',
+ 'Separator': 'rgba(140, 128, 255, 0.35)',
+ 'Wedge': 'rgba(94, 23, 207, 0.25)',
+ 'Center Circle': 'rgba(125, 51, 223, 0.18)',
+ 'Items Circles': 'rgba(0, 0, 0, 0)',
+ 'Items Circles Border': 'rgba(255, 255, 255, 0)',
+ 'Items Circles Border〔hovered〕': 'rgba(255, 255, 255, 0)',
+ 'Items Circles Clicked': 'rgba(255, 255, 255, 0)',
+ },
+
+ // This is a very complex theme with multiple layers.
+ layers: [
+ { class: 'ring-fast-layer', content: 'none' },
+ { class: 'ring-slow-layer', content: 'none' },
+ { class: 'icon-layer', content: 'icon' },
+ { class: 'arrow-layer', content: 'none' },
+ ],
+}
+