在陶瓦联机页面向非中国内地用户添加提示框 (#4869)

Fixes #4863

.github/workflows/gitee.yml

@@ -0,0 +1,21 @@
+name: Sync to Gitee
+
+on:
+  push
+
+jobs:
+  run:
+    if: ${{ github.repository_owner == 'HMCL-dev' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Mirror GitHub to Gitee
+        uses: Yikun/hub-mirror-action@v1.4
+        with:
+          src: github/HMCL-dev
+          dst: gitee/huanghongxun
+          static_list: 'HMCL'
+          force_update: true
+          debug: true
+          dst_key: ${{ secrets.GITEE_SYNC_BOT_PRIVATE_KEY }}
+          dst_token: ${{ secrets.GITEE_SYNC_BOT_TOKEN }}
+          cache_path: /github/workspace/hub-mirror-cache

.github/workflows/mirror.yml

@@ -1,32 +0,0 @@
-name: Mirror Repository
-
-on:
-  workflow_dispatch:
-  push:
-
-concurrency:
-  group: mirror-repository
-  cancel-in-progress: true
-
-jobs:
-  mirror:
-    strategy:
-      matrix:
-        target:
-          - name: Gitee
-            repo: gitee.com/huanghongxun/HMCL
-            user: 'hmcl-sync'
-            token: 'GITEE_SYNC_TOKEN'
-          - name: CNB
-            repo: cnb.cool/HMCL-dev/HMCL
-            user: 'cnb'
-            token: 'CNB_SYNC_TOKEN'
-    name: Mirror to ${{ matrix.target.name }}
-    if: ${{ github.repository == 'HMCL-dev/HMCL' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Mirror GitHub to ${{ matrix.target.name }}
-        run: |
-          git clone --mirror "https://github.com/$GITHUB_REPOSITORY.git" -- repo
-          cd repo
-          git push -f --prune "https://${{ matrix.target.user }}:${{ secrets[matrix.target.token] }}@${{ matrix.target.repo }}.git" "refs/heads/*:refs/heads/*" "refs/tags/*:refs/tags/*"

HMCL/build.gradle.kts

@@ -58,6 +58,7 @@ dependencies {
     implementation("libs:JFoenix")
     implementation(libs.twelvemonkeys.imageio.webp)
     implementation(libs.java.info)
+    implementation(libs.monet.fx)
 
     if (launcherExe.isBlank()) {
         implementation(libs.hmclauncher)
@@ -117,10 +118,6 @@ tasks.checkstyleMain {
     exclude("**/org/jackhuang/hmcl/ui/image/apng/**")
 }
 
-tasks.compileJava {
-    options.compilerArgs.add("--add-exports=java.base/jdk.internal.loader=ALL-UNNAMED")
-}
-
 val addOpens = listOf(
     "java.base/java.lang",
     "java.base/java.lang.reflect",
@@ -128,8 +125,11 @@ val addOpens = listOf(
     "javafx.base/com.sun.javafx.binding",
     "javafx.base/com.sun.javafx.event",
     "javafx.base/com.sun.javafx.runtime",
+    "javafx.base/javafx.beans.property",
     "javafx.graphics/javafx.css",
+    "javafx.graphics/javafx.stage",
     "javafx.graphics/com.sun.javafx.stage",
+    "javafx.graphics/com.sun.javafx.util",
     "javafx.graphics/com.sun.prism",
     "javafx.controls/com.sun.javafx.scene.control",
     "javafx.controls/com.sun.javafx.scene.control.behavior",
@@ -137,6 +137,10 @@ val addOpens = listOf(
     "jdk.attach/sun.tools.attach",
 )
 
+tasks.compileJava {
+    options.compilerArgs.addAll(addOpens.map { "--add-exports=$it=ALL-UNNAMED" })
+}
+
 val hmclProperties = buildList {
     add("hmcl.version" to project.version.toString())
     add("hmcl.add-opens" to addOpens.joinToString(" "))
@@ -202,7 +206,8 @@ tasks.shadowJar {
         "Main-Class" to "org.jackhuang.hmcl.Main",
         "Multi-Release" to "true",
         "Add-Opens" to addOpens.joinToString(" "),
-        "Enable-Native-Access" to "ALL-UNNAMED"
+        "Enable-Native-Access" to "ALL-UNNAMED",
+        "Enable-Final-Field-Mutation" to "ALL-UNNAMED",
     )
 
     if (launcherExe.isNotBlank()) {

HMCL/src/main/java/com/jfoenix/controls/JFXClippedPane.java

@@ -0,0 +1,60 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.controls;
+
+import com.jfoenix.utils.JFXNodeUtils;
+import javafx.geometry.Insets;
+import javafx.scene.Node;
+import javafx.scene.layout.*;
+import javafx.scene.paint.Color;
+
+/**
+ * JFXClippedPane is a StackPane that clips its content if exceeding the pane bounds.
+ *
+ * @author Shadi Shaheen
+ * @version 1.0
+ * @since 2018-06-02
+ */
+public class JFXClippedPane extends StackPane {
+
+    private final Region clip = new Region();
+
+    public JFXClippedPane() {
+        super();
+        init();
+    }
+
+    public JFXClippedPane(Node... children) {
+        super(children);
+        init();
+    }
+
+    private void init() {
+        setClip(clip);
+        clip.setBackground(new Background(new BackgroundFill(Color.BLACK, new CornerRadii(2), Insets.EMPTY)));
+        backgroundProperty().addListener(observable -> JFXNodeUtils.updateBackground(getBackground(), clip));
+    }
+
+    @Override
+    protected void layoutChildren() {
+        super.layoutChildren();
+        clip.resizeRelocate(0, 0, getWidth(), getHeight());
+    }
+}

HMCL/src/main/java/com/jfoenix/controls/JFXColorPicker.java

@@ -0,0 +1,145 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.controls;
+
+import com.jfoenix.skins.JFXColorPickerSkin;
+import javafx.css.CssMetaData;
+import javafx.css.SimpleStyleableBooleanProperty;
+import javafx.css.Styleable;
+import javafx.css.StyleableBooleanProperty;
+import javafx.css.converter.BooleanConverter;
+import javafx.scene.control.ColorPicker;
+import javafx.scene.control.Skin;
+import javafx.scene.paint.Color;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * JFXColorPicker is the metrial design implementation of color picker.
+ *
+ * @author Shadi Shaheen
+ * @version 1.0
+ * @since 2016-03-09
+ */
+public class JFXColorPicker extends ColorPicker {
+
+    /**
+     * {@inheritDoc}
+     */
+    public JFXColorPicker() {
+        initialize();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public JFXColorPicker(Color color) {
+        super(color);
+        initialize();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    protected Skin<?> createDefaultSkin() {
+        return new JFXColorPickerSkin(this);
+    }
+
+    private void initialize() {
+        this.getStyleClass().add(DEFAULT_STYLE_CLASS);
+    }
+
+    /**
+     * Initialize the style class to 'jfx-color-picker'.
+     * <p>
+     * This is the selector class from which CSS can be used to style
+     * this control.
+     */
+    private static final String DEFAULT_STYLE_CLASS = "jfx-color-picker";
+
+    private double[] preDefinedColors = null;
+
+    public double[] getPreDefinedColors() {
+        return preDefinedColors;
+    }
+
+    public void setPreDefinedColors(double[] preDefinedColors) {
+        this.preDefinedColors = preDefinedColors;
+    }
+
+    /**
+     * disable animation on button action
+     */
+    private final StyleableBooleanProperty disableAnimation = new SimpleStyleableBooleanProperty(StyleableProperties.DISABLE_ANIMATION,
+        JFXColorPicker.this,
+        "disableAnimation",
+        false);
+
+    public final StyleableBooleanProperty disableAnimationProperty() {
+        return this.disableAnimation;
+    }
+
+    public final Boolean isDisableAnimation() {
+        return disableAnimation != null && this.disableAnimationProperty().get();
+    }
+
+    public final void setDisableAnimation(final Boolean disabled) {
+        this.disableAnimationProperty().set(disabled);
+    }
+
+    private static final class StyleableProperties {
+
+        private static final CssMetaData<JFXColorPicker, Boolean> DISABLE_ANIMATION =
+            new CssMetaData<JFXColorPicker, Boolean>("-jfx-disable-animation",
+                BooleanConverter.getInstance(), false) {
+                @Override
+                public boolean isSettable(JFXColorPicker control) {
+                    return control.disableAnimation == null || !control.disableAnimation.isBound();
+                }
+
+                @Override
+                public StyleableBooleanProperty getStyleableProperty(JFXColorPicker control) {
+                    return control.disableAnimationProperty();
+                }
+            };
+
+
+        private static final List<CssMetaData<? extends Styleable, ?>> CHILD_STYLEABLES;
+
+        static {
+            final List<CssMetaData<? extends Styleable, ?>> styleables =
+                new ArrayList<>(ColorPicker.getClassCssMetaData());
+            Collections.addAll(styleables, DISABLE_ANIMATION);
+            CHILD_STYLEABLES = Collections.unmodifiableList(styleables);
+        }
+    }
+
+    @Override
+    public List<CssMetaData<? extends Styleable, ?>> getControlCssMetaData() {
+        return getClassCssMetaData();
+    }
+
+    public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
+        return StyleableProperties.CHILD_STYLEABLES;
+    }
+}

HMCL/src/main/java/com/jfoenix/controls/JFXRippler.java

@@ -0,0 +1,800 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.controls;
+
+import com.jfoenix.converters.RipplerMaskTypeConverter;
+import com.jfoenix.utils.JFXNodeUtils;
+import javafx.animation.*;
+import javafx.beans.DefaultProperty;
+import javafx.beans.binding.Bindings;
+import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.SimpleObjectProperty;
+import javafx.css.*;
+import javafx.css.converter.BooleanConverter;
+import javafx.css.converter.PaintConverter;
+import javafx.css.converter.SizeConverter;
+import javafx.geometry.Bounds;
+import javafx.scene.CacheHint;
+import javafx.scene.Group;
+import javafx.scene.Node;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.Region;
+import javafx.scene.layout.StackPane;
+import javafx.scene.paint.Color;
+import javafx.scene.paint.Paint;
+import javafx.scene.shape.Circle;
+import javafx.scene.shape.Rectangle;
+import javafx.scene.shape.Shape;
+import javafx.util.Duration;
+
+import java.util.*;
+import java.util.concurrent.atomic.AtomicBoolean;
+
+/**
+ * JFXRippler is the material design implementation of a ripple effect.
+ * the ripple effect can be applied to any node in the scene. JFXRippler is
+ * a {@link StackPane} container that holds a specified node (control node) and a ripple generator.
+ * <p>
+ * UPDATE NOTES:
+ * - fireEventProgrammatically(Event) method has been removed as the ripple controller is
+ * the control itself, so you can trigger manual ripple by firing mouse event on the control
+ * instead of JFXRippler
+ *
+ * @author Shadi Shaheen
+ * @version 1.0
+ * @since 2016-03-09
+ */
+@DefaultProperty(value = "control")
+public class JFXRippler extends StackPane {
+    public enum RipplerPos {
+        FRONT, BACK
+    }
+
+    public enum RipplerMask {
+        CIRCLE, RECT, FIT
+    }
+
+    protected RippleGenerator rippler;
+    protected Pane ripplerPane;
+    protected Node control;
+
+    protected static final double RIPPLE_MAX_RADIUS = 300;
+
+    private boolean enabled = true;
+    private boolean forceOverlay = false;
+    private final Interpolator rippleInterpolator = Interpolator.SPLINE(0.0825,
+            0.3025,
+            0.0875,
+            0.9975); //0.1, 0.54, 0.28, 0.95);
+
+    /// creates empty rippler node
+    public JFXRippler() {
+        this(null, RipplerMask.RECT, RipplerPos.FRONT);
+    }
+
+    /// creates a rippler for the specified control
+    public JFXRippler(Node control) {
+        this(control, RipplerMask.RECT, RipplerPos.FRONT);
+    }
+
+    /// creates a rippler for the specified control
+    ///
+    /// @param pos can be either FRONT/BACK (position the ripple effect infront of or behind the control)
+    public JFXRippler(Node control, RipplerPos pos) {
+        this(control, RipplerMask.RECT, pos);
+    }
+
+    /// creates a rippler for the specified control and apply the specified mask to it
+    ///
+    /// @param mask can be either rectangle/cricle
+    public JFXRippler(Node control, RipplerMask mask) {
+        this(control, mask, RipplerPos.FRONT);
+    }
+
+    /// creates a rippler for the specified control, mask and position.
+    ///
+    /// @param mask can be either rectangle/cricle
+    /// @param pos  can be either FRONT/BACK (position the ripple effect infront of or behind the control)
+    public JFXRippler(Node control, RipplerMask mask, RipplerPos pos) {
+        initialize();
+
+        setMaskType(mask);
+        setPosition(pos);
+        createRippleUI();
+        setControl(control);
+
+        // listen to control position changed
+        position.addListener(observable -> updateControlPosition());
+
+        setPickOnBounds(false);
+        setCache(true);
+        setCacheHint(CacheHint.SPEED);
+        setCacheShape(true);
+    }
+
+    protected final void createRippleUI() {
+        // create rippler panels
+        rippler = new RippleGenerator();
+        ripplerPane = new StackPane();
+        ripplerPane.setMouseTransparent(true);
+        ripplerPane.getChildren().add(rippler);
+        getChildren().add(ripplerPane);
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Setters / Getters                                                       *
+     *                                                                         *
+     **************************************************************************/
+
+    public void setControl(Node control) {
+        if (control != null) {
+            this.control = control;
+            // position control
+            positionControl(control);
+            // add control listeners to generate / release ripples
+            initControlListeners();
+        }
+    }
+
+    // Override this method to create JFXRippler for a control outside the ripple
+    protected void positionControl(Node control) {
+        if (this.position.get() == RipplerPos.BACK) {
+            getChildren().add(control);
+        } else {
+            getChildren().add(0, control);
+        }
+    }
+
+    protected void updateControlPosition() {
+        if (this.position.get() == RipplerPos.BACK) {
+            ripplerPane.toBack();
+        } else {
+            ripplerPane.toFront();
+        }
+    }
+
+    public Node getControl() {
+        return control;
+    }
+
+    public void setEnabled(boolean enable) {
+        this.enabled = enable;
+    }
+
+    // methods that can be changed by extending the rippler class
+
+    /// generate the clipping mask
+    ///
+    /// @return the mask node
+    protected Node getMask() {
+        double borderWidth = ripplerPane.getBorder() != null ? ripplerPane.getBorder().getInsets().getTop() : 0;
+        Bounds bounds = control.getBoundsInParent();
+        double width = control.getLayoutBounds().getWidth();
+        double height = control.getLayoutBounds().getHeight();
+        double diffMinX = Math.abs(control.getBoundsInLocal().getMinX() - control.getLayoutBounds().getMinX());
+        double diffMinY = Math.abs(control.getBoundsInLocal().getMinY() - control.getLayoutBounds().getMinY());
+        double diffMaxX = Math.abs(control.getBoundsInLocal().getMaxX() - control.getLayoutBounds().getMaxX());
+        double diffMaxY = Math.abs(control.getBoundsInLocal().getMaxY() - control.getLayoutBounds().getMaxY());
+        Node mask;
+        switch (getMaskType()) {
+            case RECT:
+                mask = new Rectangle(bounds.getMinX() + diffMinX - snappedLeftInset(),
+                        bounds.getMinY() + diffMinY - snappedTopInset(),
+                        width - 2 * borderWidth,
+                        height - 2 * borderWidth); // -0.1 to prevent resizing the anchor pane
+                break;
+            case CIRCLE:
+                double radius = Math.min((width / 2) - 2 * borderWidth, (height / 2) - 2 * borderWidth);
+                mask = new Circle((bounds.getMinX() + diffMinX + bounds.getMaxX() - diffMaxX) / 2 - snappedLeftInset(),
+                        (bounds.getMinY() + diffMinY + bounds.getMaxY() - diffMaxY) / 2 - snappedTopInset(),
+                        radius,
+                        Color.BLUE);
+                break;
+            case FIT:
+                mask = new Region();
+                if (control instanceof Shape) {
+                    ((Region) mask).setShape((Shape) control);
+                } else if (control instanceof Region) {
+                    ((Region) mask).setShape(((Region) control).getShape());
+                    JFXNodeUtils.updateBackground(((Region) control).getBackground(), (Region) mask);
+                }
+                mask.resize(width, height);
+                mask.relocate(bounds.getMinX() + diffMinX, bounds.getMinY() + diffMinY);
+                break;
+            default:
+                mask = new Rectangle(bounds.getMinX() + diffMinX - snappedLeftInset(),
+                        bounds.getMinY() + diffMinY - snappedTopInset(),
+                        width - 2 * borderWidth,
+                        height - 2 * borderWidth); // -0.1 to prevent resizing the anchor pane
+                break;
+        }
+        return mask;
+    }
+
+    /**
+     * compute the ripple radius
+     *
+     * @return the ripple radius size
+     */
+    protected double computeRippleRadius() {
+        double width2 = control.getLayoutBounds().getWidth() * control.getLayoutBounds().getWidth();
+        double height2 = control.getLayoutBounds().getHeight() * control.getLayoutBounds().getHeight();
+        return Math.min(Math.sqrt(width2 + height2), RIPPLE_MAX_RADIUS) * 1.1 + 5;
+    }
+
+    protected void setOverLayBounds(Rectangle overlay) {
+        overlay.setWidth(control.getLayoutBounds().getWidth());
+        overlay.setHeight(control.getLayoutBounds().getHeight());
+    }
+
+    /**
+     * init mouse listeners on the control
+     */
+    protected void initControlListeners() {
+        // if the control got resized the overlay rect must be rest
+        control.layoutBoundsProperty().addListener(observable -> resetRippler());
+        if (getChildren().contains(control)) {
+            control.boundsInParentProperty().addListener(observable -> resetRippler());
+        }
+        control.addEventHandler(MouseEvent.MOUSE_PRESSED,
+                (event) -> createRipple(event.getX(), event.getY()));
+        // create fade out transition for the ripple
+        control.addEventHandler(MouseEvent.MOUSE_RELEASED, e -> releaseRipple());
+    }
+
+    /**
+     * creates Ripple effect
+     */
+    protected void createRipple(double x, double y) {
+        if (!isRipplerDisabled()) {
+            rippler.setGeneratorCenterX(x);
+            rippler.setGeneratorCenterY(y);
+            rippler.createRipple();
+        }
+    }
+
+    protected void releaseRipple() {
+        rippler.releaseRipple();
+    }
+
+    /**
+     * creates Ripple effect in the center of the control
+     *
+     * @return a runnable to release the ripple when needed
+     */
+    public Runnable createManualRipple() {
+        if (!isRipplerDisabled()) {
+            rippler.setGeneratorCenterX(control.getLayoutBounds().getWidth() / 2);
+            rippler.setGeneratorCenterY(control.getLayoutBounds().getHeight() / 2);
+            rippler.createRipple();
+            return () -> {
+                // create fade out transition for the ripple
+                releaseRipple();
+            };
+        }
+        return () -> {
+        };
+    }
+
+    /// show/hide the ripple overlay
+    ///
+    /// @param forceOverlay used to hold the overlay after ripple action
+    public void setOverlayVisible(boolean visible, boolean forceOverlay) {
+        this.forceOverlay = forceOverlay;
+        setOverlayVisible(visible);
+    }
+
+    /// show/hide the ripple overlay
+    /// NOTE: setting overlay visibility to false will reset forceOverlay to false
+    public void setOverlayVisible(boolean visible) {
+        if (visible) {
+            showOverlay();
+        } else {
+            forceOverlay = false;
+            hideOverlay();
+        }
+    }
+
+    /**
+     * this method will be set to private in future versions of JFoenix,
+     * user the method {@link #setOverlayVisible(boolean)}
+     */
+    public void showOverlay() {
+        if (rippler.overlayRect != null) {
+            rippler.overlayRect.outAnimation.stop();
+        }
+        rippler.createOverlay();
+        rippler.overlayRect.inAnimation.play();
+    }
+
+    public void hideOverlay() {
+        if (!forceOverlay) {
+            if (rippler.overlayRect != null) {
+                rippler.overlayRect.inAnimation.stop();
+            }
+            if (rippler.overlayRect != null) {
+                rippler.overlayRect.outAnimation.play();
+            }
+        } else {
+            System.err.println("Ripple Overlay is forced!");
+        }
+    }
+
+    /**
+     * Generates ripples on the screen every 0.3 seconds or whenever
+     * the createRipple method is called. Ripples grow and fade out
+     * over 0.6 seconds
+     */
+    protected final class RippleGenerator extends Group {
+
+        private double generatorCenterX = 0;
+        private double generatorCenterY = 0;
+        private OverLayRipple overlayRect;
+        private final AtomicBoolean generating = new AtomicBoolean(false);
+        private boolean cacheRipplerClip = false;
+        private boolean resetClip = false;
+        private final Queue<Ripple> ripplesQueue = new LinkedList<>();
+
+        RippleGenerator() {
+            // improve in performance, by preventing
+            // redrawing the parent when the ripple effect is triggered
+            this.setManaged(false);
+            this.setCache(true);
+            this.setCacheHint(CacheHint.SPEED);
+        }
+
+        void createRipple() {
+            if (enabled) {
+                if (!generating.getAndSet(true)) {
+                    // create overlay once then change its color later
+                    createOverlay();
+                    if (this.getClip() == null || (getChildren().size() == 1 && !cacheRipplerClip) || resetClip) {
+                        this.setClip(getMask());
+                    }
+                    this.resetClip = false;
+
+                    // create the ripple effect
+                    final Ripple ripple = new Ripple(generatorCenterX, generatorCenterY);
+                    getChildren().add(ripple);
+                    ripplesQueue.add(ripple);
+
+                    // animate the ripple
+                    overlayRect.outAnimation.stop();
+                    overlayRect.inAnimation.play();
+                    ripple.inAnimation.play();
+                }
+            }
+        }
+
+        private void releaseRipple() {
+            Ripple ripple = ripplesQueue.poll();
+            if (ripple != null) {
+                ripple.inAnimation.stop();
+                ripple.outAnimation = new Timeline(
+                        new KeyFrame(Duration.millis(Math.min(800, (0.9 * 500) / ripple.getScaleX()))
+                                , ripple.outKeyValues));
+                ripple.outAnimation.setOnFinished((event) -> getChildren().remove(ripple));
+                ripple.outAnimation.play();
+                if (generating.getAndSet(false)) {
+                    if (overlayRect != null) {
+                        overlayRect.inAnimation.stop();
+                        if (!forceOverlay) {
+                            overlayRect.outAnimation.play();
+                        }
+                    }
+                }
+            }
+        }
+
+        void cacheRippleClip(boolean cached) {
+            cacheRipplerClip = cached;
+        }
+
+        void createOverlay() {
+            if (overlayRect == null) {
+                overlayRect = new OverLayRipple();
+                overlayRect.setClip(getMask());
+                getChildren().add(0, overlayRect);
+                overlayRect.fillProperty().bind(Bindings.createObjectBinding(() -> {
+                    if (ripplerFill.get() instanceof Color) {
+                        return new Color(((Color) ripplerFill.get()).getRed(),
+                                ((Color) ripplerFill.get()).getGreen(),
+                                ((Color) ripplerFill.get()).getBlue(),
+                                0.2);
+                    } else {
+                        return Color.TRANSPARENT;
+                    }
+                }, ripplerFill));
+            }
+        }
+
+        void setGeneratorCenterX(double generatorCenterX) {
+            this.generatorCenterX = generatorCenterX;
+        }
+
+        void setGeneratorCenterY(double generatorCenterY) {
+            this.generatorCenterY = generatorCenterY;
+        }
+
+        private final class OverLayRipple extends Rectangle {
+            // Overlay ripple animations
+            Animation inAnimation = new Timeline(new KeyFrame(Duration.millis(300),
+                    new KeyValue(opacityProperty(), 1, Interpolator.EASE_IN)));
+
+            Animation outAnimation = new Timeline(new KeyFrame(Duration.millis(300),
+                    new KeyValue(opacityProperty(), 0, Interpolator.EASE_OUT)));
+
+            OverLayRipple() {
+                super();
+                setOverLayBounds(this);
+                this.getStyleClass().add("jfx-rippler-overlay");
+                // update initial position
+                if (JFXRippler.this.getChildrenUnmodifiable().contains(control)) {
+                    double diffMinX = Math.abs(control.getBoundsInLocal().getMinX() - control.getLayoutBounds().getMinX());
+                    double diffMinY = Math.abs(control.getBoundsInLocal().getMinY() - control.getLayoutBounds().getMinY());
+                    Bounds bounds = control.getBoundsInParent();
+                    this.setX(bounds.getMinX() + diffMinX - snappedLeftInset());
+                    this.setY(bounds.getMinY() + diffMinY - snappedTopInset());
+                }
+                // set initial attributes
+                setOpacity(0);
+                setCache(true);
+                setCacheHint(CacheHint.SPEED);
+                setCacheShape(true);
+                setManaged(false);
+            }
+        }
+
+        private final class Ripple extends Circle {
+
+            KeyValue[] outKeyValues;
+            Animation outAnimation = null;
+            Animation inAnimation = null;
+
+            private Ripple(double centerX, double centerY) {
+                super(centerX,
+                        centerY,
+                        ripplerRadius.get().doubleValue() == Region.USE_COMPUTED_SIZE ?
+                                computeRippleRadius() : ripplerRadius.get().doubleValue(), null);
+                setCache(true);
+                setCacheHint(CacheHint.SPEED);
+                setCacheShape(true);
+                setManaged(false);
+                setSmooth(true);
+
+                KeyValue[] inKeyValues = new KeyValue[isRipplerRecenter() ? 4 : 2];
+                outKeyValues = new KeyValue[isRipplerRecenter() ? 5 : 3];
+
+                inKeyValues[0] = new KeyValue(scaleXProperty(), 0.9, rippleInterpolator);
+                inKeyValues[1] = new KeyValue(scaleYProperty(), 0.9, rippleInterpolator);
+
+                outKeyValues[0] = new KeyValue(this.scaleXProperty(), 1, rippleInterpolator);
+                outKeyValues[1] = new KeyValue(this.scaleYProperty(), 1, rippleInterpolator);
+                outKeyValues[2] = new KeyValue(this.opacityProperty(), 0, rippleInterpolator);
+
+                if (isRipplerRecenter()) {
+                    double dx = (control.getLayoutBounds().getWidth() / 2 - centerX) / 1.55;
+                    double dy = (control.getLayoutBounds().getHeight() / 2 - centerY) / 1.55;
+                    inKeyValues[2] = outKeyValues[3] = new KeyValue(translateXProperty(),
+                            Math.signum(dx) * Math.min(Math.abs(dx),
+                                    this.getRadius() / 2),
+                            rippleInterpolator);
+                    inKeyValues[3] = outKeyValues[4] = new KeyValue(translateYProperty(),
+                            Math.signum(dy) * Math.min(Math.abs(dy),
+                                    this.getRadius() / 2),
+                            rippleInterpolator);
+                }
+                inAnimation = new Timeline(new KeyFrame(Duration.ZERO,
+                        new KeyValue(scaleXProperty(),
+                                0,
+                                rippleInterpolator),
+                        new KeyValue(scaleYProperty(),
+                                0,
+                                rippleInterpolator),
+                        new KeyValue(translateXProperty(),
+                                0,
+                                rippleInterpolator),
+                        new KeyValue(translateYProperty(),
+                                0,
+                                rippleInterpolator),
+                        new KeyValue(opacityProperty(),
+                                1,
+                                rippleInterpolator)
+                ), new KeyFrame(Duration.millis(900), inKeyValues));
+
+                setScaleX(0);
+                setScaleY(0);
+                if (ripplerFill.get() instanceof Color) {
+                    Color circleColor = new Color(((Color) ripplerFill.get()).getRed(),
+                            ((Color) ripplerFill.get()).getGreen(),
+                            ((Color) ripplerFill.get()).getBlue(),
+                            0.3);
+                    setStroke(circleColor);
+                    setFill(circleColor);
+                } else {
+                    setStroke(ripplerFill.get());
+                    setFill(ripplerFill.get());
+                }
+            }
+        }
+
+        public void clear() {
+            getChildren().clear();
+            rippler.overlayRect = null;
+            generating.set(false);
+        }
+    }
+
+    private void resetOverLay() {
+        if (rippler.overlayRect != null) {
+            rippler.overlayRect.inAnimation.stop();
+            final RippleGenerator.OverLayRipple oldOverlay = rippler.overlayRect;
+            rippler.overlayRect.outAnimation.setOnFinished((finish) -> rippler.getChildren().remove(oldOverlay));
+            rippler.overlayRect.outAnimation.play();
+            rippler.overlayRect = null;
+        }
+    }
+
+    private void resetClip() {
+        this.rippler.resetClip = true;
+    }
+
+    protected void resetRippler() {
+        resetOverLay();
+        resetClip();
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Stylesheet Handling                                                     *
+     *                                                                         *
+     **************************************************************************/
+
+    /**
+     * Initialize the style class to 'jfx-rippler'.
+     * <p>
+     * This is the selector class from which CSS can be used to style
+     * this control.
+     */
+    private static final String DEFAULT_STYLE_CLASS = "jfx-rippler";
+
+    private void initialize() {
+        this.getStyleClass().add(DEFAULT_STYLE_CLASS);
+    }
+
+    /**
+     * the ripple recenter property, by default it's false.
+     * if true the ripple effect will show gravitational pull to the center of its control
+     */
+    private final StyleableObjectProperty<Boolean> ripplerRecenter = new SimpleStyleableObjectProperty<>(
+            StyleableProperties.RIPPLER_RECENTER,
+            JFXRippler.this,
+            "ripplerRecenter",
+            false);
+
+    public Boolean isRipplerRecenter() {
+        return ripplerRecenter != null && ripplerRecenter.get();
+    }
+
+    public StyleableObjectProperty<Boolean> ripplerRecenterProperty() {
+        return this.ripplerRecenter;
+    }
+
+    public void setRipplerRecenter(Boolean radius) {
+        this.ripplerRecenter.set(radius);
+    }
+
+    /**
+     * the ripple radius size, by default it will be automatically computed.
+     */
+    private final StyleableObjectProperty<Number> ripplerRadius = new SimpleStyleableObjectProperty<>(
+            StyleableProperties.RIPPLER_RADIUS,
+            JFXRippler.this,
+            "ripplerRadius",
+            Region.USE_COMPUTED_SIZE);
+
+    public Number getRipplerRadius() {
+        return ripplerRadius == null ? Region.USE_COMPUTED_SIZE : ripplerRadius.get();
+    }
+
+    public StyleableObjectProperty<Number> ripplerRadiusProperty() {
+        return this.ripplerRadius;
+    }
+
+    public void setRipplerRadius(Number radius) {
+        this.ripplerRadius.set(radius);
+    }
+
+    /**
+     * the default color of the ripple effect
+     */
+    private final StyleableObjectProperty<Paint> ripplerFill = new SimpleStyleableObjectProperty<>(StyleableProperties.RIPPLER_FILL,
+            JFXRippler.this,
+            "ripplerFill",
+            Color.rgb(0,
+                    200,
+                    255));
+
+    public Paint getRipplerFill() {
+        return ripplerFill == null ? Color.rgb(0, 200, 255) : ripplerFill.get();
+    }
+
+    public StyleableObjectProperty<Paint> ripplerFillProperty() {
+        return this.ripplerFill;
+    }
+
+    public void setRipplerFill(Paint color) {
+        this.ripplerFill.set(color);
+    }
+
+    /// mask property used for clipping the rippler.
+    /// can be either CIRCLE/RECT
+    private final StyleableObjectProperty<RipplerMask> maskType = new SimpleStyleableObjectProperty<>(
+            StyleableProperties.MASK_TYPE,
+            JFXRippler.this,
+            "maskType",
+            RipplerMask.RECT);
+
+    public RipplerMask getMaskType() {
+        return maskType == null ? RipplerMask.RECT : maskType.get();
+    }
+
+    public StyleableObjectProperty<RipplerMask> maskTypeProperty() {
+        return this.maskType;
+    }
+
+    public void setMaskType(RipplerMask type) {
+        this.maskType.set(type);
+    }
+
+    /**
+     * the ripple disable, by default it's false.
+     * if true the ripple effect will be hidden
+     */
+    private final StyleableBooleanProperty ripplerDisabled = new SimpleStyleableBooleanProperty(
+            StyleableProperties.RIPPLER_DISABLED,
+            JFXRippler.this,
+            "ripplerDisabled",
+            false);
+
+    public Boolean isRipplerDisabled() {
+        return ripplerDisabled != null && ripplerDisabled.get();
+    }
+
+    public StyleableBooleanProperty ripplerDisabledProperty() {
+        return this.ripplerDisabled;
+    }
+
+    public void setRipplerDisabled(Boolean disabled) {
+        this.ripplerDisabled.set(disabled);
+    }
+
+
+    /**
+     * indicates whether the ripple effect is infront of or behind the node
+     */
+    protected ObjectProperty<RipplerPos> position = new SimpleObjectProperty<>();
+
+    public void setPosition(RipplerPos pos) {
+        this.position.set(pos);
+    }
+
+    public RipplerPos getPosition() {
+        return position == null ? RipplerPos.FRONT : position.get();
+    }
+
+    public ObjectProperty<RipplerPos> positionProperty() {
+        return this.position;
+    }
+
+    private static final class StyleableProperties {
+        private static final CssMetaData<JFXRippler, Boolean> RIPPLER_RECENTER =
+                new CssMetaData<>("-jfx-rippler-recenter",
+                        BooleanConverter.getInstance(), false) {
+                    @Override
+                    public boolean isSettable(JFXRippler control) {
+                        return control.ripplerRecenter == null || !control.ripplerRecenter.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Boolean> getStyleableProperty(JFXRippler control) {
+                        return control.ripplerRecenterProperty();
+                    }
+                };
+        private static final CssMetaData<JFXRippler, Boolean> RIPPLER_DISABLED =
+                new CssMetaData<>("-jfx-rippler-disabled",
+                        BooleanConverter.getInstance(), false) {
+                    @Override
+                    public boolean isSettable(JFXRippler control) {
+                        return control.ripplerDisabled == null || !control.ripplerDisabled.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Boolean> getStyleableProperty(JFXRippler control) {
+                        return control.ripplerDisabledProperty();
+                    }
+                };
+        private static final CssMetaData<JFXRippler, Paint> RIPPLER_FILL =
+                new CssMetaData<>("-jfx-rippler-fill",
+                        PaintConverter.getInstance(), Color.rgb(0, 200, 255)) {
+                    @Override
+                    public boolean isSettable(JFXRippler control) {
+                        return control.ripplerFill == null || !control.ripplerFill.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Paint> getStyleableProperty(JFXRippler control) {
+                        return control.ripplerFillProperty();
+                    }
+                };
+        private static final CssMetaData<JFXRippler, Number> RIPPLER_RADIUS =
+                new CssMetaData<>("-jfx-rippler-radius",
+                        SizeConverter.getInstance(), Region.USE_COMPUTED_SIZE) {
+                    @Override
+                    public boolean isSettable(JFXRippler control) {
+                        return control.ripplerRadius == null || !control.ripplerRadius.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Number> getStyleableProperty(JFXRippler control) {
+                        return control.ripplerRadiusProperty();
+                    }
+                };
+        private static final CssMetaData<JFXRippler, RipplerMask> MASK_TYPE =
+                new CssMetaData<>("-jfx-mask-type",
+                        RipplerMaskTypeConverter.getInstance(), RipplerMask.RECT) {
+                    @Override
+                    public boolean isSettable(JFXRippler control) {
+                        return control.maskType == null || !control.maskType.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<RipplerMask> getStyleableProperty(JFXRippler control) {
+                        return control.maskTypeProperty();
+                    }
+                };
+
+        private static final List<CssMetaData<? extends Styleable, ?>> STYLEABLES;
+
+        static {
+            final List<CssMetaData<? extends Styleable, ?>> styleables =
+                    new ArrayList<>(StackPane.getClassCssMetaData());
+            Collections.addAll(styleables,
+                    RIPPLER_RECENTER,
+                    RIPPLER_RADIUS,
+                    RIPPLER_FILL,
+                    MASK_TYPE,
+                    RIPPLER_DISABLED
+            );
+            STYLEABLES = Collections.unmodifiableList(styleables);
+        }
+    }
+
+    @Override
+    public List<CssMetaData<? extends Styleable, ?>> getCssMetaData() {
+        return getClassCssMetaData();
+    }
+
+    public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
+        return StyleableProperties.STYLEABLES;
+    }
+}

HMCL/src/main/java/com/jfoenix/controls/JFXToggleButton.java

@@ -0,0 +1,373 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.controls;
+
+import com.jfoenix.skins.JFXToggleButtonSkin;
+import javafx.css.*;
+import javafx.css.converter.BooleanConverter;
+import javafx.css.converter.PaintConverter;
+import javafx.scene.control.Skin;
+import javafx.scene.control.ToggleButton;
+import javafx.scene.paint.Color;
+import javafx.scene.paint.Paint;
+import org.jackhuang.hmcl.ui.animation.AnimationUtils;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * JFXToggleButton is the material design implementation of a toggle button.
+ * important CSS Selectors:
+ * <p>
+ * .jfx-toggle-button{
+ * -fx-toggle-color: color-value;
+ * -fx-untoggle-color: color-value;
+ * -fx-toggle-line-color: color-value;
+ * -fx-untoggle-line-color: color-value;
+ * }
+ * <p>
+ * To change the rippler color when toggled:
+ * <p>
+ * .jfx-toggle-button .jfx-rippler{
+ * -fx-rippler-fill: color-value;
+ * }
+ * <p>
+ * .jfx-toggle-button:selected .jfx-rippler{
+ * -fx-rippler-fill: color-value;
+ * }
+ *
+ * @author Shadi Shaheen
+ * @version 1.0
+ * @since 2016-03-09
+ */
+public class JFXToggleButton extends ToggleButton {
+
+    /**
+     * {@inheritDoc}
+     */
+    public JFXToggleButton() {
+        initialize();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    protected Skin<?> createDefaultSkin() {
+        return new JFXToggleButtonSkin(this);
+    }
+
+    private void initialize() {
+        this.getStyleClass().add(DEFAULT_STYLE_CLASS);
+        // it's up for the user to add this behavior
+//        toggleColor.addListener((o, oldVal, newVal) -> {
+//            // update line color in case not set by the user
+//            if(newVal instanceof Color)
+//                toggleLineColor.set(((Color)newVal).desaturate().desaturate().brighter());
+//        });
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * styleable Properties                                                    *
+     *                                                                         *
+     **************************************************************************/
+
+    /**
+     * Initialize the style class to 'jfx-toggle-button'.
+     * <p>
+     * This is the selector class from which CSS can be used to style
+     * this control.
+     */
+    private static final String DEFAULT_STYLE_CLASS = "jfx-toggle-button";
+
+    /**
+     * default color used when the button is toggled
+     */
+    private final StyleableObjectProperty<Paint> toggleColor = new SimpleStyleableObjectProperty<>(StyleableProperties.TOGGLE_COLOR,
+            JFXToggleButton.this,
+            "toggleColor",
+            Color.valueOf(
+                    "#009688"));
+
+    public Paint getToggleColor() {
+        return toggleColor == null ? Color.valueOf("#009688") : toggleColor.get();
+    }
+
+    public StyleableObjectProperty<Paint> toggleColorProperty() {
+        return this.toggleColor;
+    }
+
+    public void setToggleColor(Paint color) {
+        this.toggleColor.set(color);
+    }
+
+    /**
+     * default color used when the button is not toggled
+     */
+    private StyleableObjectProperty<Paint> untoggleColor = new SimpleStyleableObjectProperty<>(StyleableProperties.UNTOGGLE_COLOR,
+            JFXToggleButton.this,
+            "unToggleColor",
+            Color.valueOf(
+                    "#FAFAFA"));
+
+    public Paint getUnToggleColor() {
+        return untoggleColor == null ? Color.valueOf("#FAFAFA") : untoggleColor.get();
+    }
+
+    public StyleableObjectProperty<Paint> unToggleColorProperty() {
+        return this.untoggleColor;
+    }
+
+    public void setUnToggleColor(Paint color) {
+        this.untoggleColor.set(color);
+    }
+
+    /**
+     * default line color used when the button is toggled
+     */
+    private final StyleableObjectProperty<Paint> toggleLineColor = new SimpleStyleableObjectProperty<>(
+            StyleableProperties.TOGGLE_LINE_COLOR,
+            JFXToggleButton.this,
+            "toggleLineColor",
+            Color.valueOf("#77C2BB"));
+
+    public Paint getToggleLineColor() {
+        return toggleLineColor == null ? Color.valueOf("#77C2BB") : toggleLineColor.get();
+    }
+
+    public StyleableObjectProperty<Paint> toggleLineColorProperty() {
+        return this.toggleLineColor;
+    }
+
+    public void setToggleLineColor(Paint color) {
+        this.toggleLineColor.set(color);
+    }
+
+    /**
+     * default line color used when the button is not toggled
+     */
+    private final StyleableObjectProperty<Paint> untoggleLineColor = new SimpleStyleableObjectProperty<>(
+            StyleableProperties.UNTOGGLE_LINE_COLOR,
+            JFXToggleButton.this,
+            "unToggleLineColor",
+            Color.valueOf("#999999"));
+
+    public Paint getUnToggleLineColor() {
+        return untoggleLineColor == null ? Color.valueOf("#999999") : untoggleLineColor.get();
+    }
+
+    public StyleableObjectProperty<Paint> unToggleLineColorProperty() {
+        return this.untoggleLineColor;
+    }
+
+    public void setUnToggleLineColor(Paint color) {
+        this.untoggleLineColor.set(color);
+    }
+
+    /**
+     * Default size of the toggle button.
+     */
+    private final StyleableDoubleProperty size = new SimpleStyleableDoubleProperty(
+            StyleableProperties.SIZE,
+            JFXToggleButton.this,
+            "size",
+            10.0);
+
+    public double getSize() {
+        return size.get();
+    }
+
+    public StyleableDoubleProperty sizeProperty() {
+        return this.size;
+    }
+
+    public void setSize(double size) {
+        this.size.set(size);
+    }
+
+    /**
+     * Disable the visual indicator for focus
+     */
+    private final StyleableBooleanProperty disableVisualFocus = new SimpleStyleableBooleanProperty(StyleableProperties.DISABLE_VISUAL_FOCUS,
+            JFXToggleButton.this,
+            "disableVisualFocus",
+            false);
+
+    public final StyleableBooleanProperty disableVisualFocusProperty() {
+        return this.disableVisualFocus;
+    }
+
+    public final Boolean isDisableVisualFocus() {
+        return disableVisualFocus != null && this.disableVisualFocusProperty().get();
+    }
+
+    public final void setDisableVisualFocus(final Boolean disabled) {
+        this.disableVisualFocusProperty().set(disabled);
+    }
+
+
+    /**
+     * disable animation on button action
+     */
+    private final StyleableBooleanProperty disableAnimation = new SimpleStyleableBooleanProperty(StyleableProperties.DISABLE_ANIMATION,
+            JFXToggleButton.this,
+            "disableAnimation",
+            !AnimationUtils.isAnimationEnabled());
+
+    public final StyleableBooleanProperty disableAnimationProperty() {
+        return this.disableAnimation;
+    }
+
+    public final Boolean isDisableAnimation() {
+        return disableAnimation != null && this.disableAnimationProperty().get();
+    }
+
+    public final void setDisableAnimation(final Boolean disabled) {
+        this.disableAnimationProperty().set(disabled);
+    }
+
+    private static final class StyleableProperties {
+        private static final CssMetaData<JFXToggleButton, Paint> TOGGLE_COLOR =
+                new CssMetaData<>("-jfx-toggle-color",
+                        PaintConverter.getInstance(), Color.valueOf("#009688")) {
+                    @Override
+                    public boolean isSettable(JFXToggleButton control) {
+                        return control.toggleColor == null || !control.toggleColor.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Paint> getStyleableProperty(JFXToggleButton control) {
+                        return control.toggleColorProperty();
+                    }
+                };
+
+        private static final CssMetaData<JFXToggleButton, Paint> UNTOGGLE_COLOR =
+                new CssMetaData<>("-jfx-untoggle-color",
+                        PaintConverter.getInstance(), Color.valueOf("#FAFAFA")) {
+                    @Override
+                    public boolean isSettable(JFXToggleButton control) {
+                        return control.untoggleColor == null || !control.untoggleColor.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Paint> getStyleableProperty(JFXToggleButton control) {
+                        return control.unToggleColorProperty();
+                    }
+                };
+
+        private static final CssMetaData<JFXToggleButton, Paint> TOGGLE_LINE_COLOR =
+                new CssMetaData<>("-jfx-toggle-line-color",
+                        PaintConverter.getInstance(), Color.valueOf("#77C2BB")) {
+                    @Override
+                    public boolean isSettable(JFXToggleButton control) {
+                        return control.toggleLineColor == null || !control.toggleLineColor.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Paint> getStyleableProperty(JFXToggleButton control) {
+                        return control.toggleLineColorProperty();
+                    }
+                };
+
+        private static final CssMetaData<JFXToggleButton, Paint> UNTOGGLE_LINE_COLOR =
+                new CssMetaData<>("-jfx-untoggle-line-color",
+                        PaintConverter.getInstance(), Color.valueOf("#999999")) {
+                    @Override
+                    public boolean isSettable(JFXToggleButton control) {
+                        return control.untoggleLineColor == null || !control.untoggleLineColor.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Paint> getStyleableProperty(JFXToggleButton control) {
+                        return control.unToggleLineColorProperty();
+                    }
+                };
+
+        private static final CssMetaData<JFXToggleButton, Number> SIZE =
+                new CssMetaData<>("-jfx-size",
+                        StyleConverter.getSizeConverter(), 10.0) {
+                    @Override
+                    public boolean isSettable(JFXToggleButton control) {
+                        return !control.size.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Number> getStyleableProperty(JFXToggleButton control) {
+                        return control.sizeProperty();
+                    }
+                };
+        private static final CssMetaData<JFXToggleButton, Boolean> DISABLE_VISUAL_FOCUS =
+                new CssMetaData<>("-jfx-disable-visual-focus",
+                        BooleanConverter.getInstance(), false) {
+                    @Override
+                    public boolean isSettable(JFXToggleButton control) {
+                        return control.disableVisualFocus == null || !control.disableVisualFocus.isBound();
+                    }
+
+                    @Override
+                    public StyleableBooleanProperty getStyleableProperty(JFXToggleButton control) {
+                        return control.disableVisualFocusProperty();
+                    }
+                };
+
+        private static final CssMetaData<JFXToggleButton, Boolean> DISABLE_ANIMATION =
+                new CssMetaData<>("-jfx-disable-animation",
+                        BooleanConverter.getInstance(), false) {
+                    @Override
+                    public boolean isSettable(JFXToggleButton control) {
+                        return control.disableAnimation == null || !control.disableAnimation.isBound();
+                    }
+
+                    @Override
+                    public StyleableBooleanProperty getStyleableProperty(JFXToggleButton control) {
+                        return control.disableAnimationProperty();
+                    }
+                };
+
+        private static final List<CssMetaData<? extends Styleable, ?>> CHILD_STYLEABLES;
+
+        static {
+            final List<CssMetaData<? extends Styleable, ?>> styleables =
+                    new ArrayList<>(ToggleButton.getClassCssMetaData());
+            Collections.addAll(styleables,
+                    SIZE,
+                    TOGGLE_COLOR,
+                    UNTOGGLE_COLOR,
+                    TOGGLE_LINE_COLOR,
+                    UNTOGGLE_LINE_COLOR,
+                    DISABLE_VISUAL_FOCUS,
+                    DISABLE_ANIMATION
+            );
+            CHILD_STYLEABLES = Collections.unmodifiableList(styleables);
+        }
+    }
+
+    @Override
+    public List<CssMetaData<? extends Styleable, ?>> getControlCssMetaData() {
+        return getClassCssMetaData();
+    }
+
+    public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
+        return StyleableProperties.CHILD_STYLEABLES;
+    }
+
+}

HMCL/src/main/java/com/jfoenix/controls/behavior/JFXGenericPickerBehavior.java

@@ -0,0 +1,46 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.controls.behavior;
+
+import com.sun.javafx.scene.control.behavior.ComboBoxBaseBehavior;
+import javafx.scene.control.ComboBoxBase;
+import javafx.scene.control.PopupControl;
+
+/**
+ * @author Shadi Shaheen
+ * @version 2.0
+ * @since 2017-10-05
+ */
+public class JFXGenericPickerBehavior<T> extends ComboBoxBaseBehavior<T> {
+
+    public JFXGenericPickerBehavior(ComboBoxBase<T> var1) {
+        super(var1);
+    }
+
+    public void onAutoHide(PopupControl var1) {
+        if (!var1.isShowing() && this.getNode().isShowing()) {
+            this.getNode().hide();
+        }
+        if (!this.getNode().isShowing()) {
+            super.onAutoHide(var1);
+        }
+    }
+
+}

HMCL/src/main/java/com/jfoenix/skins/JFXCheckBoxSkin.java

@@ -0,0 +1,222 @@
+//
+// Source code recreated from a .class file by IntelliJ IDEA
+// (powered by FernFlower decompiler)
+//
+
+package com.jfoenix.skins;
+
+import com.jfoenix.controls.JFXCheckBox;
+import com.jfoenix.controls.JFXRippler;
+import com.jfoenix.controls.JFXRippler.RipplerMask;
+import com.jfoenix.controls.JFXRippler.RipplerPos;
+import com.jfoenix.transitions.CachedTransition;
+import com.jfoenix.transitions.JFXFillTransition;
+import com.jfoenix.utils.JFXNodeUtils;
+import javafx.animation.Interpolator;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
+import javafx.animation.Transition;
+import javafx.geometry.HPos;
+import javafx.geometry.Insets;
+import javafx.geometry.VPos;
+import javafx.scene.control.CheckBox;
+import javafx.scene.control.skin.CheckBoxSkin;
+import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.Background;
+import javafx.scene.layout.BackgroundFill;
+import javafx.scene.layout.Border;
+import javafx.scene.layout.BorderStroke;
+import javafx.scene.layout.BorderStrokeStyle;
+import javafx.scene.layout.BorderWidths;
+import javafx.scene.layout.CornerRadii;
+import javafx.scene.layout.StackPane;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.SVGPath;
+import javafx.util.Duration;
+import org.jackhuang.hmcl.theme.Themes;
+
+public class JFXCheckBoxSkin extends CheckBoxSkin {
+    private final StackPane box = new StackPane();
+    private final StackPane mark = new StackPane();
+    private final double lineThick = 2.0;
+    private final double padding = 10.0;
+    private final JFXRippler rippler;
+    private final AnchorPane container = new AnchorPane();
+    private final double labelOffset = -8.0;
+    private final Transition transition;
+    private boolean invalid = true;
+    private JFXFillTransition select;
+
+    public JFXCheckBoxSkin(JFXCheckBox control) {
+        super(control);
+        this.box.setMinSize(18.0, 18.0);
+        this.box.setPrefSize(18.0, 18.0);
+        this.box.setMaxSize(18.0, 18.0);
+        this.box.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, new CornerRadii(2.0), Insets.EMPTY)));
+        this.box.setBorder(new Border(new BorderStroke(Themes.getColorScheme().getOnSurfaceVariant(), BorderStrokeStyle.SOLID, new CornerRadii(2.0), new BorderWidths(this.lineThick))));
+        StackPane boxContainer = new StackPane();
+        boxContainer.getChildren().add(this.box);
+        boxContainer.setPadding(new Insets(this.padding));
+        this.rippler = new JFXRippler(boxContainer, RipplerMask.CIRCLE, RipplerPos.BACK);
+        this.updateRippleColor();
+        SVGPath shape = new SVGPath();
+        shape.setContent("M384 690l452-452 60 60-512 512-238-238 60-60z");
+        this.mark.setShape(shape);
+        this.mark.setMaxSize(15.0, 12.0);
+        this.mark.setStyle("-fx-background-color:-monet-on-primary; -fx-border-color:-monet-on-primary; -fx-border-width:2px;");
+        this.mark.setVisible(false);
+        this.mark.setScaleX(0.0);
+        this.mark.setScaleY(0.0);
+        boxContainer.getChildren().add(this.mark);
+        this.container.getChildren().add(this.rippler);
+        AnchorPane.setRightAnchor(this.rippler, this.labelOffset);
+        control.selectedProperty().addListener((o, oldVal, newVal) -> {
+            this.updateRippleColor();
+            this.playSelectAnimation(newVal);
+        });
+        control.focusedProperty().addListener((o, oldVal, newVal) -> {
+            if (newVal) {
+                if (!this.getSkinnable().isPressed()) {
+                    this.rippler.showOverlay();
+                }
+            } else {
+                this.rippler.hideOverlay();
+            }
+        });
+        control.pressedProperty().addListener((o, oldVal, newVal) -> this.rippler.hideOverlay());
+        this.updateChildren();
+        this.registerChangeListener(control.checkedColorProperty(), ignored -> {
+            if (select != null) {
+                select.stop();
+            }
+            this.createFillTransition();
+            updateColors();
+        });
+        this.registerChangeListener(control.unCheckedColorProperty(), ignored -> updateColors());
+        this.transition = new CheckBoxTransition();
+        this.createFillTransition();
+    }
+
+    private void updateRippleColor() {
+        var control = (JFXCheckBox) this.getSkinnable();
+        this.rippler.setRipplerFill(control.isSelected()
+                ? control.getCheckedColor()
+                : control.getUnCheckedColor());
+    }
+
+    private void updateColors() {
+        var control = (JFXCheckBox) getSkinnable();
+        boolean isSelected = control.isSelected();
+        JFXNodeUtils.updateBackground(box.getBackground(), box, isSelected ? control.getCheckedColor() : Color.TRANSPARENT);
+        rippler.setRipplerFill(isSelected ? control.getCheckedColor() : control.getUnCheckedColor());
+        final BorderStroke borderStroke = box.getBorder().getStrokes().get(0);
+        box.setBorder(new Border(new BorderStroke(
+                isSelected ? control.getCheckedColor() : Themes.getColorScheme().getOnSurfaceVariant(),
+                borderStroke.getTopStyle(),
+                borderStroke.getRadii(),
+                borderStroke.getWidths())));
+    }
+
+    protected void updateChildren() {
+        super.updateChildren();
+        if (this.container != null) {
+            this.getChildren().remove(1);
+            this.getChildren().add(this.container);
+        }
+    }
+
+    protected double computeMinWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
+        return super.computePrefWidth(height, topInset, rightInset, bottomInset, leftInset) + this.snapSizeX(this.box.minWidth(-1.0)) + this.labelOffset + 2.0 * this.padding;
+    }
+
+    protected double computePrefWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
+        return super.computePrefWidth(height, topInset, rightInset, bottomInset, leftInset) + this.snapSizeY(this.box.prefWidth(-1.0)) + this.labelOffset + 2.0 * this.padding;
+    }
+
+    protected void layoutChildren(double x, double y, double w, double h) {
+        CheckBox checkBox = this.getSkinnable();
+        double boxWidth = this.snapSizeX(this.container.prefWidth(-1.0));
+        double boxHeight = this.snapSizeY(this.container.prefHeight(-1.0));
+        double computeWidth = Math.min(checkBox.prefWidth(-1.0), checkBox.minWidth(-1.0)) + this.labelOffset + 2.0 * this.padding;
+        double labelWidth = Math.min(computeWidth - boxWidth, w - this.snapSizeX(boxWidth)) + this.labelOffset + 2.0 * this.padding;
+        double labelHeight = Math.min(checkBox.prefHeight(labelWidth), h);
+        double maxHeight = Math.max(boxHeight, labelHeight);
+        double xOffset = computeXOffset(w, labelWidth + boxWidth, checkBox.getAlignment().getHpos()) + x;
+        double yOffset = computeYOffset(h, maxHeight, checkBox.getAlignment().getVpos()) + x;
+        if (this.invalid) {
+            if (this.getSkinnable().isSelected()) {
+                this.playSelectAnimation(true);
+            }
+
+            this.invalid = false;
+        }
+
+        this.layoutLabelInArea(xOffset + boxWidth, yOffset, labelWidth, maxHeight, checkBox.getAlignment());
+        this.container.resize(boxWidth, boxHeight);
+        this.positionInArea(this.container, xOffset, yOffset, boxWidth, maxHeight, 0.0, checkBox.getAlignment().getHpos(), checkBox.getAlignment().getVpos());
+    }
+
+    static double computeXOffset(double width, double contentWidth, HPos hpos) {
+        return switch (hpos) {
+            case LEFT -> 0.0;
+            case CENTER -> (width - contentWidth) / 2.0;
+            case RIGHT -> width - contentWidth;
+        };
+    }
+
+    static double computeYOffset(double height, double contentHeight, VPos vpos) {
+        return switch (vpos) {
+            case TOP -> 0.0;
+            case CENTER -> (height - contentHeight) / 2.0;
+            case BOTTOM -> height - contentHeight;
+            default -> 0.0;
+        };
+    }
+
+    private void playSelectAnimation(Boolean selection) {
+        if (selection == null) {
+            selection = false;
+        }
+
+        JFXCheckBox control = (JFXCheckBox) this.getSkinnable();
+        this.transition.setRate(selection ? 1.0 : -1.0);
+        this.select.setRate(selection ? 1.0 : -1.0);
+        this.transition.play();
+        this.select.play();
+        this.box.setBorder(new Border(new BorderStroke(
+                selection ? control.getCheckedColor() : Themes.getColorScheme().getOnSurfaceVariant(),
+                BorderStrokeStyle.SOLID,
+                new CornerRadii(2.0),
+                new BorderWidths(this.lineThick))));
+    }
+
+    private void createFillTransition() {
+        this.select = new JFXFillTransition(Duration.millis(120.0), this.box, Color.TRANSPARENT,
+                (Color) ((JFXCheckBox) this.getSkinnable()).getCheckedColor());
+        this.select.setInterpolator(Interpolator.EASE_OUT);
+    }
+
+    private final class CheckBoxTransition extends CachedTransition {
+        CheckBoxTransition() {
+            super(JFXCheckBoxSkin.this.mark,
+                    new Timeline(
+                            new KeyFrame(Duration.ZERO,
+                                    new KeyValue(JFXCheckBoxSkin.this.mark.visibleProperty(), false, Interpolator.EASE_OUT),
+                                    new KeyValue(JFXCheckBoxSkin.this.mark.scaleXProperty(), (double) 0.5F, Interpolator.EASE_OUT),
+                                    new KeyValue(JFXCheckBoxSkin.this.mark.scaleYProperty(), (double) 0.5F, Interpolator.EASE_OUT)),
+                            new KeyFrame(Duration.millis(400.0),
+                                    new KeyValue(JFXCheckBoxSkin.this.mark.visibleProperty(), true, Interpolator.EASE_OUT),
+                                    new KeyValue(JFXCheckBoxSkin.this.mark.scaleXProperty(), (double) 0.5F, Interpolator.EASE_OUT),
+                                    new KeyValue(JFXCheckBoxSkin.this.mark.scaleYProperty(), (double) 0.5F, Interpolator.EASE_OUT)),
+                            new KeyFrame(Duration.millis(1000.0),
+                                    new KeyValue(JFXCheckBoxSkin.this.mark.visibleProperty(), true, Interpolator.EASE_OUT),
+                                    new KeyValue(JFXCheckBoxSkin.this.mark.scaleXProperty(), 1, Interpolator.EASE_OUT),
+                                    new KeyValue(JFXCheckBoxSkin.this.mark.scaleYProperty(), 1, Interpolator.EASE_OUT))
+                    )
+            );
+            this.setCycleDuration(Duration.seconds(0.12));
+            this.setDelay(Duration.seconds(0.05));
+        }
+    }
+}

HMCL/src/main/java/com/jfoenix/skins/JFXColorPalette.java

@@ -0,0 +1,623 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.skins;
+
+import com.jfoenix.controls.JFXButton;
+import com.jfoenix.controls.JFXColorPicker;
+import com.jfoenix.utils.JFXNodeUtils;
+import javafx.collections.FXCollections;
+import javafx.collections.ListChangeListener.Change;
+import javafx.collections.ObservableList;
+import javafx.event.ActionEvent;
+import javafx.event.Event;
+import javafx.geometry.Bounds;
+import javafx.geometry.NodeOrientation;
+import javafx.geometry.Pos;
+import javafx.scene.Node;
+import javafx.scene.control.Label;
+import javafx.scene.control.PopupControl;
+import javafx.scene.control.Tooltip;
+import javafx.scene.input.KeyEvent;
+import javafx.scene.input.MouseButton;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.*;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Rectangle;
+import javafx.scene.shape.StrokeType;
+
+import java.util.List;
+
+import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
+
+/**
+ * @author Shadi Shaheen FUTURE WORK: this UI will get re-designed to match material design guidlines
+ */
+final class JFXColorPalette extends Region {
+
+    private static final int SQUARE_SIZE = 15;
+
+    // package protected for testing purposes
+    JFXColorGrid colorPickerGrid;
+    final JFXButton customColorLink = new JFXButton(i18n("color.custom"));
+    JFXCustomColorPickerDialog customColorDialog = null;
+
+    private final JFXColorPicker colorPicker;
+    private final GridPane customColorGrid = new GridPane();
+    private final Label customColorLabel = new Label(i18n("color.recent"));
+
+    private PopupControl popupControl;
+    private ColorSquare focusedSquare;
+
+    private Color mouseDragColor = null;
+    private boolean dragDetected = false;
+
+    private final ColorSquare hoverSquare = new ColorSquare();
+
+    public JFXColorPalette(final JFXColorPicker colorPicker) {
+        getStyleClass().add("color-palette-region");
+        this.colorPicker = colorPicker;
+        colorPickerGrid = new JFXColorGrid();
+        colorPickerGrid.getChildren().get(0).requestFocus();
+        customColorLabel.setAlignment(Pos.CENTER_LEFT);
+        customColorLink.setPrefWidth(colorPickerGrid.prefWidth(-1));
+        customColorLink.setAlignment(Pos.CENTER);
+        customColorLink.setFocusTraversable(true);
+        customColorLink.setOnAction(ev -> {
+            if (customColorDialog == null) {
+                customColorDialog = new JFXCustomColorPickerDialog(popupControl);
+                customColorDialog.customColorProperty().addListener((ov, t1, t2) -> {
+                    colorPicker.setValue(customColorDialog.customColorProperty().get());
+                });
+                customColorDialog.setOnSave(() -> {
+                    Color customColor = customColorDialog.customColorProperty().get();
+                    buildCustomColors();
+                    colorPicker.getCustomColors().add(customColor);
+                    updateSelection(customColor);
+                    Event.fireEvent(colorPicker, new ActionEvent());
+                    colorPicker.hide();
+                });
+            }
+            customColorDialog.setCurrentColor(colorPicker.valueProperty().get());
+            if (popupControl != null) {
+                popupControl.setAutoHide(false);
+            }
+            customColorDialog.show();
+            customColorDialog.setOnHidden(event -> {
+                if (popupControl != null) {
+                    popupControl.setAutoHide(true);
+                }
+            });
+        });
+
+        initNavigation();
+        customColorGrid.getStyleClass().add("color-picker-grid");
+        customColorGrid.setVisible(false);
+
+        buildCustomColors();
+
+        colorPicker.getCustomColors().addListener((Change<? extends Color> change) -> buildCustomColors());
+        VBox paletteBox = new VBox();
+        paletteBox.getStyleClass().add("color-palette");
+        paletteBox.getChildren().addAll(colorPickerGrid);
+        if (colorPicker.getPreDefinedColors() == null) {
+            paletteBox.getChildren().addAll(customColorLabel, customColorGrid, customColorLink);
+        }
+
+        hoverSquare.setMouseTransparent(true);
+        hoverSquare.getStyleClass().addAll("hover-square");
+        setFocusedSquare(null);
+
+        getChildren().addAll(paletteBox, hoverSquare);
+    }
+
+    private void setFocusedSquare(ColorSquare square) {
+        hoverSquare.setVisible(square != null);
+
+        if (square == focusedSquare) {
+            return;
+        }
+        focusedSquare = square;
+
+        hoverSquare.setVisible(focusedSquare != null);
+        if (focusedSquare == null) {
+            return;
+        }
+
+        if (!focusedSquare.isFocused()) {
+            focusedSquare.requestFocus();
+        }
+
+        hoverSquare.rectangle.setFill(focusedSquare.rectangle.getFill());
+
+        Bounds b = square.localToScene(square.getLayoutBounds());
+
+        double x = b.getMinX();
+        double y = b.getMinY();
+
+        double xAdjust;
+        double scaleAdjust = hoverSquare.getScaleX() == 1.0 ? 0 : hoverSquare.getWidth() / 4.0;
+
+        if (colorPicker.getEffectiveNodeOrientation() == NodeOrientation.RIGHT_TO_LEFT) {
+            x = focusedSquare.getLayoutX();
+            xAdjust = -focusedSquare.getWidth() + scaleAdjust;
+        } else {
+            xAdjust = focusedSquare.getWidth() / 2.0 + scaleAdjust;
+        }
+
+        hoverSquare.setLayoutX(snapPositionX(x) - xAdjust);
+        hoverSquare.setLayoutY(snapPositionY(y) - focusedSquare.getHeight() / 2.0 + (hoverSquare.getScaleY() == 1.0 ? 0 : focusedSquare.getHeight() / 4.0));
+    }
+
+    private void buildCustomColors() {
+        final ObservableList<Color> customColors = colorPicker.getCustomColors();
+        customColorGrid.getChildren().clear();
+        if (customColors.isEmpty()) {
+            customColorLabel.setVisible(false);
+            customColorLabel.setManaged(false);
+            customColorGrid.setVisible(false);
+            customColorGrid.setManaged(false);
+            return;
+        } else {
+            customColorLabel.setVisible(true);
+            customColorLabel.setManaged(true);
+            customColorGrid.setVisible(true);
+            customColorGrid.setManaged(true);
+        }
+
+        int customColumnIndex = 0;
+        int customRowIndex = 0;
+        int remainingSquares = customColors.size() % NUM_OF_COLUMNS;
+        int numEmpty = (remainingSquares == 0) ? 0 : NUM_OF_COLUMNS - remainingSquares;
+
+        for (int i = 0; i < customColors.size(); i++) {
+            Color c = customColors.get(i);
+            ColorSquare square = new ColorSquare(c, i, true);
+            customColorGrid.add(square, customColumnIndex, customRowIndex);
+            customColumnIndex++;
+            if (customColumnIndex == NUM_OF_COLUMNS) {
+                customColumnIndex = 0;
+                customRowIndex++;
+            }
+        }
+        for (int i = 0; i < numEmpty; i++) {
+            ColorSquare emptySquare = new ColorSquare();
+            customColorGrid.add(emptySquare, customColumnIndex, customRowIndex);
+            customColumnIndex++;
+        }
+        requestLayout();
+    }
+
+    private void initNavigation() {
+        setOnKeyPressed(ke -> {
+            switch (ke.getCode()) {
+                case SPACE:
+                case ENTER:
+                    // select the focused color
+                    if (focusedSquare != null) {
+                        focusedSquare.selectColor(ke);
+                    }
+                    ke.consume();
+                    break;
+                default: // no-op
+            }
+        });
+    }
+
+    public void setPopupControl(PopupControl pc) {
+        this.popupControl = pc;
+    }
+
+    public JFXColorGrid getColorGrid() {
+        return colorPickerGrid;
+    }
+
+    public boolean isCustomColorDialogShowing() {
+        return customColorDialog != null && customColorDialog.isVisible();
+    }
+
+    class ColorSquare extends StackPane {
+        Rectangle rectangle;
+        boolean isEmpty;
+
+        public ColorSquare() {
+            this(null, -1, false);
+        }
+
+        public ColorSquare(Color color, int index) {
+            this(color, index, false);
+        }
+
+        public ColorSquare(Color color, int index, boolean isCustom) {
+            // Add style class to handle selected color square
+            getStyleClass().add("color-square");
+            if (color != null) {
+                setFocusTraversable(true);
+                focusedProperty().addListener((s, ov, nv) -> setFocusedSquare(nv ? this : null));
+                addEventHandler(MouseEvent.MOUSE_ENTERED, event -> setFocusedSquare(ColorSquare.this));
+                addEventHandler(MouseEvent.MOUSE_EXITED, event -> setFocusedSquare(null));
+                addEventHandler(MouseEvent.MOUSE_RELEASED, event -> {
+                    if (!dragDetected && event.getButton() == MouseButton.PRIMARY && event.getClickCount() == 1) {
+                        if (!isEmpty) {
+                            Color fill = (Color) rectangle.getFill();
+                            colorPicker.setValue(fill);
+                            colorPicker.fireEvent(new ActionEvent());
+                            updateSelection(fill);
+                            event.consume();
+                        }
+                        colorPicker.hide();
+                    }
+                });
+            }
+            rectangle = new Rectangle(SQUARE_SIZE, SQUARE_SIZE);
+            if (color == null) {
+                rectangle.setFill(Color.WHITE);
+                isEmpty = true;
+            } else {
+                rectangle.setFill(color);
+            }
+
+            rectangle.setStrokeType(StrokeType.INSIDE);
+
+            String tooltipStr = JFXNodeUtils.colorToHex(color);
+            Tooltip.install(this, new Tooltip((tooltipStr == null) ? "" : tooltipStr));
+
+            rectangle.getStyleClass().add("color-rect");
+            getChildren().add(rectangle);
+        }
+
+        public void selectColor(KeyEvent event) {
+            if (rectangle.getFill() != null) {
+                if (rectangle.getFill() instanceof Color) {
+                    colorPicker.setValue((Color) rectangle.getFill());
+                    colorPicker.fireEvent(new ActionEvent());
+                }
+                event.consume();
+            }
+            colorPicker.hide();
+        }
+    }
+
+    // The skin can update selection if colorpicker value changes..
+    public void updateSelection(Color color) {
+        setFocusedSquare(null);
+
+        for (ColorSquare c : colorPickerGrid.getSquares()) {
+            if (c.rectangle.getFill().equals(color)) {
+                setFocusedSquare(c);
+                return;
+            }
+        }
+        // check custom colors
+        for (Node n : customColorGrid.getChildren()) {
+            ColorSquare c = (ColorSquare) n;
+            if (c.rectangle.getFill().equals(color)) {
+                setFocusedSquare(c);
+                return;
+            }
+        }
+    }
+
+    class JFXColorGrid extends GridPane {
+
+        private final List<ColorSquare> squares;
+        final int NUM_OF_COLORS;
+        final int NUM_OF_ROWS;
+
+        public JFXColorGrid() {
+            getStyleClass().add("color-picker-grid");
+            setId("ColorCustomizerColorGrid");
+            int columnIndex = 0;
+            int rowIndex = 0;
+            squares = FXCollections.observableArrayList();
+            double[] limitedColors = colorPicker.getPreDefinedColors();
+            limitedColors = limitedColors == null ? RAW_VALUES : limitedColors;
+            NUM_OF_COLORS = limitedColors.length / 3;
+            NUM_OF_ROWS = (int) Math.ceil((double) NUM_OF_COLORS / (double) NUM_OF_COLUMNS);
+            final int numColors = limitedColors.length / 3;
+            Color[] colors = new Color[numColors];
+            for (int i = 0; i < numColors; i++) {
+                colors[i] = new Color(limitedColors[i * 3] / 255,
+                        limitedColors[(i * 3) + 1] / 255, limitedColors[(i * 3) + 2] / 255,
+                        1.0);
+                ColorSquare cs = new ColorSquare(colors[i], i);
+                squares.add(cs);
+            }
+
+            for (ColorSquare square : squares) {
+                add(square, columnIndex, rowIndex);
+                columnIndex++;
+                if (columnIndex == NUM_OF_COLUMNS) {
+                    columnIndex = 0;
+                    rowIndex++;
+                }
+            }
+            setOnMouseDragged(t -> {
+                if (!dragDetected) {
+                    dragDetected = true;
+                    mouseDragColor = colorPicker.getValue();
+                }
+                int xIndex = clamp(0,
+                        (int) t.getX() / (SQUARE_SIZE + 1), NUM_OF_COLUMNS - 1);
+                int yIndex = clamp(0,
+                        (int) t.getY() / (SQUARE_SIZE + 1), NUM_OF_ROWS - 1);
+                int index = xIndex + yIndex * NUM_OF_COLUMNS;
+                colorPicker.setValue((Color) squares.get(index).rectangle.getFill());
+                updateSelection(colorPicker.getValue());
+            });
+            addEventHandler(MouseEvent.MOUSE_RELEASED, t -> {
+                if (colorPickerGrid.getBoundsInLocal().contains(t.getX(), t.getY())) {
+                    updateSelection(colorPicker.getValue());
+                    colorPicker.fireEvent(new ActionEvent());
+                    colorPicker.hide();
+                } else {
+                    // restore color as mouse release happened outside the grid.
+                    if (mouseDragColor != null) {
+                        colorPicker.setValue(mouseDragColor);
+                        updateSelection(mouseDragColor);
+                    }
+                }
+                dragDetected = false;
+            });
+        }
+
+        public List<ColorSquare> getSquares() {
+            return squares;
+        }
+
+        @Override
+        protected double computePrefWidth(double height) {
+            return (SQUARE_SIZE + 1) * NUM_OF_COLUMNS;
+        }
+
+        @Override
+        protected double computePrefHeight(double width) {
+            return (SQUARE_SIZE + 1) * NUM_OF_ROWS;
+        }
+    }
+
+    private static final int NUM_OF_COLUMNS = 10;
+    private static final double[] RAW_VALUES = {
+            // WARNING: always make sure the number of colors is a divisable by NUM_OF_COLUMNS
+            250, 250, 250, // first row
+            245, 245, 245,
+            238, 238, 238,
+            224, 224, 224,
+            189, 189, 189,
+            158, 158, 158,
+            117, 117, 117,
+            97, 97, 97,
+            66, 66, 66,
+            33, 33, 33,
+            // second row
+            236, 239, 241,
+            207, 216, 220,
+            176, 190, 197,
+            144, 164, 174,
+            120, 144, 156,
+            96, 125, 139,
+            84, 110, 122,
+            69, 90, 100,
+            55, 71, 79,
+            38, 50, 56,
+            // third row
+            255, 235, 238,
+            255, 205, 210,
+            239, 154, 154,
+            229, 115, 115,
+            239, 83, 80,
+            244, 67, 54,
+            229, 57, 53,
+            211, 47, 47,
+            198, 40, 40,
+            183, 28, 28,
+            // forth row
+            252, 228, 236,
+            248, 187, 208,
+            244, 143, 177,
+            240, 98, 146,
+            236, 64, 122,
+            233, 30, 99,
+            216, 27, 96,
+            194, 24, 91,
+            173, 20, 87,
+            136, 14, 79,
+            // fifth row
+            243, 229, 245,
+            225, 190, 231,
+            206, 147, 216,
+            186, 104, 200,
+            171, 71, 188,
+            156, 39, 176,
+            142, 36, 170,
+            123, 31, 162,
+            106, 27, 154,
+            74, 20, 140,
+            // sixth row
+            237, 231, 246,
+            209, 196, 233,
+            179, 157, 219,
+            149, 117, 205,
+            126, 87, 194,
+            103, 58, 183,
+            94, 53, 177,
+            81, 45, 168,
+            69, 39, 160,
+            49, 27, 146,
+            // seventh row
+            232, 234, 246,
+            197, 202, 233,
+            159, 168, 218,
+            121, 134, 203,
+            92, 107, 192,
+            63, 81, 181,
+            57, 73, 171,
+            48, 63, 159,
+            40, 53, 147,
+            26, 35, 126,
+            // eigth row
+            227, 242, 253,
+            187, 222, 251,
+            144, 202, 249,
+            100, 181, 246,
+            66, 165, 245,
+            33, 150, 243,
+            30, 136, 229,
+            25, 118, 210,
+            21, 101, 192,
+            13, 71, 161,
+            // ninth row
+            225, 245, 254,
+            179, 229, 252,
+            129, 212, 250,
+            79, 195, 247,
+            41, 182, 246,
+            3, 169, 244,
+            3, 155, 229,
+            2, 136, 209,
+            2, 119, 189,
+            1, 87, 155,
+            // tenth row
+            224, 247, 250,
+            178, 235, 242,
+            128, 222, 234,
+            77, 208, 225,
+            38, 198, 218,
+            0, 188, 212,
+            0, 172, 193,
+            0, 151, 167,
+            0, 131, 143,
+            0, 96, 100,
+            // eleventh row
+            224, 242, 241,
+            178, 223, 219,
+            128, 203, 196,
+            77, 182, 172,
+            38, 166, 154,
+            0, 150, 136,
+            0, 137, 123,
+            0, 121, 107,
+            0, 105, 92,
+            0, 77, 64,
+            // twelfth row
+            232, 245, 233,
+            200, 230, 201,
+            165, 214, 167,
+            129, 199, 132,
+            102, 187, 106,
+            76, 175, 80,
+            67, 160, 71,
+            56, 142, 60,
+            46, 125, 50,
+            27, 94, 32,
+
+            // thirteenth row
+            241, 248, 233,
+            220, 237, 200,
+            197, 225, 165,
+            174, 213, 129,
+            156, 204, 101,
+            139, 195, 74,
+            124, 179, 66,
+            104, 159, 56,
+            85, 139, 47,
+            51, 105, 30,
+            // fourteenth row
+            249, 251, 231,
+            240, 244, 195,
+            230, 238, 156,
+            220, 231, 117,
+            212, 225, 87,
+            205, 220, 57,
+            192, 202, 51,
+            175, 180, 43,
+            158, 157, 36,
+            130, 119, 23,
+
+            // fifteenth row
+            255, 253, 231,
+            255, 249, 196,
+            255, 245, 157,
+            255, 241, 118,
+            255, 238, 88,
+            255, 235, 59,
+            253, 216, 53,
+            251, 192, 45,
+            249, 168, 37,
+            245, 127, 23,
+
+            // sixteenth row
+            255, 248, 225,
+            255, 236, 179,
+            255, 224, 130,
+            255, 213, 79,
+            255, 202, 40,
+            255, 193, 7,
+            255, 179, 0,
+            255, 160, 0,
+            255, 143, 0,
+            255, 111, 0,
+
+            // seventeenth row
+            255, 243, 224,
+            255, 224, 178,
+            255, 204, 128,
+            255, 183, 77,
+            255, 167, 38,
+            255, 152, 0,
+            251, 140, 0,
+            245, 124, 0,
+            239, 108, 0,
+            230, 81, 0,
+
+            // eighteenth row
+            251, 233, 231,
+            255, 204, 188,
+            255, 171, 145,
+            255, 138, 101,
+            255, 112, 67,
+            255, 87, 34,
+            244, 81, 30,
+            230, 74, 25,
+            216, 67, 21,
+            191, 54, 12,
+
+            // nineteenth row
+            239, 235, 233,
+            215, 204, 200,
+            188, 170, 164,
+            161, 136, 127,
+            141, 110, 99,
+            121, 85, 72,
+            109, 76, 65,
+            93, 64, 55,
+            78, 52, 46,
+            62, 39, 35,
+    };
+
+    private static int clamp(int min, int value, int max) {
+        if (value < min) {
+            return min;
+        }
+        if (value > max) {
+            return max;
+        }
+        return value;
+    }
+}

HMCL/src/main/java/com/jfoenix/skins/JFXColorPickerSkin.java

@@ -0,0 +1,251 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.skins;
+
+import com.jfoenix.controls.JFXClippedPane;
+import com.jfoenix.controls.JFXColorPicker;
+import com.jfoenix.controls.JFXRippler;
+import com.jfoenix.effects.JFXDepthManager;
+import com.jfoenix.utils.JFXNodeUtils;
+import javafx.animation.Interpolator;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
+import javafx.css.*;
+import javafx.css.converter.BooleanConverter;
+import javafx.geometry.Insets;
+import javafx.scene.Node;
+import javafx.scene.control.ColorPicker;
+import javafx.scene.control.Label;
+import javafx.scene.control.TextField;
+import javafx.scene.control.skin.ComboBoxPopupControl;
+import javafx.scene.layout.Background;
+import javafx.scene.layout.BackgroundFill;
+import javafx.scene.layout.CornerRadii;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Circle;
+import javafx.util.Duration;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * @author Shadi Shaheen
+ */
+public final class JFXColorPickerSkin extends JFXGenericPickerSkin<Color> {
+
+    private final Label displayNode;
+    private final JFXClippedPane colorBox;
+    private JFXColorPalette popupContent;
+    StyleableBooleanProperty colorLabelVisible = new SimpleStyleableBooleanProperty(StyleableProperties.COLOR_LABEL_VISIBLE,
+            JFXColorPickerSkin.this,
+            "colorLabelVisible",
+            true);
+
+    public JFXColorPickerSkin(final ColorPicker colorPicker) {
+        super(colorPicker);
+
+        // create displayNode
+        displayNode = new Label("");
+        displayNode.getStyleClass().add("color-label");
+        displayNode.setMouseTransparent(true);
+
+        // label graphic
+        colorBox = new JFXClippedPane(displayNode);
+        colorBox.getStyleClass().add("color-box");
+        colorBox.setManaged(false);
+        initColor();
+        final JFXRippler rippler = new JFXRippler(colorBox, JFXRippler.RipplerMask.FIT);
+        rippler.ripplerFillProperty().bind(displayNode.textFillProperty());
+        getChildren().setAll(rippler);
+        JFXDepthManager.setDepth(getSkinnable(), 1);
+        getSkinnable().setPickOnBounds(false);
+
+        colorPicker.focusedProperty().addListener(observable -> {
+            if (colorPicker.isFocused()) {
+                if (!getSkinnable().isPressed()) {
+                    rippler.setOverlayVisible(true);
+                }
+            } else {
+                rippler.setOverlayVisible(false);
+            }
+        });
+
+        // add listeners
+        registerChangeListener(colorPicker.valueProperty(), obs -> updateColor());
+
+        colorLabelVisible.addListener(invalidate -> {
+            if (colorLabelVisible.get()) {
+                displayNode.setText(JFXNodeUtils.colorToHex(getSkinnable().getValue()));
+            } else {
+                displayNode.setText("");
+            }
+        });
+    }
+
+    @Override
+    protected double computePrefWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
+        double width = 100;
+        String displayNodeText = displayNode.getText();
+        displayNode.setText("#DDDDDD");
+        width = Math.max(width, super.computePrefWidth(height, topInset, rightInset, bottomInset, leftInset));
+        displayNode.setText(displayNodeText);
+        return width + rightInset + leftInset;
+    }
+
+    @Override
+    protected double computePrefHeight(double width, double topInset, double rightInset, double bottomInset, double leftInset) {
+        if (colorBox == null) {
+            reflectUpdateDisplayArea();
+        }
+        return topInset + colorBox.prefHeight(width) + bottomInset;
+    }
+
+    @Override
+    protected void layoutChildren(double x, double y, double w, double h) {
+        super.layoutChildren(x, y, w, h);
+        double hInsets = snappedLeftInset() + snappedRightInset();
+        double vInsets = snappedTopInset() + snappedBottomInset();
+        double width = w + hInsets;
+        double height = h + vInsets;
+        colorBox.resizeRelocate(0, 0, width, height);
+    }
+
+    @Override
+    protected Node getPopupContent() {
+        if (popupContent == null) {
+            popupContent = new JFXColorPalette((JFXColorPicker) getSkinnable());
+        }
+        return popupContent;
+    }
+
+    @Override
+    public void show() {
+        super.show();
+        final ColorPicker colorPicker = (ColorPicker) getSkinnable();
+        popupContent.updateSelection(colorPicker.getValue());
+    }
+
+    @Override
+    public Node getDisplayNode() {
+        return displayNode;
+    }
+
+    private void updateColor() {
+        final ColorPicker colorPicker = (ColorPicker) getSkinnable();
+        Color color = colorPicker.getValue();
+        Color circleColor = color == null ? Color.WHITE : color;
+        // update picker box color
+        if (((JFXColorPicker) getSkinnable()).isDisableAnimation()) {
+            JFXNodeUtils.updateBackground(colorBox.getBackground(), colorBox, circleColor);
+        } else {
+            Circle colorCircle = new Circle();
+            colorCircle.setFill(circleColor);
+            colorCircle.setManaged(false);
+            colorCircle.setLayoutX(colorBox.getWidth() / 4);
+            colorCircle.setLayoutY(colorBox.getHeight() / 2);
+            colorBox.getChildren().add(colorCircle);
+            Timeline animateColor = new Timeline(new KeyFrame(Duration.millis(240),
+                    new KeyValue(colorCircle.radiusProperty(),
+                            200,
+                            Interpolator.EASE_BOTH)));
+            animateColor.setOnFinished((finish) -> {
+                JFXNodeUtils.updateBackground(colorBox.getBackground(), colorBox, colorCircle.getFill());
+                colorBox.getChildren().remove(colorCircle);
+            });
+            animateColor.play();
+        }
+        // update label color
+        displayNode.setTextFill(circleColor.grayscale().getRed() < 0.5 ? Color.valueOf(
+                "rgba(255, 255, 255, 0.87)") : Color.valueOf("rgba(0, 0, 0, 0.87)"));
+        if (colorLabelVisible.get()) {
+            displayNode.setText(JFXNodeUtils.colorToHex(circleColor));
+        } else {
+            displayNode.setText("");
+        }
+    }
+
+    private void initColor() {
+        final ColorPicker colorPicker = (ColorPicker) getSkinnable();
+        Color color = colorPicker.getValue();
+        Color circleColor = color == null ? Color.WHITE : color;
+        // update picker box color
+        colorBox.setBackground(new Background(new BackgroundFill(circleColor, new CornerRadii(3), Insets.EMPTY)));
+        // update label color
+        displayNode.setTextFill(circleColor.grayscale().getRed() < 0.5 ? Color.valueOf(
+                "rgba(255, 255, 255, 0.87)") : Color.valueOf("rgba(0, 0, 0, 0.87)"));
+        if (colorLabelVisible.get()) {
+            displayNode.setText(JFXNodeUtils.colorToHex(circleColor));
+        } else {
+            displayNode.setText("");
+        }
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Stylesheet Handling                                                     *
+     *                                                                         *
+     **************************************************************************/
+
+    private static final class StyleableProperties {
+        private static final CssMetaData<ColorPicker, Boolean> COLOR_LABEL_VISIBLE =
+                new CssMetaData<ColorPicker, Boolean>("-fx-color-label-visible",
+                        BooleanConverter.getInstance(), Boolean.TRUE) {
+
+                    @Override
+                    public boolean isSettable(ColorPicker n) {
+                        final JFXColorPickerSkin skin = (JFXColorPickerSkin) n.getSkin();
+                        return skin.colorLabelVisible == null || !skin.colorLabelVisible.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<Boolean> getStyleableProperty(ColorPicker n) {
+                        final JFXColorPickerSkin skin = (JFXColorPickerSkin) n.getSkin();
+                        return skin.colorLabelVisible;
+                    }
+                };
+        private static final List<CssMetaData<? extends Styleable, ?>> STYLEABLES;
+
+        static {
+            final List<CssMetaData<? extends Styleable, ?>> styleables =
+                    new ArrayList<>(ComboBoxPopupControl.getClassCssMetaData());
+            styleables.add(COLOR_LABEL_VISIBLE);
+            STYLEABLES = Collections.unmodifiableList(styleables);
+        }
+    }
+
+    public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
+        return StyleableProperties.STYLEABLES;
+    }
+
+    @Override
+    public List<CssMetaData<? extends Styleable, ?>> getCssMetaData() {
+        return getClassCssMetaData();
+    }
+
+    protected TextField getEditor() {
+        return null;
+    }
+
+    protected javafx.util.StringConverter<Color> getConverter() {
+        return null;
+    }
+}

HMCL/src/main/java/com/jfoenix/skins/JFXColorPickerUI.java

@@ -0,0 +1,629 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.skins;
+
+import com.jfoenix.effects.JFXDepthManager;
+import com.jfoenix.transitions.CachedTransition;
+import javafx.animation.Animation.Status;
+import javafx.animation.*;
+import javafx.collections.FXCollections;
+import javafx.collections.ObservableList;
+import javafx.geometry.Point2D;
+import javafx.scene.Node;
+import javafx.scene.effect.ColorAdjust;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.image.PixelWriter;
+import javafx.scene.image.WritableImage;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.Pane;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Circle;
+import javafx.scene.shape.Path;
+import javafx.util.Duration;
+
+/**
+ * @author Shadi Shaheen & Bassel El Mabsout this UI allows the user to pick a color using HSL color system
+ */
+final class JFXColorPickerUI extends Pane {
+
+    private CachedTransition selectorTransition;
+    private int pickerSize = 400;
+    // sl circle selector size
+    private final int selectorSize = 20;
+    private final double centerX;
+    private final double centerY;
+    private final double huesRadius;
+    private final double slRadius;
+    private double currentHue = 0;
+
+    private final ImageView huesCircleView;
+    private final ImageView slCircleView;
+    private final Pane colorSelector;
+    private final Pane selector;
+    private CurveTransition colorsTransition;
+
+    public JFXColorPickerUI(int pickerSize) {
+        JFXDepthManager.setDepth(this, 1);
+
+        this.pickerSize = pickerSize;
+        this.centerX = (double) pickerSize / 2;
+        this.centerY = (double) pickerSize / 2;
+        final double pickerRadius = (double) pickerSize / 2;
+        this.huesRadius = pickerRadius * 0.9;
+        final double huesSmallR = pickerRadius * 0.8;
+        final double huesLargeR = pickerRadius;
+        this.slRadius = pickerRadius * 0.7;
+
+        // Create Hues Circle
+        huesCircleView = new ImageView(getHuesCircle(pickerSize, pickerSize));
+        // clip to smooth the edges
+        Circle outterCircle = new Circle(centerX, centerY, huesLargeR - 2);
+        Circle innterCircle = new Circle(centerX, centerY, huesSmallR + 2);
+        huesCircleView.setClip(Path.subtract(outterCircle, innterCircle));
+        this.getChildren().add(huesCircleView);
+
+        // create Hues Circle Selector
+        Circle r1 = new Circle(pickerRadius - huesSmallR);
+        Circle r2 = new Circle(pickerRadius - huesRadius);
+        colorSelector = new Pane();
+        colorSelector.setStyle("-fx-border-color:#424242; -fx-border-width:1px; -fx-background-color:rgba(255, 255, 255, 0.87);");
+        colorSelector.setPrefSize(pickerRadius - huesSmallR, pickerRadius - huesSmallR);
+        colorSelector.setShape(Path.subtract(r1, r2));
+        colorSelector.setCache(true);
+        colorSelector.setMouseTransparent(true);
+        colorSelector.setPickOnBounds(false);
+        this.getChildren().add(colorSelector);
+
+        // add Hues Selection Listeners
+        huesCircleView.addEventHandler(MouseEvent.MOUSE_DRAGGED, (event) -> {
+            if (colorsTransition != null) {
+                colorsTransition.stop();
+            }
+            double dx = event.getX() - centerX;
+            double dy = event.getY() - centerY;
+            double theta = Math.atan2(dy, dx);
+            double x = centerX + huesRadius * Math.cos(theta);
+            double y = centerY + huesRadius * Math.sin(theta);
+            colorSelector.setRotate(90 + Math.toDegrees(Math.atan2(dy, dx)));
+            colorSelector.setTranslateX(x - colorSelector.getPrefWidth() / 2);
+            colorSelector.setTranslateY(y - colorSelector.getPrefHeight() / 2);
+        });
+        huesCircleView.addEventHandler(MouseEvent.MOUSE_PRESSED, (event) -> {
+            double dx = event.getX() - centerX;
+            double dy = event.getY() - centerY;
+            double theta = Math.atan2(dy, dx);
+            double x = centerX + huesRadius * Math.cos(theta);
+            double y = centerY + huesRadius * Math.sin(theta);
+            colorsTransition = new CurveTransition(new Point2D(colorSelector.getTranslateX() + colorSelector.getPrefWidth() / 2,
+                    colorSelector.getTranslateY() + colorSelector.getPrefHeight() / 2),
+                    new Point2D(x, y));
+            colorsTransition.play();
+        });
+        colorSelector.translateXProperty()
+                .addListener((o, oldVal, newVal) -> updateHSLCircleColor((int) (newVal.intValue() + colorSelector.getPrefWidth() / 2),
+                        (int) (colorSelector.getTranslateY() + colorSelector
+                                .getPrefHeight() / 2)));
+        colorSelector.translateYProperty()
+                .addListener((o, oldVal, newVal) -> updateHSLCircleColor((int) (colorSelector.getTranslateX() + colorSelector
+                        .getPrefWidth() / 2), (int) (newVal.intValue() + colorSelector.getPrefHeight() / 2)));
+
+
+        // Create SL Circle
+        slCircleView = new ImageView(getSLCricle(pickerSize, pickerSize));
+        slCircleView.setClip(new Circle(centerX, centerY, slRadius - 2));
+        slCircleView.setPickOnBounds(false);
+        this.getChildren().add(slCircleView);
+
+        // create SL Circle Selector
+        selector = new Pane();
+        Circle c1 = new Circle(selectorSize / 2);
+        Circle c2 = new Circle((selectorSize / 2) * 0.5);
+        selector.setShape(Path.subtract(c1, c2));
+        selector.setStyle(
+                "-fx-border-color:#424242; -fx-border-width:1px;-fx-background-color:rgba(255, 255, 255, 0.87);");
+        selector.setPrefSize(selectorSize, selectorSize);
+        selector.setMinSize(selectorSize, selectorSize);
+        selector.setMaxSize(selectorSize, selectorSize);
+        selector.setCache(true);
+        selector.setMouseTransparent(true);
+        this.getChildren().add(selector);
+
+
+        // add SL selection Listeners
+        slCircleView.addEventHandler(MouseEvent.MOUSE_DRAGGED, (event) -> {
+            if (selectorTransition != null) {
+                selectorTransition.stop();
+            }
+            if (Math.pow(event.getX() - centerX, 2) + Math.pow(event.getY() - centerY, 2) < Math.pow(slRadius - 2, 2)) {
+                selector.setTranslateX(event.getX() - selector.getPrefWidth() / 2);
+                selector.setTranslateY(event.getY() - selector.getPrefHeight() / 2);
+            } else {
+                double dx = event.getX() - centerX;
+                double dy = event.getY() - centerY;
+                double theta = Math.atan2(dy, dx);
+                double x = centerX + (slRadius - 2) * Math.cos(theta);
+                double y = centerY + (slRadius - 2) * Math.sin(theta);
+                selector.setTranslateX(x - selector.getPrefWidth() / 2);
+                selector.setTranslateY(y - selector.getPrefHeight() / 2);
+            }
+        });
+        slCircleView.addEventHandler(MouseEvent.MOUSE_PRESSED, (event) -> {
+            selectorTransition = new CachedTransition(selector, new Timeline(new KeyFrame(Duration.millis(1000),
+                    new KeyValue(selector.translateXProperty(),
+                            event.getX() - selector.getPrefWidth() / 2,
+                            Interpolator.EASE_BOTH),
+                    new KeyValue(selector.translateYProperty(),
+                            event.getY() - selector.getPrefHeight() / 2,
+                            Interpolator.EASE_BOTH)))) {
+                {
+                    setCycleDuration(Duration.millis(160));
+                    setDelay(Duration.seconds(0));
+                }
+            };
+            selectorTransition.play();
+        });
+        // add slCircleView listener
+        selector.translateXProperty()
+                .addListener((o, oldVal, newVal) -> setColorAtLocation(newVal.intValue() + selectorSize / 2,
+                        (int) selector.getTranslateY() + selectorSize / 2));
+        selector.translateYProperty()
+                .addListener((o, oldVal, newVal) -> setColorAtLocation((int) selector.getTranslateX() + selectorSize / 2,
+                        newVal.intValue() + selectorSize / 2));
+
+
+        // initial color selection
+        double dx = 20 - centerX;
+        double dy = 20 - centerY;
+        double theta = Math.atan2(dy, dx);
+        double x = centerX + huesRadius * Math.cos(theta);
+        double y = centerY + huesRadius * Math.sin(theta);
+        colorSelector.setRotate(90 + Math.toDegrees(Math.atan2(dy, dx)));
+        colorSelector.setTranslateX(x - colorSelector.getPrefWidth() / 2);
+        colorSelector.setTranslateY(y - colorSelector.getPrefHeight() / 2);
+        selector.setTranslateX(centerX - selector.getPrefWidth() / 2);
+        selector.setTranslateY(centerY - selector.getPrefHeight() / 2);
+    }
+
+    /**
+     * List of Color Nodes that needs to be updated when picking a color
+     */
+    private final ObservableList<Node> colorNodes = FXCollections.observableArrayList();
+
+    public void addColorSelectionNode(Node... nodes) {
+        colorNodes.addAll(nodes);
+    }
+
+    public void removeColorSelectionNode(Node... nodes) {
+        colorNodes.removeAll(nodes);
+    }
+
+    private void updateHSLCircleColor(int x, int y) {
+        // transform color to HSL space
+        Color color = huesCircleView.getImage().getPixelReader().getColor(x, y);
+        double max = Math.max(color.getRed(), Math.max(color.getGreen(), color.getBlue()));
+        double min = Math.min(color.getRed(), Math.min(color.getGreen(), color.getBlue()));
+        double hue = 0;
+        if (max != min) {
+            double d = max - min;
+            if (max == color.getRed()) {
+                hue = (color.getGreen() - color.getBlue()) / d + (color.getGreen() < color.getBlue() ? 6 : 0);
+            } else if (max == color.getGreen()) {
+                hue = (color.getBlue() - color.getRed()) / d + 2;
+            } else if (max == color.getBlue()) {
+                hue = (color.getRed() - color.getGreen()) / d + 4;
+            }
+            hue /= 6;
+        }
+        currentHue = map(hue, 0, 1, 0, 255);
+
+        // refresh the HSL circle
+        refreshHSLCircle();
+    }
+
+    private void refreshHSLCircle() {
+        ColorAdjust colorAdjust = new ColorAdjust();
+        colorAdjust.setHue(map(currentHue + (currentHue < 127.5 ? 1 : -1) * 127.5, 0, 255, -1, 1));
+        slCircleView.setEffect(colorAdjust);
+        setColorAtLocation((int) selector.getTranslateX() + selectorSize / 2,
+                (int) selector.getTranslateY() + selectorSize / 2);
+    }
+
+
+    /**
+     * this method is used to move selectors to a certain color
+     */
+    private boolean allowColorChange = true;
+    private ParallelTransition pTrans;
+
+    public void moveToColor(Color color) {
+        allowColorChange = false;
+        double max = Math.max(color.getRed(),
+                Math.max(color.getGreen(), color.getBlue())), min = Math.min(color.getRed(),
+                Math.min(color.getGreen(),
+                        color.getBlue()));
+        double hue = 0;
+        double l = (max + min) / 2;
+        double s = 0;
+        if (max == min) {
+            hue = s = 0; // achromatic
+        } else {
+            double d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            if (max == color.getRed()) {
+                hue = (color.getGreen() - color.getBlue()) / d + (color.getGreen() < color.getBlue() ? 6 : 0);
+            } else if (max == color.getGreen()) {
+                hue = (color.getBlue() - color.getRed()) / d + 2;
+            } else if (max == color.getBlue()) {
+                hue = (color.getRed() - color.getGreen()) / d + 4;
+            }
+            hue /= 6;
+        }
+        currentHue = map(hue, 0, 1, 0, 255);
+
+        // Animate Hue
+        double theta = map(currentHue, 0, 255, -Math.PI, Math.PI);
+        double x = centerX + huesRadius * Math.cos(theta);
+        double y = centerY + huesRadius * Math.sin(theta);
+        colorsTransition = new CurveTransition(
+                new Point2D(
+                        colorSelector.getTranslateX() + colorSelector.getPrefWidth() / 2,
+                        colorSelector.getTranslateY() + colorSelector.getPrefHeight() / 2
+                ),
+                new Point2D(x, y));
+
+        // Animate SL
+        s = map(s, 0, 1, 0, 255);
+        l = map(l, 0, 1, 0, 255);
+        Point2D point = getPointFromSL((int) s, (int) l, slRadius);
+        double pX = centerX - point.getX();
+        double pY = centerY - point.getY();
+
+        double endPointX;
+        double endPointY;
+        if (Math.pow(pX - centerX, 2) + Math.pow(pY - centerY, 2) < Math.pow(slRadius - 2, 2)) {
+            endPointX = pX - selector.getPrefWidth() / 2;
+            endPointY = pY - selector.getPrefHeight() / 2;
+        } else {
+            double dx = pX - centerX;
+            double dy = pY - centerY;
+            theta = Math.atan2(dy, dx);
+            x = centerX + (slRadius - 2) * Math.cos(theta);
+            y = centerY + (slRadius - 2) * Math.sin(theta);
+            endPointX = x - selector.getPrefWidth() / 2;
+            endPointY = y - selector.getPrefHeight() / 2;
+        }
+        selectorTransition = new CachedTransition(selector, new Timeline(new KeyFrame(Duration.millis(1000),
+                new KeyValue(selector.translateXProperty(),
+                        endPointX,
+                        Interpolator.EASE_BOTH),
+                new KeyValue(selector.translateYProperty(),
+                        endPointY,
+                        Interpolator.EASE_BOTH)))) {
+            {
+                setCycleDuration(Duration.millis(160));
+                setDelay(Duration.seconds(0));
+            }
+        };
+
+        if (pTrans != null) {
+            pTrans.stop();
+        }
+        pTrans = new ParallelTransition(colorsTransition, selectorTransition);
+        pTrans.setOnFinished((finish) -> {
+            if (pTrans.getStatus() == Status.STOPPED) {
+                allowColorChange = true;
+            }
+        });
+        pTrans.play();
+
+        refreshHSLCircle();
+    }
+
+    private void setColorAtLocation(int x, int y) {
+        if (allowColorChange) {
+            Color color = getColorAtLocation(x, y);
+            String colorString = "rgb(" + color.getRed() * 255 + "," + color.getGreen() * 255 + "," + color.getBlue() * 255 + ");";
+            for (Node node : colorNodes)
+                node.setStyle("-fx-background-color:" + colorString + "; -fx-fill:" + colorString + ";");
+        }
+    }
+
+    private Color getColorAtLocation(double x, double y) {
+        double dy = x - centerX;
+        double dx = y - centerY;
+        return getColor(dx, dy);
+    }
+
+    private Image getHuesCircle(int width, int height) {
+        WritableImage raster = new WritableImage(width, height);
+        PixelWriter pixelWriter = raster.getPixelWriter();
+        Point2D center = new Point2D((double) width / 2, (double) height / 2);
+        double rsmall = 0.8 * width / 2;
+        double rbig = (double) width / 2;
+        for (int y = 0; y < height; y++) {
+            for (int x = 0; x < width; x++) {
+                double dx = x - center.getX();
+                double dy = y - center.getY();
+                double distance = Math.sqrt((dx * dx) + (dy * dy));
+                double o = Math.atan2(dy, dx);
+                if (distance > rsmall && distance < rbig) {
+                    double H = map(o, -Math.PI, Math.PI, 0, 255);
+                    double S = 255;
+                    double L = 152;
+                    pixelWriter.setColor(x, y, HSL2RGB(H, S, L));
+                }
+            }
+        }
+        return raster;
+    }
+
+    private Image getSLCricle(int width, int height) {
+        WritableImage raster = new WritableImage(width, height);
+        PixelWriter pixelWriter = raster.getPixelWriter();
+        Point2D center = new Point2D((double) width / 2, (double) height / 2);
+        for (int y = 0; y < height; y++) {
+            for (int x = 0; x < width; x++) {
+                double dy = x - center.getX();
+                double dx = y - center.getY();
+                pixelWriter.setColor(x, y, getColor(dx, dy));
+            }
+        }
+        return raster;
+    }
+
+    private double clamp(double from, double small, double big) {
+        return Math.min(Math.max(from, small), big);
+    }
+
+    private Color getColor(double dx, double dy) {
+        double distance = Math.sqrt((dx * dx) + (dy * dy));
+        double rverysmall = 0.65 * ((double) pickerSize / 2);
+        Color pixelColor = Color.BLUE;
+
+        if (distance <= rverysmall * 1.1) {
+            double angle = -Math.PI / 2.;
+            double angle1 = angle + 2 * Math.PI / 3.;
+            double angle2 = angle1 + 2 * Math.PI / 3.;
+            double x1 = rverysmall * Math.sin(angle1);
+            double y1 = rverysmall * Math.cos(angle1);
+            double x2 = rverysmall * Math.sin(angle2);
+            double y2 = rverysmall * Math.cos(angle2);
+            dx += 0.01;
+            double[] circle = circleFrom3Points(new Point2D(x1, y1), new Point2D(x2, y2), new Point2D(dx, dy));
+            double xArc = circle[0];
+            double yArc = 0;
+            double arcR = circle[2];
+            double Arco = Math.atan2(dx - xArc, dy - yArc);
+            double Arco1 = Math.atan2(x1 - xArc, y1 - yArc);
+            double Arco2 = Math.atan2(x2 - xArc, y2 - yArc);
+
+            double finalX = xArc > 0 ? xArc - arcR : xArc + arcR;
+
+            double saturation = map(finalX, -rverysmall, rverysmall, 255, 0);
+
+            double lightness = 255;
+            double diffAngle = Arco2 - Arco1;
+            double diffArco = Arco - Arco1;
+            if (dx < x1) {
+                diffAngle = diffAngle < 0 ? 2 * Math.PI + diffAngle : diffAngle;
+                diffAngle = Math.abs(2 * Math.PI - diffAngle);
+                diffArco = diffArco < 0 ? 2 * Math.PI + diffArco : diffArco;
+                diffArco = Math.abs(2 * Math.PI - diffArco);
+            }
+            lightness = map(diffArco, 0, diffAngle, 0, 255);
+
+
+            if (distance > rverysmall) {
+                saturation = 255 - saturation;
+                if (lightness < 0 && dy < 0) {
+                    lightness = 255;
+                }
+            }
+            lightness = clamp(lightness, 0, 255);
+            if ((saturation < 10 && dx < x1) || (saturation > 240 && dx > x1)) {
+                saturation = 255 - saturation;
+            }
+            saturation = clamp(saturation, 0, 255);
+            pixelColor = HSL2RGB(currentHue, saturation, lightness);
+        }
+        return pixelColor;
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Hues Animation                                                          *
+     *                                                                         *
+     **************************************************************************/
+
+    private final class CurveTransition extends Transition {
+        Point2D from;
+        double fromTheta;
+        double toTheta;
+
+        public CurveTransition(Point2D from, Point2D to) {
+            this.from = from;
+            double fromDx = from.getX() - centerX;
+            double fromDy = from.getY() - centerY;
+            fromTheta = Math.atan2(fromDy, fromDx);
+            double toDx = to.getX() - centerX;
+            double toDy = to.getY() - centerY;
+            toTheta = Math.atan2(toDy, toDx);
+            setInterpolator(Interpolator.EASE_BOTH);
+            setDelay(Duration.millis(0));
+            setCycleDuration(Duration.millis(240));
+        }
+
+        @Override
+        protected void interpolate(double frac) {
+            double dif = Math.min(Math.abs(toTheta - fromTheta), 2 * Math.PI - Math.abs(toTheta - fromTheta));
+            if (dif == 2 * Math.PI - Math.abs(toTheta - fromTheta)) {
+                int dir = -1;
+                if (toTheta < fromTheta) {
+                    dir = 1;
+                }
+                dif = dir * dif;
+            } else {
+                dif = toTheta - fromTheta;
+            }
+
+            Point2D newP = rotate(from, new Point2D(centerX, centerY), frac * dif);
+            colorSelector.setRotate(90 + Math.toDegrees(Math.atan2(newP.getY() - centerY, newP.getX() - centerX)));
+            colorSelector.setTranslateX(newP.getX() - colorSelector.getPrefWidth() / 2);
+            colorSelector.setTranslateY(newP.getY() - colorSelector.getPrefHeight() / 2);
+        }
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Util methods                                                            *
+     *                                                                         *
+     **************************************************************************/
+
+    private double map(double val, double min1, double max1, double min2, double max2) {
+        return min2 + (max2 - min2) * ((val - min1) / (max1 - min1));
+    }
+
+    private Color HSL2RGB(double hue, double sat, double lum) {
+        hue = map(hue, 0, 255, 0, 359);
+        sat = map(sat, 0, 255, 0, 1);
+        lum = map(lum, 0, 255, 0, 1);
+        double v;
+        double red, green, blue;
+        double m;
+        double sv;
+        int sextant;
+        double fract, vsf, mid1, mid2;
+
+        red = lum;   // default to gray
+        green = lum;
+        blue = lum;
+        v = (lum <= 0.5) ? (lum * (1.0 + sat)) : (lum + sat - lum * sat);
+        m = lum + lum - v;
+        sv = (v - m) / v;
+        hue /= 60.0;  //get into range 0..6
+        sextant = (int) Math.floor(hue);  // int32 rounds up or down.
+        fract = hue - sextant;
+        vsf = v * sv * fract;
+        mid1 = m + vsf;
+        mid2 = v - vsf;
+
+        if (v > 0) {
+            switch (sextant) {
+                case 0:
+                    red = v;
+                    green = mid1;
+                    blue = m;
+                    break;
+                case 1:
+                    red = mid2;
+                    green = v;
+                    blue = m;
+                    break;
+                case 2:
+                    red = m;
+                    green = v;
+                    blue = mid1;
+                    break;
+                case 3:
+                    red = m;
+                    green = mid2;
+                    blue = v;
+                    break;
+                case 4:
+                    red = mid1;
+                    green = m;
+                    blue = v;
+                    break;
+                case 5:
+                    red = v;
+                    green = m;
+                    blue = mid2;
+                    break;
+            }
+        }
+        return new Color(red, green, blue, 1);
+    }
+
+    private double[] circleFrom3Points(Point2D a, Point2D b, Point2D c) {
+        double ax, ay, bx, by, cx, cy, x1, y11, dx1, dy1, x2, y2, dx2, dy2, ox, oy, dx, dy, radius; // Variables Used and to Declared
+        ax = a.getX();
+        ay = a.getY(); //first Point X and Y
+        bx = b.getX();
+        by = b.getY(); // Second Point X and Y
+        cx = c.getX();
+        cy = c.getY(); // Third Point X and Y
+
+        ////****************Following are Basic Procedure**********************///
+        x1 = (bx + ax) / 2;
+        y11 = (by + ay) / 2;
+        dy1 = bx - ax;
+        dx1 = -(by - ay);
+
+        x2 = (cx + bx) / 2;
+        y2 = (cy + by) / 2;
+        dy2 = cx - bx;
+        dx2 = -(cy - by);
+
+        ox = (y11 * dx1 * dx2 + x2 * dx1 * dy2 - x1 * dy1 * dx2 - y2 * dx1 * dx2) / (dx1 * dy2 - dy1 * dx2);
+        oy = (ox - x1) * dy1 / dx1 + y11;
+
+        dx = ox - ax;
+        dy = oy - ay;
+        radius = Math.sqrt(dx * dx + dy * dy);
+        return new double[]{ox, oy, radius};
+    }
+
+    private Point2D getPointFromSL(int saturation, int lightness, double radius) {
+        double dy = map(saturation, 0, 255, -radius, radius);
+        double angle = 0.;
+        double angle1 = angle + 2 * Math.PI / 3.;
+        double angle2 = angle1 + 2 * Math.PI / 3.;
+        double x1 = radius * Math.sin(angle1);
+        double y1 = radius * Math.cos(angle1);
+        double x2 = radius * Math.sin(angle2);
+        double y2 = radius * Math.cos(angle2);
+        double dx = 0;
+        double[] circle = circleFrom3Points(new Point2D(x1, y1), new Point2D(dx, dy), new Point2D(x2, y2));
+        double xArc = circle[0];
+        double yArc = circle[1];
+        double arcR = circle[2];
+        double Arco1 = Math.atan2(x1 - xArc, y1 - yArc);
+        double Arco2 = Math.atan2(x2 - xArc, y2 - yArc);
+        double ArcoFinal = map(lightness, 0, 255, Arco2, Arco1);
+        double finalX = xArc + arcR * Math.sin(ArcoFinal);
+        double finalY = yArc + arcR * Math.cos(ArcoFinal);
+        if (dy < y1) {
+            ArcoFinal = map(lightness, 0, 255, Arco1, Arco2 + 2 * Math.PI);
+            finalX = -xArc - arcR * Math.sin(ArcoFinal);
+            finalY = yArc + arcR * Math.cos(ArcoFinal);
+        }
+        return new Point2D(finalX, finalY);
+    }
+
+    private Point2D rotate(Point2D a, Point2D center, double angle) {
+        double resultX = center.getX() + (a.getX() - center.getX()) * Math.cos(angle) - (a.getY() - center.getY()) * Math
+                .sin(angle);
+        double resultY = center.getY() + (a.getX() - center.getX()) * Math.sin(angle) + (a.getY() - center.getY()) * Math
+                .cos(angle);
+        return new Point2D(resultX, resultY);
+    }
+
+}

HMCL/src/main/java/com/jfoenix/skins/JFXCustomColorPicker.java

@@ -0,0 +1,520 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.skins;
+
+import com.jfoenix.effects.JFXDepthManager;
+import com.jfoenix.transitions.CachedTransition;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
+import javafx.beans.binding.Bindings;
+import javafx.beans.property.DoubleProperty;
+import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.SimpleDoubleProperty;
+import javafx.beans.property.SimpleObjectProperty;
+import javafx.geometry.Point2D;
+import javafx.scene.Node;
+import javafx.scene.effect.DropShadow;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.Pane;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.*;
+import javafx.scene.transform.Rotate;
+import javafx.util.Duration;
+
+import java.util.ArrayList;
+
+import static javafx.animation.Interpolator.EASE_BOTH;
+
+/// @author Shadi Shaheen
+final class JFXCustomColorPicker extends Pane {
+
+    ObjectProperty<RecentColorPath> selectedPath = new SimpleObjectProperty<>();
+    private MoveTo startPoint;
+    private CubicCurveTo curve0To;
+    private CubicCurveTo outerCircleCurveTo;
+    private CubicCurveTo curve1To;
+    private CubicCurveTo innerCircleCurveTo;
+    private final ArrayList<CubicCurve> curves = new ArrayList<>();
+
+    private final double distance = 200;
+    private final double centerX = distance;
+    private final double centerY = distance;
+    private final double radius = 110;
+
+    private static final int shapesNumber = 13;
+    private final ArrayList<RecentColorPath> shapes = new ArrayList<>();
+    private CachedTransition showAnimation;
+    private final JFXColorPickerUI hslColorPicker;
+
+    public JFXCustomColorPicker() {
+        this.setPickOnBounds(false);
+        this.setMinSize(distance * 2, distance * 2);
+
+        final DoubleProperty rotationAngle = new SimpleDoubleProperty(2.1);
+
+        // draw recent colors shape using cubic curves
+        init(rotationAngle, centerX + 53, centerY + 162);
+
+        hslColorPicker = new JFXColorPickerUI((int) distance);
+        hslColorPicker.setLayoutX(centerX - distance / 2);
+        hslColorPicker.setLayoutY(centerY - distance / 2);
+        this.getChildren().add(hslColorPicker);
+        // add recent colors shapes
+        final int shapesStartIndex = this.getChildren().size();
+        final int shapesEndIndex = shapesStartIndex + shapesNumber;
+        for (int i = 0; i < shapesNumber; i++) {
+            final double angle = 2 * i * Math.PI / shapesNumber;
+            final RecentColorPath path = new RecentColorPath(startPoint,
+                    curve0To,
+                    outerCircleCurveTo,
+                    curve1To,
+                    innerCircleCurveTo);
+            shapes.add(path);
+            path.setPickOnBounds(false);
+            final Rotate rotate = new Rotate(Math.toDegrees(angle), centerX, centerY);
+            path.getTransforms().add(rotate);
+            this.getChildren().add(shapesStartIndex, path);
+            path.setFill(Color.valueOf(getDefaultColor(i)));
+            path.setFocusTraversable(true);
+            path.addEventHandler(MouseEvent.MOUSE_CLICKED, (event) -> {
+                path.requestFocus();
+                selectedPath.set(path);
+            });
+        }
+
+        // add selection listeners
+        selectedPath.addListener((o, oldVal, newVal) -> {
+            if (oldVal != null) {
+                hslColorPicker.removeColorSelectionNode(oldVal);
+                oldVal.playTransition(-1);
+            }
+            // re-arrange children
+            while (this.getChildren().indexOf(newVal) != shapesEndIndex - 1) {
+                final Node temp = this.getChildren().get(shapesEndIndex - 1);
+                this.getChildren().remove(shapesEndIndex - 1);
+                this.getChildren().add(shapesStartIndex, temp);
+            }
+            // update path fill according to the color picker
+            newVal.setStroke(Color.rgb(255, 255, 255, 0.87));
+            newVal.playTransition(1);
+            hslColorPicker.moveToColor((Color) newVal.getFill());
+            hslColorPicker.addColorSelectionNode(newVal);
+        });
+        // init selection
+        selectedPath.set((RecentColorPath) this.getChildren().get(shapesStartIndex));
+    }
+
+    public int getShapesNumber() {
+        return shapesNumber;
+    }
+
+    public int getSelectedIndex() {
+        if (selectedPath.get() != null) {
+            return shapes.indexOf(selectedPath.get());
+        }
+        return -1;
+    }
+
+    public void setColor(final Color color) {
+        shapes.get(getSelectedIndex()).setFill(color);
+        hslColorPicker.moveToColor(color);
+    }
+
+    public Color getColor(final int index) {
+        if (index >= 0 && index < shapes.size()) {
+            return (Color) shapes.get(index).getFill();
+        } else {
+            return Color.WHITE;
+        }
+    }
+
+    public void preAnimate() {
+        final CubicCurve firstCurve = curves.get(0);
+        final double x = firstCurve.getStartX();
+        final double y = firstCurve.getStartY();
+        firstCurve.setStartX(centerX);
+        firstCurve.setStartY(centerY);
+
+        final CubicCurve secondCurve = curves.get(1);
+        final double x1 = secondCurve.getStartX();
+        final double y1 = secondCurve.getStartY();
+        secondCurve.setStartX(centerX);
+        secondCurve.setStartY(centerY);
+
+        final double cx1 = firstCurve.getControlX1();
+        final double cy1 = firstCurve.getControlY1();
+        firstCurve.setControlX1(centerX + radius);
+        firstCurve.setControlY1(centerY + radius / 2);
+
+        final KeyFrame keyFrame = new KeyFrame(Duration.millis(1000),
+                new KeyValue(firstCurve.startXProperty(), x, EASE_BOTH),
+                new KeyValue(firstCurve.startYProperty(), y, EASE_BOTH),
+                new KeyValue(secondCurve.startXProperty(), x1, EASE_BOTH),
+                new KeyValue(secondCurve.startYProperty(), y1, EASE_BOTH),
+                new KeyValue(firstCurve.controlX1Property(), cx1, EASE_BOTH),
+                new KeyValue(firstCurve.controlY1Property(), cy1, EASE_BOTH)
+        );
+        final Timeline timeline = new Timeline(keyFrame);
+        showAnimation = new CachedTransition(this, timeline) {
+            {
+                setCycleDuration(Duration.millis(240));
+                setDelay(Duration.millis(0));
+            }
+        };
+    }
+
+    public void animate() {
+        showAnimation.play();
+    }
+
+    private void init(final DoubleProperty rotationAngle, final double initControlX1, final double initControlY1) {
+
+        final Circle innerCircle = new Circle(centerX, centerY, radius, Color.TRANSPARENT);
+        final Circle outerCircle = new Circle(centerX, centerY, radius * 2, Color.web("blue", 0.5));
+
+        // Create a composite shape of 4 cubic curves
+        // create 2 cubic curves of the shape
+        createQuadraticCurve(rotationAngle, initControlX1, initControlY1);
+
+        // inner circle curve
+        final CubicCurve innerCircleCurve = new CubicCurve();
+        innerCircleCurve.startXProperty().bind(curves.get(0).startXProperty());
+        innerCircleCurve.startYProperty().bind(curves.get(0).startYProperty());
+        innerCircleCurve.endXProperty().bind(curves.get(1).startXProperty());
+        innerCircleCurve.endYProperty().bind(curves.get(1).startYProperty());
+        curves.get(0).startXProperty().addListener((o, oldVal, newVal) -> {
+            final Point2D controlPoint = makeControlPoint(newVal.doubleValue(),
+                    curves.get(0).getStartY(),
+                    innerCircle,
+                    shapesNumber,
+                    -1);
+            innerCircleCurve.setControlX1(controlPoint.getX());
+            innerCircleCurve.setControlY1(controlPoint.getY());
+        });
+        curves.get(0).startYProperty().addListener((o, oldVal, newVal) -> {
+            final Point2D controlPoint = makeControlPoint(curves.get(0).getStartX(),
+                    newVal.doubleValue(),
+                    innerCircle,
+                    shapesNumber,
+                    -1);
+            innerCircleCurve.setControlX1(controlPoint.getX());
+            innerCircleCurve.setControlY1(controlPoint.getY());
+        });
+        curves.get(1).startXProperty().addListener((o, oldVal, newVal) -> {
+            final Point2D controlPoint = makeControlPoint(newVal.doubleValue(),
+                    curves.get(1).getStartY(),
+                    innerCircle,
+                    shapesNumber,
+                    1);
+            innerCircleCurve.setControlX2(controlPoint.getX());
+            innerCircleCurve.setControlY2(controlPoint.getY());
+        });
+        curves.get(1).startYProperty().addListener((o, oldVal, newVal) -> {
+            final Point2D controlPoint = makeControlPoint(curves.get(1).getStartX(),
+                    newVal.doubleValue(),
+                    innerCircle,
+                    shapesNumber,
+                    1);
+            innerCircleCurve.setControlX2(controlPoint.getX());
+            innerCircleCurve.setControlY2(controlPoint.getY());
+        });
+        Point2D controlPoint = makeControlPoint(curves.get(0).getStartX(),
+                curves.get(0).getStartY(),
+                innerCircle,
+                shapesNumber,
+                -1);
+        innerCircleCurve.setControlX1(controlPoint.getX());
+        innerCircleCurve.setControlY1(controlPoint.getY());
+        controlPoint = makeControlPoint(curves.get(1).getStartX(),
+                curves.get(1).getStartY(),
+                innerCircle,
+                shapesNumber,
+                1);
+        innerCircleCurve.setControlX2(controlPoint.getX());
+        innerCircleCurve.setControlY2(controlPoint.getY());
+
+        // outer circle curve
+        final CubicCurve outerCircleCurve = new CubicCurve();
+        outerCircleCurve.startXProperty().bind(curves.get(0).endXProperty());
+        outerCircleCurve.startYProperty().bind(curves.get(0).endYProperty());
+        outerCircleCurve.endXProperty().bind(curves.get(1).endXProperty());
+        outerCircleCurve.endYProperty().bind(curves.get(1).endYProperty());
+        controlPoint = makeControlPoint(curves.get(0).getEndX(),
+                curves.get(0).getEndY(),
+                outerCircle,
+                shapesNumber,
+                -1);
+        outerCircleCurve.setControlX1(controlPoint.getX());
+        outerCircleCurve.setControlY1(controlPoint.getY());
+        controlPoint = makeControlPoint(curves.get(1).getEndX(), curves.get(1).getEndY(), outerCircle, shapesNumber, 1);
+        outerCircleCurve.setControlX2(controlPoint.getX());
+        outerCircleCurve.setControlY2(controlPoint.getY());
+
+        startPoint = new MoveTo();
+        startPoint.xProperty().bind(curves.get(0).startXProperty());
+        startPoint.yProperty().bind(curves.get(0).startYProperty());
+
+        curve0To = new CubicCurveTo();
+        curve0To.controlX1Property().bind(curves.get(0).controlX1Property());
+        curve0To.controlY1Property().bind(curves.get(0).controlY1Property());
+        curve0To.controlX2Property().bind(curves.get(0).controlX2Property());
+        curve0To.controlY2Property().bind(curves.get(0).controlY2Property());
+        curve0To.xProperty().bind(curves.get(0).endXProperty());
+        curve0To.yProperty().bind(curves.get(0).endYProperty());
+
+        outerCircleCurveTo = new CubicCurveTo();
+        outerCircleCurveTo.controlX1Property().bind(outerCircleCurve.controlX1Property());
+        outerCircleCurveTo.controlY1Property().bind(outerCircleCurve.controlY1Property());
+        outerCircleCurveTo.controlX2Property().bind(outerCircleCurve.controlX2Property());
+        outerCircleCurveTo.controlY2Property().bind(outerCircleCurve.controlY2Property());
+        outerCircleCurveTo.xProperty().bind(outerCircleCurve.endXProperty());
+        outerCircleCurveTo.yProperty().bind(outerCircleCurve.endYProperty());
+
+        curve1To = new CubicCurveTo();
+        curve1To.controlX1Property().bind(curves.get(1).controlX2Property());
+        curve1To.controlY1Property().bind(curves.get(1).controlY2Property());
+        curve1To.controlX2Property().bind(curves.get(1).controlX1Property());
+        curve1To.controlY2Property().bind(curves.get(1).controlY1Property());
+        curve1To.xProperty().bind(curves.get(1).startXProperty());
+        curve1To.yProperty().bind(curves.get(1).startYProperty());
+
+        innerCircleCurveTo = new CubicCurveTo();
+        innerCircleCurveTo.controlX1Property().bind(innerCircleCurve.controlX2Property());
+        innerCircleCurveTo.controlY1Property().bind(innerCircleCurve.controlY2Property());
+        innerCircleCurveTo.controlX2Property().bind(innerCircleCurve.controlX1Property());
+        innerCircleCurveTo.controlY2Property().bind(innerCircleCurve.controlY1Property());
+        innerCircleCurveTo.xProperty().bind(innerCircleCurve.startXProperty());
+        innerCircleCurveTo.yProperty().bind(innerCircleCurve.startYProperty());
+    }
+
+    private void createQuadraticCurve(final DoubleProperty rotationAngle, final double initControlX1, final double initControlY1) {
+        for (int i = 0; i < 2; i++) {
+
+            double angle = 2 * i * Math.PI / shapesNumber;
+            double xOffset = radius * Math.cos(angle);
+            double yOffset = radius * Math.sin(angle);
+            final double startx = centerX + xOffset;
+            final double starty = centerY + yOffset;
+
+            final double diffStartCenterX = startx - centerX;
+            final double diffStartCenterY = starty - centerY;
+            final double sinRotAngle = Math.sin(rotationAngle.get());
+            final double cosRotAngle = Math.cos(rotationAngle.get());
+            final double startXR = cosRotAngle * diffStartCenterX - sinRotAngle * diffStartCenterY + centerX;
+            final double startYR = sinRotAngle * diffStartCenterX + cosRotAngle * diffStartCenterY + centerY;
+
+            angle = 2 * i * Math.PI / shapesNumber;
+            xOffset = distance * Math.cos(angle);
+            yOffset = distance * Math.sin(angle);
+
+            final double endx = centerX + xOffset;
+            final double endy = centerY + yOffset;
+
+            final CubicCurve curvedLine = new CubicCurve();
+            curvedLine.setStartX(startXR);
+            curvedLine.setStartY(startYR);
+            curvedLine.setControlX1(startXR);
+            curvedLine.setControlY1(startYR);
+            curvedLine.setControlX2(endx);
+            curvedLine.setControlY2(endy);
+            curvedLine.setEndX(endx);
+            curvedLine.setEndY(endy);
+            curvedLine.setStroke(Color.FORESTGREEN);
+            curvedLine.setStrokeWidth(1);
+            curvedLine.setStrokeLineCap(StrokeLineCap.ROUND);
+            curvedLine.setFill(Color.TRANSPARENT);
+            curvedLine.setMouseTransparent(true);
+            rotationAngle.addListener((o, oldVal, newVal) -> {
+                final double newstartXR = ((cosRotAngle * diffStartCenterX) - (sinRotAngle * diffStartCenterY)) + centerX;
+                final double newstartYR = (sinRotAngle * diffStartCenterX) + (cosRotAngle * diffStartCenterY) + centerY;
+                curvedLine.setStartX(newstartXR);
+                curvedLine.setStartY(newstartYR);
+            });
+
+            curves.add(curvedLine);
+
+            if (i == 0) {
+                curvedLine.setControlX1(initControlX1);
+                curvedLine.setControlY1(initControlY1);
+            } else {
+                final CubicCurve firstCurve = curves.get(0);
+                final double curveTheta = 2 * curves.indexOf(curvedLine) * Math.PI / shapesNumber;
+
+                curvedLine.controlX1Property().bind(Bindings.createDoubleBinding(() -> {
+                    final double a = firstCurve.getControlX1() - centerX;
+                    final double b = Math.sin(curveTheta) * (firstCurve.getControlY1() - centerY);
+                    return ((Math.cos(curveTheta) * a) - b) + centerX;
+                }, firstCurve.controlX1Property(), firstCurve.controlY1Property()));
+
+                curvedLine.controlY1Property().bind(Bindings.createDoubleBinding(() -> {
+                    final double a = Math.sin(curveTheta) * (firstCurve.getControlX1() - centerX);
+                    final double b = Math.cos(curveTheta) * (firstCurve.getControlY1() - centerY);
+                    return a + b + centerY;
+                }, firstCurve.controlX1Property(), firstCurve.controlY1Property()));
+
+
+                curvedLine.controlX2Property().bind(Bindings.createDoubleBinding(() -> {
+                    final double a = firstCurve.getControlX2() - centerX;
+                    final double b = firstCurve.getControlY2() - centerY;
+                    return ((Math.cos(curveTheta) * a) - (Math.sin(curveTheta) * b)) + centerX;
+                }, firstCurve.controlX2Property(), firstCurve.controlY2Property()));
+
+                curvedLine.controlY2Property().bind(Bindings.createDoubleBinding(() -> {
+                    final double a = Math.sin(curveTheta) * (firstCurve.getControlX2() - centerX);
+                    final double b = Math.cos(curveTheta) * (firstCurve.getControlY2() - centerY);
+                    return a + b + centerY;
+                }, firstCurve.controlX2Property(), firstCurve.controlY2Property()));
+            }
+        }
+    }
+
+    private String getDefaultColor(final int i) {
+        String color = "#FFFFFF";
+        switch (i) {
+            case 0:
+                color = "#8F3F7E";
+                break;
+            case 1:
+                color = "#B5305F";
+                break;
+            case 2:
+                color = "#CE584A";
+                break;
+            case 3:
+                color = "#DB8D5C";
+                break;
+            case 4:
+                color = "#DA854E";
+                break;
+            case 5:
+                color = "#E9AB44";
+                break;
+            case 6:
+                color = "#FEE435";
+                break;
+            case 7:
+                color = "#99C286";
+                break;
+            case 8:
+                color = "#01A05E";
+                break;
+            case 9:
+                color = "#4A8895";
+                break;
+            case 10:
+                color = "#16669B";
+                break;
+            case 11:
+                color = "#2F65A5";
+                break;
+            case 12:
+                color = "#4E6A9C";
+                break;
+            default:
+                break;
+        }
+        return color;
+    }
+
+    private Point2D rotate(final Point2D a, final Point2D center, final double angle) {
+        final double resultX = center.getX() + (a.getX() - center.getX()) * Math.cos(angle) - (a.getY() - center.getY()) * Math
+                .sin(angle);
+        final double resultY = center.getY() + (a.getX() - center.getX()) * Math.sin(angle) + (a.getY() - center.getY()) * Math
+                .cos(angle);
+        return new Point2D(resultX, resultY);
+    }
+
+    private Point2D makeControlPoint(final double endX, final double endY, final Circle circle, final int numSegments, int direction) {
+        final double controlPointDistance = (4.0 / 3.0) * Math.tan(Math.PI / (2 * numSegments)) * circle.getRadius();
+        final Point2D center = new Point2D(circle.getCenterX(), circle.getCenterY());
+        final Point2D end = new Point2D(endX, endY);
+        Point2D perp = rotate(center, end, direction * Math.PI / 2.);
+        Point2D diff = perp.subtract(end);
+        diff = diff.normalize();
+        diff = scale(diff, controlPointDistance);
+        return end.add(diff);
+    }
+
+    private Point2D scale(final Point2D a, final double scale) {
+        return new Point2D(a.getX() * scale, a.getY() * scale);
+    }
+
+    final class RecentColorPath extends Path {
+        PathClickTransition transition;
+
+        RecentColorPath(final PathElement... elements) {
+            super(elements);
+            this.setStrokeLineCap(StrokeLineCap.ROUND);
+            this.setStrokeWidth(0);
+            this.setStrokeType(StrokeType.CENTERED);
+            this.setCache(true);
+            JFXDepthManager.setDepth(this, 2);
+            this.transition = new PathClickTransition(this);
+        }
+
+        void playTransition(final double rate) {
+            transition.setRate(rate);
+            transition.play();
+        }
+    }
+
+    private final class PathClickTransition extends CachedTransition {
+        PathClickTransition(final Path path) {
+            super(JFXCustomColorPicker.this, new Timeline(
+                            new KeyFrame(Duration.ZERO,
+                                    new KeyValue(((DropShadow) path.getEffect()).radiusProperty(),
+                                            JFXDepthManager.getShadowAt(2).radiusProperty().get(),
+                                            EASE_BOTH),
+                                    new KeyValue(((DropShadow) path.getEffect()).spreadProperty(),
+                                            JFXDepthManager.getShadowAt(2).spreadProperty().get(),
+                                            EASE_BOTH),
+                                    new KeyValue(((DropShadow) path.getEffect()).offsetXProperty(),
+                                            JFXDepthManager.getShadowAt(2).offsetXProperty().get(),
+                                            EASE_BOTH),
+                                    new KeyValue(((DropShadow) path.getEffect()).offsetYProperty(),
+                                            JFXDepthManager.getShadowAt(2).offsetYProperty().get(),
+                                            EASE_BOTH),
+                                    new KeyValue(path.strokeWidthProperty(), 0, EASE_BOTH)
+                            ),
+                            new KeyFrame(Duration.millis(1000),
+                                    new KeyValue(((DropShadow) path.getEffect()).radiusProperty(),
+                                            JFXDepthManager.getShadowAt(5).radiusProperty().get(),
+                                            EASE_BOTH),
+                                    new KeyValue(((DropShadow) path.getEffect()).spreadProperty(),
+                                            JFXDepthManager.getShadowAt(5).spreadProperty().get(),
+                                            EASE_BOTH),
+                                    new KeyValue(((DropShadow) path.getEffect()).offsetXProperty(),
+                                            JFXDepthManager.getShadowAt(5).offsetXProperty().get(),
+                                            EASE_BOTH),
+                                    new KeyValue(((DropShadow) path.getEffect()).offsetYProperty(),
+                                            JFXDepthManager.getShadowAt(5).offsetYProperty().get(),
+                                            EASE_BOTH),
+                                    new KeyValue(path.strokeWidthProperty(), 2, EASE_BOTH)
+                            )
+                    )
+            );
+            // reduce the number to increase the shifting , increase number to reduce shifting
+            setCycleDuration(Duration.millis(120));
+            setDelay(Duration.seconds(0));
+            setAutoReverse(false);
+        }
+    }
+}

HMCL/src/main/java/com/jfoenix/skins/JFXCustomColorPickerDialog.java

@@ -0,0 +1,409 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.skins;
+
+import com.jfoenix.controls.*;
+import com.jfoenix.svg.SVGGlyph;
+import com.jfoenix.transitions.JFXFillTransition;
+import javafx.animation.*;
+import javafx.application.Platform;
+import javafx.beans.InvalidationListener;
+import javafx.beans.Observable;
+import javafx.beans.binding.Bindings;
+import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.SimpleObjectProperty;
+import javafx.event.EventHandler;
+import javafx.geometry.Insets;
+import javafx.geometry.Rectangle2D;
+import javafx.scene.Node;
+import javafx.scene.Scene;
+import javafx.scene.control.Label;
+import javafx.scene.control.Tab;
+import javafx.scene.input.KeyEvent;
+import javafx.scene.layout.*;
+import javafx.scene.paint.Color;
+import javafx.stage.*;
+import javafx.util.Duration;
+import org.jackhuang.hmcl.setting.StyleSheets;
+
+import java.util.concurrent.atomic.AtomicInteger;
+
+/**
+ * @author Shadi Shaheen
+ */
+public class JFXCustomColorPickerDialog extends StackPane {
+    private final Stage dialog = new Stage();
+    // used for concurrency control and preventing FX-thread over use
+    private final AtomicInteger concurrencyController = new AtomicInteger(-1);
+
+    private final ObjectProperty<Color> currentColorProperty = new SimpleObjectProperty<>(Color.WHITE);
+    private final ObjectProperty<Color> customColorProperty = new SimpleObjectProperty<>(Color.TRANSPARENT);
+    private Runnable onSave;
+
+    private final Scene customScene;
+    private final JFXCustomColorPicker curvedColorPicker;
+    private ParallelTransition paraTransition;
+    private final JFXDecorator pickerDecorator;
+    private boolean systemChange = false;
+    private boolean userChange = false;
+    private boolean initOnce = true;
+    private final Runnable initRun;
+
+    public JFXCustomColorPickerDialog(Window owner) {
+        getStyleClass().add("custom-color-dialog");
+        if (owner != null) {
+            dialog.initOwner(owner);
+        }
+        dialog.initModality(Modality.APPLICATION_MODAL);
+        dialog.initStyle(StageStyle.TRANSPARENT);
+        dialog.setResizable(false);
+
+        // create JFX Decorator
+        pickerDecorator = new JFXDecorator(dialog, this, false, false, false);
+        pickerDecorator.setOnCloseButtonAction(this::updateColor);
+        pickerDecorator.setPickOnBounds(false);
+        customScene = new Scene(pickerDecorator, Color.TRANSPARENT);
+        StyleSheets.init(customScene);
+        curvedColorPicker = new JFXCustomColorPicker();
+
+        StackPane pane = new StackPane(curvedColorPicker);
+        pane.setPadding(new Insets(18));
+
+        VBox container = new VBox();
+        container.getChildren().add(pane);
+
+        JFXTabPane tabs = new JFXTabPane();
+
+        JFXTextField rgbField = new JFXTextField();
+        JFXTextField hsbField = new JFXTextField();
+        JFXTextField hexField = new JFXTextField();
+
+        rgbField.getStyleClass().add("custom-color-field");
+        rgbField.setPromptText("RGB Color");
+        rgbField.textProperty().addListener((o, oldVal, newVal) -> updateColorFromUserInput(newVal));
+
+        hsbField.getStyleClass().add("custom-color-field");
+        hsbField.setPromptText("HSB Color");
+        hsbField.textProperty().addListener((o, oldVal, newVal) -> updateColorFromUserInput(newVal));
+
+        hexField.getStyleClass().add("custom-color-field");
+        hexField.setPromptText("#HEX Color");
+        hexField.textProperty().addListener((o, oldVal, newVal) -> updateColorFromUserInput(newVal));
+
+        StackPane tabContent = new StackPane();
+        tabContent.getChildren().add(rgbField);
+        tabContent.setMinHeight(100);
+
+        Tab rgbTab = new Tab("RGB");
+        rgbTab.setContent(tabContent);
+        Tab hsbTab = new Tab("HSB");
+        hsbTab.setContent(hsbField);
+        Tab hexTab = new Tab("HEX");
+        hexTab.setContent(hexField);
+
+        tabs.getTabs().add(rgbTab);
+        tabs.getTabs().add(hsbTab);
+        tabs.getTabs().add(hexTab);
+
+        curvedColorPicker.selectedPath.addListener((o, oldVal, newVal) -> {
+            if (paraTransition != null) {
+                paraTransition.stop();
+            }
+            Region tabsHeader = (Region) tabs.lookup(".tab-header-background");
+            pane.backgroundProperty().unbind();
+            tabsHeader.backgroundProperty().unbind();
+            JFXFillTransition fillTransition = new JFXFillTransition(Duration.millis(240),
+                    pane,
+                    (Color) oldVal.getFill(),
+                    (Color) newVal.getFill());
+            JFXFillTransition tabsFillTransition = new JFXFillTransition(Duration.millis(240),
+                    tabsHeader,
+                    (Color) oldVal.getFill(),
+                    (Color) newVal.getFill());
+            paraTransition = new ParallelTransition(fillTransition, tabsFillTransition);
+            paraTransition.setOnFinished((finish) -> {
+                tabsHeader.backgroundProperty().bind(Bindings.createObjectBinding(() -> {
+                    return new Background(new BackgroundFill(newVal.getFill(), CornerRadii.EMPTY, Insets.EMPTY));
+                }, newVal.fillProperty()));
+                pane.backgroundProperty().bind(Bindings.createObjectBinding(() -> {
+                    return new Background(new BackgroundFill(newVal.getFill(), CornerRadii.EMPTY, Insets.EMPTY));
+                }, newVal.fillProperty()));
+            });
+            paraTransition.play();
+        });
+
+        initRun = () -> {
+            // change tabs labels font color according to the selected color
+            pane.backgroundProperty().addListener((o, oldVal, newVal) -> {
+                if (concurrencyController.getAndSet(1) == -1) {
+                    Color fontColor = ((Color) newVal.getFills().get(0).getFill()).grayscale()
+                            .getRed() > 0.5 ? Color.valueOf(
+                            "rgba(40, 40, 40, 0.87)") : Color.valueOf("rgba(255, 255, 255, 0.87)");
+                    for (Node tabNode : tabs.lookupAll(".tab")) {
+                        for (Node node : tabNode.lookupAll(".tab-label")) {
+                            ((Label) node).setTextFill(fontColor);
+                        }
+                        for (Node node : tabNode.lookupAll(".jfx-rippler")) {
+                            ((JFXRippler) node).setRipplerFill(fontColor);
+                        }
+                    }
+                    ((Pane) tabs.lookup(".tab-selected-line")).setBackground(new Background(new BackgroundFill(fontColor, CornerRadii.EMPTY, Insets.EMPTY)));
+                    pickerDecorator.lookupAll(".jfx-decorator-button").forEach(button -> {
+                        ((JFXButton) button).setRipplerFill(fontColor);
+                        ((SVGGlyph) ((JFXButton) button).getGraphic()).setFill(fontColor);
+                    });
+
+                    Color newColor = (Color) newVal.getFills().get(0).getFill();
+                    String hex = String.format("#%02X%02X%02X",
+                            (int) (newColor.getRed() * 255),
+                            (int) (newColor.getGreen() * 255),
+                            (int) (newColor.getBlue() * 255));
+                    String rgb = String.format("rgba(%d, %d, %d, 1)",
+                            (int) (newColor.getRed() * 255),
+                            (int) (newColor.getGreen() * 255),
+                            (int) (newColor.getBlue() * 255));
+                    String hsb = String.format("hsl(%d, %d%%, %d%%)",
+                            (int) (newColor.getHue()),
+                            (int) (newColor.getSaturation() * 100),
+                            (int) (newColor.getBrightness() * 100));
+
+                    if (!userChange) {
+                        systemChange = true;
+                        rgbField.setText(rgb);
+                        hsbField.setText(hsb);
+                        hexField.setText(hex);
+                        systemChange = false;
+                    }
+                    concurrencyController.getAndSet(-1);
+                }
+            });
+
+            // initial selected colors
+            Platform.runLater(() -> {
+                pane.setBackground(new Background(new BackgroundFill(curvedColorPicker.getColor(curvedColorPicker.getSelectedIndex()),
+                        CornerRadii.EMPTY,
+                        Insets.EMPTY)));
+                ((Region) tabs.lookup(".tab-header-background")).setBackground(new Background(new BackgroundFill(
+                        curvedColorPicker.getColor(curvedColorPicker.getSelectedIndex()),
+                        CornerRadii.EMPTY,
+                        Insets.EMPTY)));
+                Region tabsHeader = (Region) tabs.lookup(".tab-header-background");
+                pane.backgroundProperty().unbind();
+                tabsHeader.backgroundProperty().unbind();
+                tabsHeader.backgroundProperty().bind(Bindings.createObjectBinding(() -> {
+                    return new Background(new BackgroundFill(curvedColorPicker.selectedPath.get().getFill(),
+                            CornerRadii.EMPTY,
+                            Insets.EMPTY));
+                }, curvedColorPicker.selectedPath.get().fillProperty()));
+                pane.backgroundProperty().bind(Bindings.createObjectBinding(() -> {
+                    return new Background(new BackgroundFill(curvedColorPicker.selectedPath.get().getFill(),
+                            CornerRadii.EMPTY,
+                            Insets.EMPTY));
+                }, curvedColorPicker.selectedPath.get().fillProperty()));
+
+                // bind text field line color
+                rgbField.focusColorProperty().bind(Bindings.createObjectBinding(() -> {
+                    return pane.getBackground().getFills().get(0).getFill();
+                }, pane.backgroundProperty()));
+                hsbField.focusColorProperty().bind(Bindings.createObjectBinding(() -> {
+                    return pane.getBackground().getFills().get(0).getFill();
+                }, pane.backgroundProperty()));
+                hexField.focusColorProperty().bind(Bindings.createObjectBinding(() -> {
+                    return pane.getBackground().getFills().get(0).getFill();
+                }, pane.backgroundProperty()));
+
+
+                ((Pane) pickerDecorator.lookup(".jfx-decorator-buttons-container")).backgroundProperty()
+                        .bind(Bindings.createObjectBinding(() -> {
+                            return new Background(new BackgroundFill(
+                                    pane.getBackground()
+                                            .getFills()
+                                            .get(0)
+                                            .getFill(),
+                                    CornerRadii.EMPTY,
+                                    Insets.EMPTY));
+                        }, pane.backgroundProperty()));
+
+                ((Pane) pickerDecorator.lookup(".jfx-decorator-content-container")).borderProperty()
+                        .bind(Bindings.createObjectBinding(() -> {
+                            return new Border(new BorderStroke(
+                                    pane.getBackground()
+                                            .getFills()
+                                            .get(0)
+                                            .getFill(),
+                                    BorderStrokeStyle.SOLID,
+                                    CornerRadii.EMPTY,
+                                    new BorderWidths(0,
+                                            4,
+                                            4,
+                                            4)));
+                        }, pane.backgroundProperty()));
+            });
+        };
+
+
+        container.getChildren().add(tabs);
+
+        this.getChildren().add(container);
+        this.setPadding(new Insets(0));
+
+        dialog.setScene(customScene);
+        final EventHandler<KeyEvent> keyEventListener = key -> {
+            switch (key.getCode()) {
+                case ESCAPE:
+                    close();
+                    break;
+                case ENTER:
+                    updateColor();
+                    break;
+                default:
+                    break;
+            }
+        };
+        dialog.addEventHandler(KeyEvent.ANY, keyEventListener);
+    }
+
+    private void updateColor() {
+        close();
+        this.customColorProperty.set(curvedColorPicker.getColor(curvedColorPicker.getSelectedIndex()));
+        this.onSave.run();
+    }
+
+    private void updateColorFromUserInput(String colorWebString) {
+        if (!systemChange) {
+            userChange = true;
+            try {
+                curvedColorPicker.setColor(Color.valueOf(colorWebString));
+            } catch (IllegalArgumentException ignored) {
+                // if color is not valid then do nothing
+            }
+            userChange = false;
+        }
+    }
+
+    private void close() {
+        dialog.setScene(null);
+        dialog.close();
+    }
+
+    public void setCurrentColor(Color currentColor) {
+        this.currentColorProperty.set(currentColor);
+    }
+
+    Color getCurrentColor() {
+        return currentColorProperty.get();
+    }
+
+    ObjectProperty<Color> customColorProperty() {
+        return customColorProperty;
+    }
+
+    void setCustomColor(Color color) {
+        customColorProperty.set(color);
+    }
+
+    Color getCustomColor() {
+        return customColorProperty.get();
+    }
+
+    public Runnable getOnSave() {
+        return onSave;
+    }
+
+    public void setOnSave(Runnable onSave) {
+        this.onSave = onSave;
+    }
+
+    public void setOnHidden(EventHandler<WindowEvent> onHidden) {
+        dialog.setOnHidden(onHidden);
+    }
+
+    public void show() {
+        dialog.setOpacity(0);
+        // pickerDecorator.setOpacity(0);
+        if (dialog.getOwner() != null) {
+            dialog.widthProperty().addListener(positionAdjuster);
+            dialog.heightProperty().addListener(positionAdjuster);
+            positionAdjuster.invalidated(null);
+        }
+        if (dialog.getScene() == null) {
+            dialog.setScene(customScene);
+        }
+        curvedColorPicker.preAnimate();
+        dialog.show();
+        if (initOnce) {
+            initRun.run();
+            initOnce = false;
+        }
+
+        Timeline timeline = new Timeline(new KeyFrame(Duration.millis(120),
+                new KeyValue(dialog.opacityProperty(),
+                        1,
+                        Interpolator.EASE_BOTH)));
+        timeline.setOnFinished((finish) -> curvedColorPicker.animate());
+        timeline.play();
+    }
+
+
+    // add option to show color picker using JFX Dialog
+    private InvalidationListener positionAdjuster = new InvalidationListener() {
+        @Override
+        public void invalidated(Observable ignored) {
+            if (Double.isNaN(dialog.getWidth()) || Double.isNaN(dialog.getHeight())) {
+                return;
+            }
+            dialog.widthProperty().removeListener(positionAdjuster);
+            dialog.heightProperty().removeListener(positionAdjuster);
+            fixPosition();
+        }
+    };
+
+    private void fixPosition() {
+        Window w = dialog.getOwner();
+        Screen s = com.sun.javafx.util.Utils.getScreen(w);
+        Rectangle2D sb = s.getBounds();
+        double xR = w.getX() + w.getWidth();
+        double xL = w.getX() - dialog.getWidth();
+        double x;
+        double y;
+        if (sb.getMaxX() >= xR + dialog.getWidth()) {
+            x = xR;
+        } else if (sb.getMinX() <= xL) {
+            x = xL;
+        } else {
+            x = Math.max(sb.getMinX(), sb.getMaxX() - dialog.getWidth());
+        }
+        y = Math.max(sb.getMinY(), Math.min(sb.getMaxY() - dialog.getHeight(), w.getY()));
+        dialog.setX(x);
+        dialog.setY(y);
+    }
+
+    @Override
+    public void layoutChildren() {
+        super.layoutChildren();
+        if (dialog.getMinWidth() > 0 && dialog.getMinHeight() > 0) {
+            return;
+        }
+        double minWidth = Math.max(0, computeMinWidth(getHeight()) + (dialog.getWidth() - customScene.getWidth()));
+        double minHeight = Math.max(0, computeMinHeight(getWidth()) + (dialog.getHeight() - customScene.getHeight()));
+        dialog.setMinWidth(minWidth);
+        dialog.setMinHeight(minHeight);
+    }
+}

HMCL/src/main/java/com/jfoenix/skins/JFXGenericPickerSkin.java

@@ -0,0 +1,242 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.skins;
+
+import com.jfoenix.adapters.ReflectionHelper;
+import com.jfoenix.controls.behavior.JFXGenericPickerBehavior;
+import com.sun.javafx.binding.ExpressionHelper;
+import com.sun.javafx.event.EventHandlerManager;
+import com.sun.javafx.stage.WindowEventDispatcher;
+import javafx.beans.property.ReadOnlyBooleanProperty;
+import javafx.beans.property.ReadOnlyBooleanPropertyBase;
+import javafx.beans.value.ChangeListener;
+import javafx.event.EventHandler;
+import javafx.event.EventType;
+import javafx.scene.control.ComboBoxBase;
+import javafx.scene.control.PopupControl;
+import javafx.scene.control.TextField;
+import javafx.scene.control.skin.ComboBoxBaseSkin;
+import javafx.scene.control.skin.ComboBoxPopupControl;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.Pane;
+import javafx.stage.Window;
+
+import java.lang.invoke.MethodHandles;
+import java.lang.invoke.VarHandle;
+import java.lang.reflect.Method;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.function.BiConsumer;
+import java.util.function.Consumer;
+import java.util.function.Function;
+
+import static org.jackhuang.hmcl.util.logging.Logger.LOG;
+
+public abstract class JFXGenericPickerSkin<T> extends ComboBoxPopupControl<T> {
+
+    private final EventHandler<MouseEvent> mouseEnteredEventHandler;
+    private final EventHandler<MouseEvent> mousePressedEventHandler;
+    private final EventHandler<MouseEvent> mouseReleasedEventHandler;
+    private final EventHandler<MouseEvent> mouseExitedEventHandler;
+
+    protected JFXGenericPickerBehavior<T> behavior;
+
+    // reference of the arrow button node in getChildren (not the actual field)
+    protected Pane arrowButton;
+    protected PopupControl popup;
+
+    public JFXGenericPickerSkin(ComboBoxBase<T> comboBoxBase) {
+        super(comboBoxBase);
+        behavior = new JFXGenericPickerBehavior<T>(comboBoxBase);
+
+        removeParentFakeFocusListener(comboBoxBase);
+
+        this.mouseEnteredEventHandler = event -> behavior.mouseEntered(event);
+        this.mousePressedEventHandler = event -> {
+            behavior.mousePressed(event);
+            event.consume();
+        };
+        this.mouseReleasedEventHandler = event -> {
+            behavior.mouseReleased(event);
+            event.consume();
+        };
+        this.mouseExitedEventHandler = event -> behavior.mouseExited(event);
+
+        arrowButton = (Pane) getChildren().get(0);
+
+        parentArrowEventHandlerTerminator.accept("mouseEnteredEventHandler", MouseEvent.MOUSE_ENTERED);
+        parentArrowEventHandlerTerminator.accept("mousePressedEventHandler", MouseEvent.MOUSE_PRESSED);
+        parentArrowEventHandlerTerminator.accept("mouseReleasedEventHandler", MouseEvent.MOUSE_RELEASED);
+        parentArrowEventHandlerTerminator.accept("mouseExitedEventHandler", MouseEvent.MOUSE_EXITED);
+        this.unregisterChangeListeners(comboBoxBase.editableProperty());
+
+        updateArrowButtonListeners();
+        registerChangeListener(comboBoxBase.editableProperty(), obs -> {
+            updateArrowButtonListeners();
+            reflectUpdateDisplayArea();
+        });
+
+        removeParentPopupHandlers();
+
+        popup = ReflectionHelper.getFieldContent(ComboBoxPopupControl.class, this, "popup");
+    }
+
+    @Override
+    public void dispose() {
+        super.dispose();
+        if (this.behavior != null) {
+            this.behavior.dispose();
+        }
+    }
+
+
+    /***************************************************************************
+     *                                                                         *
+     * Reflections internal API                                                *
+     *                                                                         *
+     **************************************************************************/
+
+    private final BiConsumer<String, EventType<?>> parentArrowEventHandlerTerminator = (handlerName, eventType) -> {
+        try {
+            EventHandler handler = ReflectionHelper.getFieldContent(ComboBoxBaseSkin.class, this, handlerName);
+            arrowButton.removeEventHandler(eventType, handler);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    };
+
+    private static final VarHandle READ_ONLY_BOOLEAN_PROPERTY_BASE_HELPER =
+            findVarHandle(ReadOnlyBooleanPropertyBase.class, "helper", ExpressionHelper.class);
+
+    /// @author Glavo
+    private static VarHandle findVarHandle(Class<?> targetClass, String fieldName, Class<?> type) {
+        try {
+            return MethodHandles.privateLookupIn(targetClass, MethodHandles.lookup()).findVarHandle(targetClass, fieldName, type);
+        } catch (NoSuchFieldException | IllegalAccessException e) {
+            LOG.warning("Failed to get var handle", e);
+            return null;
+        }
+    }
+
+    private void removeParentFakeFocusListener(ComboBoxBase<T> comboBoxBase) {
+        // handle FakeFocusField cast exception
+        try {
+            final ReadOnlyBooleanProperty focusedProperty = comboBoxBase.focusedProperty();
+            //noinspection unchecked
+            ExpressionHelper<Boolean> value = (ExpressionHelper<Boolean>) READ_ONLY_BOOLEAN_PROPERTY_BASE_HELPER.get(focusedProperty);
+            ChangeListener<? super Boolean>[] changeListeners = ReflectionHelper.getFieldContent(value.getClass(), value, "changeListeners");
+            // remove parent focus listener to prevent editor class cast exception
+            for (int i = changeListeners.length - 1; i > 0; i--) {
+                if (changeListeners[i] != null && changeListeners[i].getClass().getName().contains("ComboBoxPopupControl")) {
+                    focusedProperty.removeListener(changeListeners[i]);
+                    break;
+                }
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    private void removeParentPopupHandlers() {
+        try {
+            PopupControl popup = ReflectionHelper.invoke(ComboBoxPopupControl.class, this, "getPopup");
+            popup.setOnAutoHide(event -> behavior.onAutoHide(popup));
+            WindowEventDispatcher dispatcher = ReflectionHelper.invoke(Window.class, popup, "getInternalEventDispatcher");
+            Map compositeEventHandlersMap = ReflectionHelper.getFieldContent(EventHandlerManager.class, dispatcher.getEventHandlerManager(), "eventHandlerMap");
+            compositeEventHandlersMap.remove(MouseEvent.MOUSE_CLICKED);
+//            CompositeEventHandler compositeEventHandler = (CompositeEventHandler) compositeEventHandlersMap.get(MouseEvent.MOUSE_CLICKED);
+//            Object obj = fieldConsumer.apply(()->CompositeEventHandler.class.getDeclaredField("firstRecord"),compositeEventHandler);
+//            EventHandler handler = (EventHandler) fieldConsumer.apply(() -> obj.getClass().getDeclaredField("eventHandler"), obj);
+//            popup.removeEventHandler(MouseEvent.MOUSE_CLICKED, handler);
+            popup.addEventHandler(MouseEvent.MOUSE_CLICKED, click -> behavior.onAutoHide(popup));
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+
+    private void updateArrowButtonListeners() {
+        if (getSkinnable().isEditable()) {
+            arrowButton.addEventHandler(MouseEvent.MOUSE_ENTERED, mouseEnteredEventHandler);
+            arrowButton.addEventHandler(MouseEvent.MOUSE_PRESSED, mousePressedEventHandler);
+            arrowButton.addEventHandler(MouseEvent.MOUSE_RELEASED, mouseReleasedEventHandler);
+            arrowButton.addEventHandler(MouseEvent.MOUSE_EXITED, mouseExitedEventHandler);
+        } else {
+            arrowButton.removeEventHandler(MouseEvent.MOUSE_ENTERED, mouseEnteredEventHandler);
+            arrowButton.removeEventHandler(MouseEvent.MOUSE_PRESSED, mousePressedEventHandler);
+            arrowButton.removeEventHandler(MouseEvent.MOUSE_RELEASED, mouseReleasedEventHandler);
+            arrowButton.removeEventHandler(MouseEvent.MOUSE_EXITED, mouseExitedEventHandler);
+        }
+    }
+
+
+    /***************************************************************************
+     *                                                                         *
+     * Reflections internal API for ComboBoxPopupControl                       *
+     *                                                                         *
+     **************************************************************************/
+
+    private final HashMap<String, Method> parentCachedMethods = new HashMap<>();
+
+    Function<String, Method> methodSupplier = name -> {
+        if (!parentCachedMethods.containsKey(name)) {
+            try {
+                Method method = ComboBoxPopupControl.class.getDeclaredMethod(name);
+                method.setAccessible(true);
+                parentCachedMethods.put(name, method);
+            } catch (Exception e) {
+                e.printStackTrace();
+            }
+        }
+        return parentCachedMethods.get(name);
+    };
+
+    final Consumer<Method> methodInvoker = method -> {
+        try {
+            method.invoke(this);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    };
+
+    final Function<Method, Object> methodReturnInvoker = method -> {
+        try {
+            return method.invoke(this);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return null;
+    };
+
+    protected void reflectUpdateDisplayArea() {
+        methodInvoker.accept(methodSupplier.apply("updateDisplayArea"));
+    }
+
+    protected void reflectSetTextFromTextFieldIntoComboBoxValue() {
+        methodInvoker.accept(methodSupplier.apply("setTextFromTextFieldIntoComboBoxValue"));
+    }
+
+    protected TextField reflectGetEditableInputNode() {
+        return (TextField) methodReturnInvoker.apply(methodSupplier.apply("getEditableInputNode"));
+    }
+
+    protected void reflectUpdateDisplayNode() {
+        methodInvoker.accept(methodSupplier.apply("updateDisplayNode"));
+    }
+}

HMCL/src/main/java/com/jfoenix/skins/JFXRadioButtonSkin.java

@@ -0,0 +1,173 @@
+//
+// Source code recreated from a .class file by IntelliJ IDEA
+// (powered by FernFlower decompiler)
+//
+
+package com.jfoenix.skins;
+
+import com.jfoenix.controls.JFXRadioButton;
+import com.jfoenix.controls.JFXRippler;
+import com.jfoenix.controls.JFXRippler.RipplerMask;
+import javafx.animation.Interpolator;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
+import javafx.geometry.HPos;
+import javafx.geometry.Insets;
+import javafx.geometry.VPos;
+import javafx.scene.control.RadioButton;
+import javafx.scene.control.skin.RadioButtonSkin;
+import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.StackPane;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Circle;
+import javafx.scene.text.Text;
+import javafx.util.Duration;
+import org.jackhuang.hmcl.ui.animation.AnimationUtils;
+
+public class JFXRadioButtonSkin extends RadioButtonSkin {
+    private static final double PADDING = 15.0;
+
+    private boolean invalid = true;
+    private final JFXRippler rippler;
+    private final Circle radio;
+    private final Circle dot;
+    private Timeline timeline;
+    private final AnchorPane container = new AnchorPane();
+    private final double labelOffset = -10.0;
+
+    public JFXRadioButtonSkin(JFXRadioButton control) {
+        super(control);
+        double radioRadius = 7.0;
+        this.radio = new Circle(radioRadius);
+        this.radio.getStyleClass().setAll("radio");
+        this.radio.setStrokeWidth(2.0);
+        this.radio.setFill(Color.TRANSPARENT);
+
+        this.dot = new Circle(4);
+        this.dot.getStyleClass().setAll("dot");
+        this.dot.fillProperty().bind(control.selectedColorProperty());
+        this.dot.setScaleX(0.0);
+        this.dot.setScaleY(0.0);
+
+        StackPane boxContainer = new StackPane();
+        boxContainer.getChildren().addAll(this.radio, this.dot);
+        boxContainer.setPadding(new Insets(PADDING));
+        this.rippler = new JFXRippler(boxContainer, RipplerMask.CIRCLE);
+        this.container.getChildren().add(this.rippler);
+        AnchorPane.setRightAnchor(this.rippler, this.labelOffset);
+
+        this.updateChildren();
+        control.focusedProperty().addListener((o, oldVal, newVal) -> {
+            if (newVal) {
+                if (!this.getSkinnable().isPressed()) {
+                    this.rippler.showOverlay();
+                }
+            } else {
+                this.rippler.hideOverlay();
+            }
+
+        });
+        control.pressedProperty().addListener((o, oldVal, newVal) -> this.rippler.hideOverlay());
+        this.registerChangeListener(control.selectedColorProperty(), ignored -> updateColors());
+        this.registerChangeListener(control.unSelectedColorProperty(), ignored -> updateColors());
+        this.registerChangeListener(control.selectedProperty(), ignored -> {
+            updateColors();
+            this.playAnimation();
+        });
+    }
+
+    protected void updateChildren() {
+        super.updateChildren();
+        if (this.radio != null) {
+            this.removeRadio();
+            this.getChildren().add(this.container);
+        }
+    }
+
+    protected void layoutChildren(double x, double y, double w, double h) {
+        RadioButton radioButton = this.getSkinnable();
+        double contWidth = this.snapSizeX(this.container.prefWidth(-1.0)) + (double) (this.invalid ? 2 : 0);
+        double contHeight = this.snapSizeY(this.container.prefHeight(-1.0)) + (double) (this.invalid ? 2 : 0);
+        double computeWidth = Math.min(radioButton.prefWidth(-1.0), radioButton.minWidth(-1.0)) + this.labelOffset + 2.0 * this.PADDING;
+        double labelWidth = Math.min(computeWidth - contWidth, w - this.snapSizeX(contWidth)) + this.labelOffset + 2.0 * PADDING;
+        double labelHeight = Math.min(radioButton.prefHeight(labelWidth), h);
+        double maxHeight = Math.max(contHeight, labelHeight);
+        double xOffset = computeXOffset(w, labelWidth + contWidth, radioButton.getAlignment().getHpos()) + x;
+        double yOffset = computeYOffset(h, maxHeight, radioButton.getAlignment().getVpos()) + x;
+        if (this.invalid) {
+            this.initializeComponents();
+            this.invalid = false;
+        }
+
+        this.layoutLabelInArea(xOffset + contWidth, yOffset, labelWidth, maxHeight, radioButton.getAlignment());
+        ((Text) this.getChildren().get(this.getChildren().get(0) instanceof Text ? 0 : 1)).textProperty().set(this.getSkinnable().textProperty().get());
+        this.container.resize(this.snapSizeX(contWidth), this.snapSizeY(contHeight));
+        this.positionInArea(this.container, xOffset, yOffset, contWidth, maxHeight, 0.0, radioButton.getAlignment().getHpos(), radioButton.getAlignment().getVpos());
+    }
+
+    private void initializeComponents() {
+        this.updateColors();
+        this.playAnimation();
+    }
+
+    private void playAnimation() {
+        if (AnimationUtils.isAnimationEnabled()) {
+            if (this.timeline == null) {
+                this.timeline = new Timeline(
+                        new KeyFrame(Duration.ZERO,
+                                new KeyValue(this.dot.scaleXProperty(), 0, Interpolator.EASE_BOTH),
+                                new KeyValue(this.dot.scaleYProperty(), 0, Interpolator.EASE_BOTH)),
+                        new KeyFrame(Duration.millis(200.0),
+                                new KeyValue(this.dot.scaleXProperty(), 1, Interpolator.EASE_BOTH),
+                                new KeyValue(this.dot.scaleYProperty(), 1, Interpolator.EASE_BOTH))
+                );
+            } else {
+                this.timeline.stop();
+            }
+            this.timeline.setRate(this.getSkinnable().isSelected() ? 1.0 : -1.0);
+            this.timeline.play();
+        } else {
+            double endScale = this.getSkinnable().isSelected() ? 1.0 : 0.0;
+            this.dot.setScaleX(endScale);
+            this.dot.setScaleY(endScale);
+        }
+    }
+
+    private void removeRadio() {
+        this.getChildren().removeIf(node -> "radio".equals(node.getStyleClass().get(0)));
+    }
+
+    private void updateColors() {
+        var control = (JFXRadioButton) getSkinnable();
+        boolean isSelected = control.isSelected();
+        Color unSelectedColor = control.getUnSelectedColor();
+        Color selectedColor = control.getSelectedColor();
+        rippler.setRipplerFill(isSelected ? selectedColor : unSelectedColor);
+        radio.setStroke(isSelected ? selectedColor : unSelectedColor);
+    }
+
+    protected double computeMinWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
+        return super.computePrefWidth(height, topInset, rightInset, bottomInset, leftInset) + this.snapSizeX(this.radio.minWidth(-1.0)) + this.labelOffset + 2.0 * PADDING;
+    }
+
+    protected double computePrefWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
+        return super.computePrefWidth(height, topInset, rightInset, bottomInset, leftInset) + this.snapSizeX(this.radio.prefWidth(-1.0)) + this.labelOffset + 2.0 * PADDING;
+    }
+
+    static double computeXOffset(double width, double contentWidth, HPos hpos) {
+        return switch (hpos) {
+            case LEFT -> 0.0;
+            case CENTER -> (width - contentWidth) / 2.0;
+            case RIGHT -> width - contentWidth;
+        };
+    }
+
+    static double computeYOffset(double height, double contentHeight, VPos vpos) {
+        return switch (vpos) {
+            case TOP, BASELINE -> 0.0;
+            case CENTER -> (height - contentHeight) / 2.0;
+            case BOTTOM -> height - contentHeight;
+        };
+    }
+}

HMCL/src/main/java/com/jfoenix/skins/JFXToggleButtonSkin.java

@@ -0,0 +1,186 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.skins;
+
+import com.jfoenix.controls.JFXRippler;
+import com.jfoenix.controls.JFXRippler.RipplerMask;
+import com.jfoenix.controls.JFXRippler.RipplerPos;
+import com.jfoenix.controls.JFXToggleButton;
+import com.jfoenix.effects.JFXDepthManager;
+import com.jfoenix.transitions.JFXAnimationTimer;
+import com.jfoenix.transitions.JFXKeyFrame;
+import com.jfoenix.transitions.JFXKeyValue;
+import javafx.animation.Interpolator;
+import javafx.geometry.Insets;
+import javafx.scene.Cursor;
+import javafx.scene.control.skin.ToggleButtonSkin;
+import javafx.scene.layout.StackPane;
+import javafx.scene.shape.Circle;
+import javafx.scene.shape.Line;
+import javafx.scene.shape.StrokeLineCap;
+import javafx.util.Duration;
+
+/**
+ * <h1>Material Design ToggleButton Skin</h1>
+ *
+ * @author Shadi Shaheen
+ * @version 1.0
+ * @since 2016-03-09
+ */
+public class JFXToggleButtonSkin extends ToggleButtonSkin {
+
+
+    private Runnable releaseManualRippler = null;
+
+    private JFXAnimationTimer timer;
+    private final Circle circle;
+    private final Line line;
+
+    public JFXToggleButtonSkin(JFXToggleButton toggleButton) {
+        super(toggleButton);
+
+        double circleRadius = toggleButton.getSize();
+
+        line = new Line();
+        line.setStroke(getSkinnable().isSelected() ? toggleButton.getToggleLineColor() : toggleButton.getUnToggleLineColor());
+        line.setStartX(0);
+        line.setStartY(0);
+        line.setEndX(circleRadius * 2 + 2);
+        line.setEndY(0);
+        line.setStrokeWidth(circleRadius * 1.5);
+        line.setStrokeLineCap(StrokeLineCap.ROUND);
+        line.setSmooth(true);
+
+        circle = new Circle();
+        circle.setFill(getSkinnable().isSelected() ? toggleButton.getToggleColor() : toggleButton.getUnToggleColor());
+        circle.setCenterX(-circleRadius);
+        circle.setCenterY(0);
+        circle.setRadius(circleRadius);
+        circle.setSmooth(true);
+        JFXDepthManager.setDepth(circle, 1);
+
+        StackPane circlePane = new StackPane();
+        circlePane.getChildren().add(circle);
+        circlePane.setPadding(new Insets(circleRadius * 1.5));
+
+        JFXRippler rippler = new JFXRippler(circlePane, RipplerMask.CIRCLE, RipplerPos.BACK);
+        rippler.setRipplerFill(getSkinnable().isSelected() ? toggleButton.getToggleLineColor() : toggleButton.getUnToggleLineColor());
+        rippler.setTranslateX(computeTranslation(circleRadius, line));
+
+        final StackPane main = new StackPane();
+        main.getChildren().setAll(line, rippler);
+        main.setCursor(Cursor.HAND);
+
+        // show focus traversal effect
+        getSkinnable().armedProperty().addListener((o, oldVal, newVal) -> {
+            if (newVal) {
+                releaseManualRippler = rippler.createManualRipple();
+            } else if (releaseManualRippler != null) {
+                releaseManualRippler.run();
+            }
+        });
+        toggleButton.focusedProperty().addListener((o, oldVal, newVal) -> {
+            if (!toggleButton.isDisableVisualFocus()) {
+                if (newVal) {
+                    if (!getSkinnable().isPressed()) {
+                        rippler.setOverlayVisible(true);
+                    }
+                } else {
+                    rippler.setOverlayVisible(false);
+                }
+            }
+        });
+        toggleButton.pressedProperty().addListener(observable -> rippler.setOverlayVisible(false));
+
+        // add change listener to selected property
+        getSkinnable().selectedProperty().addListener(observable -> {
+            rippler.setRipplerFill(toggleButton.isSelected() ? toggleButton.getToggleLineColor() : toggleButton.getUnToggleLineColor());
+            if (!toggleButton.isDisableAnimation()) {
+                timer.reverseAndContinue();
+            } else {
+                rippler.setTranslateX(computeTranslation(circleRadius, line));
+            }
+        });
+
+        getSkinnable().setGraphic(main);
+
+        timer = new JFXAnimationTimer(
+                new JFXKeyFrame(Duration.millis(100),
+                        JFXKeyValue.builder()
+                                .setTarget(rippler.translateXProperty())
+                                .setEndValueSupplier(() -> computeTranslation(circleRadius, line))
+                                .setInterpolator(Interpolator.EASE_BOTH)
+                                .setAnimateCondition(() -> !((JFXToggleButton) getSkinnable()).isDisableAnimation())
+                                .build(),
+
+                        JFXKeyValue.builder()
+                                .setTarget(line.strokeProperty())
+                                .setEndValueSupplier(() -> getSkinnable().isSelected() ?
+                                        ((JFXToggleButton) getSkinnable()).getToggleLineColor()
+                                        : ((JFXToggleButton) getSkinnable()).getUnToggleLineColor())
+                                .setInterpolator(Interpolator.EASE_BOTH)
+                                .setAnimateCondition(() -> !((JFXToggleButton) getSkinnable()).isDisableAnimation())
+                                .build(),
+
+                        JFXKeyValue.builder()
+                                .setTarget(circle.fillProperty())
+                                .setEndValueSupplier(() -> getSkinnable().isSelected() ?
+                                        ((JFXToggleButton) getSkinnable()).getToggleColor()
+                                        : ((JFXToggleButton) getSkinnable()).getUnToggleColor())
+                                .setInterpolator(Interpolator.EASE_BOTH)
+                                .setAnimateCondition(() -> !((JFXToggleButton) getSkinnable()).isDisableAnimation())
+                                .build()
+                )
+        );
+        timer.setCacheNodes(circle, line);
+
+        registerChangeListener(toggleButton.toggleColorProperty(), observableValue -> {
+            if (getSkinnable().isSelected()) {
+                circle.setFill(((JFXToggleButton) getSkinnable()).getToggleColor());
+            }
+        });
+        registerChangeListener(toggleButton.unToggleColorProperty(), observableValue -> {
+            if (!getSkinnable().isSelected()) {
+                circle.setFill(((JFXToggleButton) getSkinnable()).getUnToggleColor());
+            }
+        });
+        registerChangeListener(toggleButton.toggleLineColorProperty(), observableValue -> {
+            if (getSkinnable().isSelected()) {
+                line.setStroke(((JFXToggleButton) getSkinnable()).getToggleLineColor());
+            }
+        });
+        registerChangeListener(toggleButton.unToggleColorProperty(), observableValue -> {
+            if (!getSkinnable().isSelected()) {
+                line.setStroke(((JFXToggleButton) getSkinnable()).getUnToggleLineColor());
+            }
+        });
+    }
+
+    private double computeTranslation(double circleRadius, Line line) {
+        return (getSkinnable().isSelected() ? 1 : -1) * ((line.getLayoutBounds().getWidth() / 2) - circleRadius + 2);
+    }
+
+    @Override
+    public void dispose() {
+        super.dispose();
+        timer.dispose();
+        timer = null;
+    }
+}

HMCL/src/main/java/com/jfoenix/transitions/CacheMemento.java

@@ -0,0 +1,68 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.transitions;
+
+import javafx.scene.CacheHint;
+import javafx.scene.Node;
+import javafx.scene.layout.Region;
+
+import java.util.concurrent.atomic.AtomicBoolean;
+
+public final class CacheMemento {
+    private boolean cache;
+    private boolean cacheShape;
+    private boolean snapToPixel;
+    private CacheHint cacheHint = CacheHint.DEFAULT;
+    private final Node node;
+    private final AtomicBoolean isCached = new AtomicBoolean(false);
+
+    public CacheMemento(Node node) {
+        this.node = node;
+    }
+
+    /**
+     * this method will cache the node only if it wasn't cached before
+     */
+    public void cache() {
+        if (!isCached.getAndSet(true)) {
+            this.cache = node.isCache();
+            this.cacheHint = node.getCacheHint();
+            node.setCache(true);
+            node.setCacheHint(CacheHint.SPEED);
+            if (node instanceof Region region) {
+                this.cacheShape = region.isCacheShape();
+                this.snapToPixel = region.isSnapToPixel();
+                region.setCacheShape(true);
+                region.setSnapToPixel(true);
+            }
+        }
+    }
+
+    public void restore() {
+        if (isCached.getAndSet(false)) {
+            node.setCache(cache);
+            node.setCacheHint(cacheHint);
+            if (node instanceof Region region) {
+                region.setCacheShape(cacheShape);
+                region.setSnapToPixel(snapToPixel);
+            }
+        }
+    }
+}

HMCL/src/main/java/com/jfoenix/transitions/JFXAnimationTimer.java

@@ -0,0 +1,286 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.transitions;
+
+import javafx.animation.AnimationTimer;
+import javafx.beans.value.WritableValue;
+import javafx.scene.Node;
+import javafx.util.Duration;
+
+import java.util.*;
+import java.util.function.Supplier;
+
+/**
+ * Custom AnimationTimer that can be created the same way as a timeline,
+ * however it doesn't behave the same yet. it only animates in one direction,
+ * it doesn't support animation 0 -> 1 -> 0.5
+ *
+ * @author Shadi Shaheen
+ * @version 1.0
+ * @since 2017-09-21
+ */
+
+public class JFXAnimationTimer extends AnimationTimer {
+
+    private Set<AnimationHandler> animationHandlers = new HashSet<>();
+    private long startTime = -1;
+    private boolean running = false;
+    private List<CacheMemento> caches = new ArrayList<>();
+    private double totalElapsedMilliseconds;
+
+    public JFXAnimationTimer(JFXKeyFrame... keyFrames) {
+        for (JFXKeyFrame keyFrame : keyFrames) {
+            Duration duration = keyFrame.getDuration();
+            final Set<JFXKeyValue<?>> keyValuesSet = keyFrame.getValues();
+            if (!keyValuesSet.isEmpty()) {
+                animationHandlers.add(new AnimationHandler(duration, keyFrame.getAnimateCondition(), keyFrame.getValues()));
+            }
+        }
+    }
+
+    private final HashMap<JFXKeyFrame, AnimationHandler> mutableFrames = new HashMap<>();
+
+    public void addKeyFrame(JFXKeyFrame keyFrame) throws Exception {
+        if (isRunning()) {
+            throw new Exception("Can't update animation timer while running");
+        }
+        Duration duration = keyFrame.getDuration();
+        final Set<JFXKeyValue<?>> keyValuesSet = keyFrame.getValues();
+        if (!keyValuesSet.isEmpty()) {
+            final AnimationHandler handler = new AnimationHandler(duration, keyFrame.getAnimateCondition(), keyFrame.getValues());
+            animationHandlers.add(handler);
+            mutableFrames.put(keyFrame, handler);
+        }
+    }
+
+    public void removeKeyFrame(JFXKeyFrame keyFrame) throws Exception {
+        if (isRunning()) {
+            throw new Exception("Can't update animation timer while running");
+        }
+        AnimationHandler handler = mutableFrames.get(keyFrame);
+        animationHandlers.remove(handler);
+    }
+
+    @Override
+    public void start() {
+        super.start();
+        running = true;
+        startTime = -1;
+        for (AnimationHandler animationHandler : animationHandlers) {
+            animationHandler.init();
+        }
+        for (CacheMemento cache : caches) {
+            cache.cache();
+        }
+    }
+
+    @Override
+    public void handle(long now) {
+        startTime = startTime == -1 ? now : startTime;
+        totalElapsedMilliseconds = (now - startTime) / 1000000.0;
+        boolean stop = true;
+        for (AnimationHandler handler : animationHandlers) {
+            handler.animate(totalElapsedMilliseconds);
+            if (!handler.finished) {
+                stop = false;
+            }
+        }
+        if (stop) {
+            this.stop();
+        }
+    }
+
+    /**
+     * this method will pause the timer and reverse the animation if the timer already
+     * started otherwise it will start the animation.
+     */
+    public void reverseAndContinue() {
+        if (isRunning()) {
+            super.stop();
+            for (AnimationHandler handler : animationHandlers) {
+                handler.reverse(totalElapsedMilliseconds);
+            }
+            startTime = -1;
+            super.start();
+        } else {
+            start();
+        }
+    }
+
+    @Override
+    public void stop() {
+        super.stop();
+        running = false;
+        for (AnimationHandler handler : animationHandlers) {
+            handler.clear();
+        }
+        for (CacheMemento cache : caches) {
+            cache.restore();
+        }
+        if (onFinished != null) {
+            onFinished.run();
+        }
+    }
+
+    public void applyEndValues() {
+        if (isRunning()) {
+            super.stop();
+        }
+        for (AnimationHandler handler : animationHandlers) {
+            handler.applyEndValues();
+        }
+        startTime = -1;
+    }
+
+    public boolean isRunning() {
+        return running;
+    }
+
+    private Runnable onFinished = null;
+
+    public void setOnFinished(Runnable onFinished) {
+        this.onFinished = onFinished;
+    }
+
+    public void setCacheNodes(Node... nodesToCache) {
+        caches.clear();
+        if (nodesToCache != null) {
+            for (Node node : nodesToCache) {
+                caches.add(new CacheMemento(node));
+            }
+        }
+    }
+
+    public void dispose() {
+        caches.clear();
+        for (AnimationHandler handler : animationHandlers) {
+            handler.dispose();
+        }
+        animationHandlers.clear();
+    }
+
+    static class AnimationHandler {
+        private final double duration;
+        private double currentDuration;
+        private final Set<JFXKeyValue<?>> keyValues;
+        private Supplier<Boolean> animationCondition = null;
+        private boolean finished = false;
+
+        private final HashMap<WritableValue<?>, Object> initialValuesMap = new HashMap<>();
+        private final HashMap<WritableValue<?>, Object> endValuesMap = new HashMap<>();
+
+        AnimationHandler(Duration duration, Supplier<Boolean> animationCondition, Set<JFXKeyValue<?>> keyValues) {
+            this.duration = duration.toMillis();
+            currentDuration = this.duration;
+            this.keyValues = keyValues;
+            this.animationCondition = animationCondition;
+        }
+
+        public void init() {
+            finished = animationCondition != null && !animationCondition.get();
+            for (JFXKeyValue<?> keyValue : keyValues) {
+                if (keyValue.getTarget() != null) {
+                    // replaced putIfAbsent for mobile compatibility
+                    if (!initialValuesMap.containsKey(keyValue.getTarget())) {
+                        initialValuesMap.put(keyValue.getTarget(), keyValue.getTarget().getValue());
+                    }
+                    if (!endValuesMap.containsKey(keyValue.getTarget())) {
+                        endValuesMap.put(keyValue.getTarget(), keyValue.getEndValue());
+                    }
+                }
+            }
+        }
+
+        void reverse(double now) {
+            finished = animationCondition != null && !animationCondition.get();
+            currentDuration = duration - (currentDuration - now);
+            // update initial values
+            for (JFXKeyValue<?> keyValue : keyValues) {
+                final WritableValue<?> target = keyValue.getTarget();
+                if (target != null) {
+                    initialValuesMap.put(target, target.getValue());
+                    endValuesMap.put(target, keyValue.getEndValue());
+                }
+            }
+        }
+
+        // now in milliseconds
+        @SuppressWarnings({"unchecked"})
+        public void animate(double now) {
+            // if animate condition for the key frame is not met then do nothing
+            if (finished) {
+                return;
+            }
+            if (now <= currentDuration) {
+                for (JFXKeyValue<?> keyValue : keyValues) {
+                    if (keyValue.isValid()) {
+                        @SuppressWarnings("rawtypes") final WritableValue target = keyValue.getTarget();
+                        final Object endValue = endValuesMap.get(target);
+                        if (endValue != null && target != null && !target.getValue().equals(endValue)) {
+                            target.setValue(keyValue.getInterpolator().interpolate(initialValuesMap.get(target), endValue, now / currentDuration));
+                        }
+                    }
+                }
+            } else {
+                if (!finished) {
+                    finished = true;
+                    for (JFXKeyValue<?> keyValue : keyValues) {
+                        if (keyValue.isValid()) {
+                            @SuppressWarnings("rawtypes") final WritableValue target = keyValue.getTarget();
+                            if (target != null) {
+                                // set updated end value instead of cached
+                                final Object endValue = keyValue.getEndValue();
+                                if (endValue != null) {
+                                    target.setValue(endValue);
+                                }
+                            }
+                        }
+                    }
+                    currentDuration = duration;
+                }
+            }
+        }
+
+        @SuppressWarnings("unchecked")
+        public void applyEndValues() {
+            for (JFXKeyValue<?> keyValue : keyValues) {
+                if (keyValue.isValid()) {
+                    @SuppressWarnings("rawtypes") final WritableValue target = keyValue.getTarget();
+                    if (target != null) {
+                        final Object endValue = keyValue.getEndValue();
+                        if (endValue != null && !target.getValue().equals(endValue)) {
+                            target.setValue(endValue);
+                        }
+                    }
+                }
+            }
+        }
+
+        public void clear() {
+            initialValuesMap.clear();
+            endValuesMap.clear();
+        }
+
+        void dispose() {
+            clear();
+            keyValues.clear();
+        }
+    }
+}

HMCL/src/main/java/com/jfoenix/transitions/JFXKeyFrame.java

@@ -0,0 +1,104 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.transitions;
+
+import javafx.util.Duration;
+
+import java.util.Set;
+import java.util.concurrent.CopyOnWriteArraySet;
+import java.util.function.Supplier;
+
+/**
+ * @author Shadi Shaheen
+ * @version 1.0
+ * @since 2017-09-21
+ */
+
+public class JFXKeyFrame {
+
+    private Duration duration;
+    private Set<JFXKeyValue<?>> keyValues = new CopyOnWriteArraySet<>();
+    private Supplier<Boolean> animateCondition = null;
+
+    public JFXKeyFrame(Duration duration, JFXKeyValue<?>... keyValues) {
+        this.duration = duration;
+        for (final JFXKeyValue<?> keyValue : keyValues) {
+            if (keyValue != null) {
+                this.keyValues.add(keyValue);
+            }
+        }
+    }
+
+    private JFXKeyFrame() {
+
+    }
+
+    public final Duration getDuration() {
+        return duration;
+    }
+
+    public final Set<JFXKeyValue<?>> getValues() {
+        return keyValues;
+    }
+
+    public Supplier<Boolean> getAnimateCondition() {
+        return animateCondition;
+    }
+
+    public static Builder builder() {
+        return new Builder();
+    }
+
+    public static final class Builder {
+        private Duration duration;
+        private final Set<JFXKeyValue<?>> keyValues = new CopyOnWriteArraySet<>();
+        private Supplier<Boolean> animateCondition = null;
+
+        private Builder() {
+        }
+
+        public Builder setDuration(Duration duration) {
+            this.duration = duration;
+            return this;
+        }
+
+        public Builder setKeyValues(JFXKeyValue<?>... keyValues) {
+            for (final JFXKeyValue<?> keyValue : keyValues) {
+                if (keyValue != null) {
+                    this.keyValues.add(keyValue);
+                }
+            }
+            return this;
+        }
+
+        public Builder setAnimateCondition(Supplier<Boolean> animateCondition) {
+            this.animateCondition = animateCondition;
+            return this;
+        }
+
+        public JFXKeyFrame build() {
+            JFXKeyFrame jFXKeyFrame = new JFXKeyFrame();
+            jFXKeyFrame.duration = this.duration;
+            jFXKeyFrame.keyValues = this.keyValues;
+            jFXKeyFrame.animateCondition = this.animateCondition;
+            return jFXKeyFrame;
+        }
+    }
+}

HMCL/src/main/java/com/jfoenix/transitions/JFXKeyValue.java

@@ -0,0 +1,157 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.transitions;
+
+import javafx.animation.Interpolator;
+import javafx.beans.value.WritableValue;
+
+import java.util.function.Supplier;
+
+/**
+ * @author Shadi Shaheen
+ * @version 1.0
+ * @since 2017-09-21
+ */
+
+public final class JFXKeyValue<T> {
+
+    private WritableValue<T> target;
+    private Supplier<WritableValue<T>> targetSupplier;
+    private Supplier<T> endValueSupplier;
+    private T endValue;
+    private Supplier<Boolean> animateCondition = () -> true;
+    private Interpolator interpolator;
+
+    private JFXKeyValue() {
+    }
+
+    // this builder is created to ensure type inference from method arguments
+    public static Builder builder() {
+        return new Builder();
+    }
+
+    public T getEndValue() {
+        return endValue == null ? endValueSupplier.get() : endValue;
+    }
+
+    public WritableValue<T> getTarget() {
+        return target == null ? targetSupplier.get() : target;
+    }
+
+    public Interpolator getInterpolator() {
+        return interpolator;
+    }
+
+    public boolean isValid() {
+        return animateCondition == null || animateCondition.get();
+    }
+
+    public static final class Builder {
+        public <T> JFXKeyValueBuilder<T> setTarget(WritableValue<T> target) {
+            JFXKeyValueBuilder<T> builder = new JFXKeyValueBuilder<>();
+            builder.setTarget(target);
+            return builder;
+        }
+
+        public <T> JFXKeyValueBuilder<T> setTargetSupplier(Supplier<WritableValue<T>> targetSupplier) {
+            JFXKeyValueBuilder<T> builder = new JFXKeyValueBuilder<>();
+            builder.setTargetSupplier(targetSupplier);
+            return builder;
+        }
+
+        public <T> JFXKeyValueBuilder<T> setEndValueSupplier(Supplier<T> endValueSupplier) {
+            JFXKeyValueBuilder<T> builder = new JFXKeyValueBuilder<>();
+            builder.setEndValueSupplier(endValueSupplier);
+            return builder;
+        }
+
+        public <T> JFXKeyValueBuilder<T> setEndValue(T endValue) {
+            JFXKeyValueBuilder<T> builder = new JFXKeyValueBuilder<>();
+            builder.setEndValue(endValue);
+            return builder;
+        }
+
+        public <T> JFXKeyValueBuilder<T> setAnimateCondition(Supplier<Boolean> animateCondition) {
+            JFXKeyValueBuilder<T> builder = new JFXKeyValueBuilder<>();
+            builder.setAnimateCondition(animateCondition);
+            return builder;
+        }
+
+        public <T> JFXKeyValueBuilder<T> setInterpolator(Interpolator interpolator) {
+            JFXKeyValueBuilder<T> builder = new JFXKeyValueBuilder<>();
+            builder.setInterpolator(interpolator);
+            return builder;
+        }
+    }
+
+    public static final class JFXKeyValueBuilder<T> {
+
+        private WritableValue<T> target;
+        private Supplier<WritableValue<T>> targetSupplier;
+        private Supplier<T> endValueSupplier;
+        private T endValue;
+        private Supplier<Boolean> animateCondition = () -> true;
+        private Interpolator interpolator = Interpolator.EASE_BOTH;
+
+        private JFXKeyValueBuilder() {
+        }
+
+        public JFXKeyValueBuilder<T> setTarget(WritableValue<T> target) {
+            this.target = target;
+            return this;
+        }
+
+        public JFXKeyValueBuilder<T> setTargetSupplier(Supplier<WritableValue<T>> targetSupplier) {
+            this.targetSupplier = targetSupplier;
+            return this;
+        }
+
+        public JFXKeyValueBuilder<T> setEndValueSupplier(Supplier<T> endValueSupplier) {
+            this.endValueSupplier = endValueSupplier;
+            return this;
+        }
+
+        public JFXKeyValueBuilder<T> setEndValue(T endValue) {
+            this.endValue = endValue;
+            return this;
+        }
+
+        public JFXKeyValueBuilder<T> setAnimateCondition(Supplier<Boolean> animateCondition) {
+            this.animateCondition = animateCondition;
+            return this;
+        }
+
+        public JFXKeyValueBuilder<T> setInterpolator(Interpolator interpolator) {
+            this.interpolator = interpolator;
+            return this;
+        }
+
+        public JFXKeyValue<T> build() {
+            JFXKeyValue<T> jFXKeyValue = new JFXKeyValue<>();
+            jFXKeyValue.target = this.target;
+            jFXKeyValue.interpolator = this.interpolator;
+            jFXKeyValue.targetSupplier = this.targetSupplier;
+            jFXKeyValue.endValue = this.endValue;
+            jFXKeyValue.endValueSupplier = this.endValueSupplier;
+            jFXKeyValue.animateCondition = this.animateCondition;
+            return jFXKeyValue;
+        }
+    }
+}

HMCL/src/main/java/com/jfoenix/utils/JFXNodeUtils.java

@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.jfoenix.utils;
+
+import javafx.scene.layout.Background;
+import javafx.scene.layout.BackgroundFill;
+import javafx.scene.layout.Region;
+import javafx.scene.paint.Color;
+import javafx.scene.paint.Paint;
+
+import java.util.Locale;
+
+/// @author Shadi Shaheen
+/// @version 1.0
+/// @since 2017-02-11
+public final class JFXNodeUtils {
+
+    public static void updateBackground(Background newBackground, Region nodeToUpdate) {
+        updateBackground(newBackground, nodeToUpdate, Color.BLACK);
+    }
+
+    public static void updateBackground(Background newBackground, Region nodeToUpdate, Paint fill) {
+        if (newBackground != null && !newBackground.getFills().isEmpty()) {
+            final BackgroundFill[] fills = new BackgroundFill[newBackground.getFills().size()];
+            for (int i = 0; i < newBackground.getFills().size(); i++) {
+                BackgroundFill bf = newBackground.getFills().get(i);
+                fills[i] = new BackgroundFill(fill, bf.getRadii(), bf.getInsets());
+            }
+            nodeToUpdate.setBackground(new Background(fills));
+        }
+    }
+
+    public static String colorToHex(Color c) {
+        if (c != null) {
+            return String.format((Locale) null, "#%02X%02X%02X",
+                    Math.round(c.getRed() * 255),
+                    Math.round(c.getGreen() * 255),
+                    Math.round(c.getBlue() * 255));
+        } else {
+            return null;
+        }
+    }
+
+    private JFXNodeUtils() {
+    }
+
+}

HMCL/src/main/java/org/jackhuang/hmcl/game/HMCLGameLauncher.java

@@ -111,6 +111,7 @@ public final class HMCLGameLauncher extends DefaultLauncher {
         String region = locale.getCountry();
 
         return switch (LocaleUtils.getRootLanguage(locale)) {
+            case "ar" -> "ar_SA";
             case "es" -> "es_ES";
             case "ja" -> "ja_JP";
             case "ru" -> "ru_RU";

HMCL/src/main/java/org/jackhuang/hmcl/game/HMCLGameRepository.java

@@ -338,7 +338,7 @@ public final class HMCLGameRepository extends DefaultGameRepository {
                 GameVersionNumber versionNumber = GameVersionNumber.asGameVersion(gameVersion);
                 if (versionNumber.isAprilFools()) {
                     return VersionIconType.APRIL_FOOLS.getIcon();
-                } else if (versionNumber instanceof GameVersionNumber.LegacySnapshot) {
+                } else if (versionNumber instanceof GameVersionNumber.Snapshot) {
                     return VersionIconType.COMMAND.getIcon();
                 } else if (versionNumber instanceof GameVersionNumber.Old) {
                     return VersionIconType.CRAFT_TABLE.getIcon();

HMCL/src/main/java/org/jackhuang/hmcl/setting/Config.java

@@ -34,12 +34,12 @@ import org.hildan.fxgson.factories.JavaFxPropertyTypeAdapterFactory;
 import org.jackhuang.hmcl.Metadata;
 import org.jackhuang.hmcl.auth.authlibinjector.AuthlibInjectorServer;
 import org.jackhuang.hmcl.java.JavaRuntime;
+import org.jackhuang.hmcl.theme.ThemeColor;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.util.gson.*;
 import org.jackhuang.hmcl.util.i18n.SupportedLocale;
 import org.jetbrains.annotations.Nullable;
 
-import java.lang.reflect.*;
 import java.net.Proxy;
 import java.nio.file.Path;
 import java.util.*;
@@ -276,19 +276,34 @@ public final class Config extends ObservableSetting {
 
     // UI
 
+    @SerializedName("themeBrightness")
+    private final StringProperty themeBrightness = new SimpleStringProperty("light");
+
+    public StringProperty themeBrightnessProperty() {
+        return themeBrightness;
+    }
+
+    public String getThemeBrightness() {
+        return themeBrightness.get();
+    }
+
+    public void setThemeBrightness(String themeBrightness) {
+        this.themeBrightness.set(themeBrightness);
+    }
+
     @SerializedName("theme")
-    private final ObjectProperty<Theme> theme = new SimpleObjectProperty<>();
+    private final ObjectProperty<ThemeColor> themeColor = new SimpleObjectProperty<>(ThemeColor.DEFAULT);
 
-    public ObjectProperty<Theme> themeProperty() {
-        return theme;
+    public ObjectProperty<ThemeColor> themeColorProperty() {
+        return themeColor;
     }
 
-    public Theme getTheme() {
-        return theme.get();
+    public ThemeColor getThemeColor() {
+        return themeColor.get();
     }
 
-    public void setTheme(Theme theme) {
-        this.theme.set(theme);
+    public void setThemeColor(ThemeColor themeColor) {
+        this.themeColor.set(themeColor);
     }
 
     @SerializedName("fontFamily")
@@ -478,7 +493,7 @@ public final class Config extends ObservableSetting {
     }
 
     @SerializedName("downloadType")
-    private final StringProperty downloadType = new SimpleStringProperty(DownloadProviders.DEFAULT_RAW_PROVIDER_ID);
+    private final StringProperty downloadType = new SimpleStringProperty(DownloadProviders.DEFAULT_DIRECT_PROVIDER_ID);
 
     public StringProperty downloadTypeProperty() {
         return downloadType;
@@ -508,7 +523,7 @@ public final class Config extends ObservableSetting {
     }
 
     @SerializedName("versionListSource")
-    private final StringProperty versionListSource = new SimpleStringProperty("balanced");
+    private final StringProperty versionListSource = new SimpleStringProperty(DownloadProviders.DEFAULT_AUTO_PROVIDER_ID);
 
     public StringProperty versionListSourceProperty() {
         return versionListSource;

HMCL/src/main/java/org/jackhuang/hmcl/setting/DownloadProviders.java

@@ -21,9 +21,10 @@ import javafx.beans.InvalidationListener;
 import org.jackhuang.hmcl.download.*;
 import org.jackhuang.hmcl.task.DownloadException;
 import org.jackhuang.hmcl.task.FetchTask;
-import org.jackhuang.hmcl.ui.FXUtils;
+import org.jackhuang.hmcl.util.Lang;
 import org.jackhuang.hmcl.util.StringUtils;
 import org.jackhuang.hmcl.util.i18n.I18n;
+import org.jackhuang.hmcl.util.i18n.LocaleUtils;
 import org.jackhuang.hmcl.util.io.ResponseCodeException;
 
 import javax.net.ssl.SSLHandshakeException;
@@ -31,104 +32,88 @@ import java.io.FileNotFoundException;
 import java.net.SocketTimeoutException;
 import java.net.URI;
 import java.nio.file.AccessDeniedException;
-import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
-import java.util.Objects;
 import java.util.concurrent.CancellationException;
 
 import static org.jackhuang.hmcl.setting.ConfigHolder.config;
 import static org.jackhuang.hmcl.task.FetchTask.DEFAULT_CONCURRENCY;
+import static org.jackhuang.hmcl.util.Pair.pair;
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
 public final class DownloadProviders {
     private DownloadProviders() {
     }
 
-    private static final DownloadProviderWrapper provider;
+    public static final String DEFAULT_AUTO_PROVIDER_ID = "balanced";
+    public static final String DEFAULT_DIRECT_PROVIDER_ID = "mojang";
 
-    public static final Map<String, DownloadProvider> providersById;
-    public static final Map<String, DownloadProvider> rawProviders;
-    private static final AdaptedDownloadProvider fileDownloadProvider = new AdaptedDownloadProvider();
+    private static final DownloadProviderWrapper PROVIDER_WRAPPER;
 
-    private static final MojangDownloadProvider MOJANG;
-    private static final BMCLAPIDownloadProvider BMCLAPI;
-
-    public static final String DEFAULT_PROVIDER_ID = "balanced";
-    public static final String DEFAULT_RAW_PROVIDER_ID = "bmclapi";
-
-    @SuppressWarnings("unused")
-    private static final InvalidationListener observer;
+    private static final DownloadProvider DEFAULT_PROVIDER;
+    public static final Map<String, DownloadProvider> DIRECT_PROVIDERS;
+    public static final Map<String, DownloadProvider> AUTO_PROVIDERS;
 
     static {
-        String bmclapiRoot = "https://bmclapi2.bangbang93.com";
-        String bmclapiRootOverride = System.getProperty("hmcl.bmclapi.override");
-        if (bmclapiRootOverride != null) bmclapiRoot = bmclapiRootOverride;
+        String bmclapiRoot = System.getProperty("hmcl.bmclapi.override", "https://bmclapi2.bangbang93.com");
+        BMCLAPIDownloadProvider bmclapiRaw = new BMCLAPIDownloadProvider(bmclapiRoot);
 
-        MOJANG = new MojangDownloadProvider();
-        BMCLAPI = new BMCLAPIDownloadProvider(bmclapiRoot);
-        rawProviders = Map.of(
-                "mojang", MOJANG,
-                "bmclapi", BMCLAPI
+        DownloadProvider mojang = new MojangDownloadProvider();
+        DownloadProvider bmclapi = new AutoDownloadProvider(bmclapiRaw, mojang);
+
+        DEFAULT_PROVIDER = mojang;
+        DIRECT_PROVIDERS = Lang.mapOf(
+                pair("mojang", mojang),
+                pair("bmclapi", bmclapi)
         );
 
-        AdaptedDownloadProvider fileProvider = new AdaptedDownloadProvider();
-        fileProvider.setDownloadProviderCandidates(List.of(BMCLAPI, MOJANG));
-        BalancedDownloadProvider balanced = new BalancedDownloadProvider(MOJANG, BMCLAPI);
+        AUTO_PROVIDERS = Lang.mapOf(
+                pair("balanced", LocaleUtils.IS_CHINA_MAINLAND ? bmclapi : mojang),
+                pair("official", LocaleUtils.IS_CHINA_MAINLAND ? new AutoDownloadProvider(
+                        List.of(mojang, bmclapiRaw),
+                        List.of(bmclapiRaw, mojang)
+                ) : mojang),
+                pair("mirror", bmclapi)
+        );
 
-        providersById = Map.of(
-                "official", new AutoDownloadProvider(MOJANG, fileProvider),
-                "balanced", new AutoDownloadProvider(balanced, fileProvider),
-                "mirror", new AutoDownloadProvider(BMCLAPI, fileProvider));
-
-        observer = FXUtils.observeWeak(() -> {
-            FetchTask.setDownloadExecutorConcurrency(
-                    config().getAutoDownloadThreads() ? DEFAULT_CONCURRENCY : config().getDownloadThreads());
-        }, config().autoDownloadThreadsProperty(), config().downloadThreadsProperty());
-
-        provider = new DownloadProviderWrapper(MOJANG);
+        PROVIDER_WRAPPER = new DownloadProviderWrapper(DEFAULT_PROVIDER);
     }
 
     static void init() {
-        InvalidationListener onChangeDownloadSource = observable -> {
-            String versionListSource = Objects.requireNonNullElse(config().getVersionListSource(), "");
-            if (config().isAutoChooseDownloadType()) {
-                DownloadProvider currentDownloadProvider = providersById.get(versionListSource);
-                if (currentDownloadProvider == null)
-                    currentDownloadProvider = Objects.requireNonNull(providersById.get(DEFAULT_PROVIDER_ID),
-                            "default provider is null");
+        InvalidationListener onChangeDownloadThreads = observable -> {
+            FetchTask.setDownloadExecutorConcurrency(config().getAutoDownloadThreads()
+                    ? DEFAULT_CONCURRENCY
+                    : config().getDownloadThreads());
+        };
+        config().autoDownloadThreadsProperty().addListener(onChangeDownloadThreads);
+        config().downloadThreadsProperty().addListener(onChangeDownloadThreads);
+        onChangeDownloadThreads.invalidated(null);
 
-                provider.setProvider(currentDownloadProvider);
+        InvalidationListener onChangeDownloadSource = observable -> {
+            if (config().isAutoChooseDownloadType()) {
+                String versionListSource = config().getVersionListSource();
+                DownloadProvider downloadProvider = versionListSource != null
+                        ? AUTO_PROVIDERS.getOrDefault(versionListSource, DEFAULT_PROVIDER)
+                        : DEFAULT_PROVIDER;
+                PROVIDER_WRAPPER.setProvider(downloadProvider);
             } else {
-                provider.setProvider(fileDownloadProvider);
+                String downloadType = config().getDownloadType();
+                PROVIDER_WRAPPER.setProvider(downloadType != null
+                        ? DIRECT_PROVIDERS.getOrDefault(downloadType, DEFAULT_PROVIDER)
+                        : DEFAULT_PROVIDER);
             }
         };
         config().versionListSourceProperty().addListener(onChangeDownloadSource);
         config().autoChooseDownloadTypeProperty().addListener(onChangeDownloadSource);
-
+        config().downloadTypeProperty().addListener(onChangeDownloadSource);
         onChangeDownloadSource.invalidated(null);
-
-        FXUtils.onChangeAndOperate(config().downloadTypeProperty(), downloadType -> {
-            DownloadProvider primary = Objects.requireNonNullElseGet(
-                    rawProviders.get(Objects.requireNonNullElse(downloadType, "")),
-                    () -> rawProviders.get(DEFAULT_RAW_PROVIDER_ID));
-
-            List<DownloadProvider> providers = new ArrayList<>(rawProviders.size());
-            providers.add(primary);
-            for (DownloadProvider provider : rawProviders.values()) {
-                if (provider != primary)
-                    providers.add(provider);
-            }
-
-            fileDownloadProvider.setDownloadProviderCandidates(providers);
-        });
     }
 
     /**
      * Get current primary preferred download provider
      */
     public static DownloadProvider getDownloadProvider() {
-        return provider;
+        return PROVIDER_WRAPPER;
     }
 
     public static String localizeErrorMessage(Throwable exception) {

HMCL/src/main/java/org/jackhuang/hmcl/setting/StyleSheets.java

@@ -22,6 +22,12 @@ import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.scene.Scene;
 import javafx.scene.paint.Color;
+import org.glavo.monetfx.Brightness;
+import org.glavo.monetfx.ColorRole;
+import org.glavo.monetfx.ColorScheme;
+import org.jackhuang.hmcl.theme.Theme;
+import org.jackhuang.hmcl.theme.ThemeColor;
+import org.jackhuang.hmcl.theme.Themes;
 import org.jackhuang.hmcl.ui.FXUtils;
 
 import java.io.IOException;
@@ -33,7 +39,6 @@ import java.util.Arrays;
 import java.util.Base64;
 import java.util.Locale;
 
-import static org.jackhuang.hmcl.setting.ConfigHolder.config;
 import static org.jackhuang.hmcl.util.logging.Logger.LOG;
 
 /**
@@ -54,7 +59,7 @@ public final class StyleSheets {
         stylesheets = FXCollections.observableList(Arrays.asList(array));
 
         FontManager.fontProperty().addListener(o -> stylesheets.set(FONT_STYLE_SHEET_INDEX, getFontStyleSheet()));
-        config().themeProperty().addListener(o -> stylesheets.set(THEME_STYLE_SHEET_INDEX, getThemeStyleSheet()));
+        Themes.colorSchemeProperty().addListener(o -> stylesheets.set(THEME_STYLE_SHEET_INDEX, getThemeStyleSheet()));
     }
 
     private static String toStyleSheetUri(String styleSheet, String fallback) {
@@ -126,31 +131,55 @@ public final class StyleSheets {
         return toStyleSheetUri(builder.toString(), defaultCss);
     }
 
-    private static String rgba(Color color, double opacity) {
-        return String.format("rgba(%d, %d, %d, %.1f)",
-                (int) Math.ceil(color.getRed() * 256),
-                (int) Math.ceil(color.getGreen() * 256),
-                (int) Math.ceil(color.getBlue() * 256),
-                opacity);
+    private static void addColor(StringBuilder builder, String name, Color color) {
+        builder.append("  ").append(name)
+                .append(": ").append(ThemeColor.getColorDisplayName(color)).append(";\n");
+    }
+
+    private static void addColor(StringBuilder builder, String name, Color color, double opacity) {
+        builder.append("  ").append(name)
+                .append(": ").append(ThemeColor.getColorDisplayNameWithOpacity(color, opacity)).append(";\n");
+    }
+
+    private static void addColor(StringBuilder builder, ColorScheme scheme, ColorRole role, double opacity) {
+        builder.append("  ").append(role.getVariableName()).append("-transparent-%02d".formatted((int) (100 * opacity)))
+                .append(": ").append(ThemeColor.getColorDisplayNameWithOpacity(scheme.getColor(role), opacity))
+                .append(";\n");
     }
 
     private static String getThemeStyleSheet() {
         final String blueCss = "/assets/css/blue.css";
 
-        Theme theme = config().getTheme();
-        if (theme == null || theme.getPaint().equals(Theme.BLUE.getPaint()))
+        if (Theme.DEFAULT.equals(Themes.getTheme()))
             return blueCss;
 
-        return toStyleSheetUri(".root {" +
-                "-fx-base-color:" + theme.getColor() + ';' +
-                "-fx-base-darker-color: derive(-fx-base-color, -10%);" +
-                "-fx-base-check-color: derive(-fx-base-color, 30%);" +
-                "-fx-rippler-color:" + rgba(theme.getPaint(), 0.3) + ';' +
-                "-fx-base-rippler-color: derive(" + rgba(theme.getPaint(), 0.3) + ", 100%);" +
-                "-fx-base-disabled-text-fill:" + rgba(theme.getForegroundColor(), 0.7) + ";" +
-                "-fx-base-text-fill:" + Theme.getColorDisplayName(theme.getForegroundColor()) + ";" +
-                "-theme-thumb:" + rgba(theme.getPaint(), 0.7) + ";" +
-                '}', blueCss);
+        ColorScheme scheme = Themes.getColorScheme();
+
+        StringBuilder builder = new StringBuilder();
+        builder.append("* {\n");
+        for (ColorRole colorRole : ColorRole.ALL) {
+            addColor(builder, colorRole.getVariableName(), scheme.getColor(colorRole));
+        }
+
+        addColor(builder, "-monet-primary-seed", scheme.getPrimaryColorSeed());
+
+        addColor(builder, scheme, ColorRole.PRIMARY, 0.5);
+        addColor(builder, scheme, ColorRole.SECONDARY_CONTAINER, 0.5);
+        addColor(builder, scheme, ColorRole.SURFACE, 0.5);
+        addColor(builder, scheme, ColorRole.SURFACE, 0.8);
+        addColor(builder, scheme, ColorRole.ON_SURFACE_VARIANT, 0.38);
+        addColor(builder, scheme, ColorRole.SURFACE_CONTAINER_LOW, 0.8);
+        addColor(builder, scheme, ColorRole.SECONDARY_CONTAINER, 0.8);
+
+        // If we use -monet-error-container as the tag color, there may be a conflict between the tag and background colors on the mod management page
+        if (scheme.getBrightness() == Brightness.LIGHT) {
+            addColor(builder, "-warning-tag-background", Color.web("#f1aeb5"));
+        } else {
+            addColor(builder, "-warning-tag-background", Color.web("#2c0b0e"));
+        }
+
+        builder.append("}\n");
+        return toStyleSheetUri(builder.toString(), blueCss);
     }
 
     public static void init(Scene scene) {

HMCL/src/main/java/org/jackhuang/hmcl/setting/Theme.java

@@ -1,163 +0,0 @@
-/*
- * Hello Minecraft! Launcher
- * Copyright (C) 2020  huangyuhui <huanghongxun2008@126.com> and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-package org.jackhuang.hmcl.setting;
-
-import com.google.gson.annotations.JsonAdapter;
-import com.google.gson.stream.JsonReader;
-import com.google.gson.stream.JsonWriter;
-import javafx.beans.binding.Bindings;
-import javafx.beans.binding.ObjectBinding;
-import javafx.scene.paint.Color;
-
-import java.io.IOException;
-import java.util.Locale;
-import java.util.Objects;
-import java.util.Optional;
-
-import static org.jackhuang.hmcl.setting.ConfigHolder.config;
-
-@JsonAdapter(Theme.TypeAdapter.class)
-public final class Theme {
-    public static final Theme BLUE = new Theme("blue", "#5C6BC0");
-    public static final Color BLACK = Color.web("#292929");
-    public static final Color[] SUGGESTED_COLORS = new Color[]{
-            Color.web("#3D6DA3"), // blue
-            Color.web("#283593"), // dark blue
-            Color.web("#43A047"), // green
-            Color.web("#E67E22"), // orange
-            Color.web("#9C27B0"), // purple
-            Color.web("#B71C1C")  // red
-    };
-
-    public static Theme getTheme() {
-        Theme theme = config().getTheme();
-        return theme == null ? BLUE : theme;
-    }
-
-    private final Color paint;
-    private final String color;
-    private final String name;
-
-    Theme(String name, String color) {
-        this.name = name;
-        this.color = Objects.requireNonNull(color);
-        this.paint = Color.web(color);
-    }
-
-    public String getName() {
-        return name;
-    }
-
-    public String getColor() {
-        return color;
-    }
-
-    public Color getPaint() {
-        return paint;
-    }
-
-    public boolean isCustom() {
-        return name.startsWith("#");
-    }
-
-    public boolean isLight() {
-        return paint.grayscale().getRed() >= 0.5;
-    }
-
-    public Color getForegroundColor() {
-        return isLight() ? Color.BLACK : Color.WHITE;
-    }
-
-    public static Theme custom(String color) {
-        if (!color.startsWith("#"))
-            throw new IllegalArgumentException();
-        return new Theme(color, color);
-    }
-
-    public static Optional<Theme> getTheme(String name) {
-        if (name == null)
-            return Optional.empty();
-        else if (name.startsWith("#"))
-            try {
-                Color.web(name);
-                return Optional.of(custom(name));
-            } catch (IllegalArgumentException ignore) {
-            }
-        else {
-            String color = null;
-            switch (name.toLowerCase(Locale.ROOT)) {
-                case "blue":
-                    return Optional.of(BLUE);
-                case "darker_blue":
-                    color = "#283593";
-                    break;
-                case "green":
-                    color = "#43A047";
-                    break;
-                case "orange":
-                    color = "#E67E22";
-                    break;
-                case "purple":
-                    color = "#9C27B0";
-                    break;
-                case "red":
-                    color = "#F44336";
-            }
-            if (color != null)
-                return Optional.of(new Theme(name, color));
-        }
-
-        return Optional.empty();
-    }
-
-    public static String getColorDisplayName(Color c) {
-        return c != null ? String.format("#%02X%02X%02X", Math.round(c.getRed() * 255.0D), Math.round(c.getGreen() * 255.0D), Math.round(c.getBlue() * 255.0D)) : null;
-    }
-
-    private static ObjectBinding<Color> FOREGROUND_FILL;
-
-    public static ObjectBinding<Color> foregroundFillBinding() {
-        if (FOREGROUND_FILL == null)
-            FOREGROUND_FILL = Bindings.createObjectBinding(
-                    () -> Theme.getTheme().getForegroundColor(),
-                    config().themeProperty()
-            );
-
-        return FOREGROUND_FILL;
-    }
-
-    public static Color blackFill() {
-        return BLACK;
-    }
-
-    public static Color whiteFill() {
-        return Color.WHITE;
-    }
-
-    public static class TypeAdapter extends com.google.gson.TypeAdapter<Theme> {
-        @Override
-        public void write(JsonWriter out, Theme value) throws IOException {
-            out.value(value.getName().toLowerCase(Locale.ROOT));
-        }
-
-        @Override
-        public Theme read(JsonReader in) throws IOException {
-            return getTheme(in.nextString()).orElse(Theme.BLUE);
-        }
-    }
-}

HMCL/src/main/java/org/jackhuang/hmcl/theme/Theme.java

@@ -0,0 +1,94 @@
+/*
+ * Hello Minecraft! Launcher
+ * Copyright (C) 2025 huangyuhui <huanghongxun2008@126.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+package org.jackhuang.hmcl.theme;
+
+import org.glavo.monetfx.*;
+
+import java.util.*;
+
+/// @author Glavo
+public final class Theme {
+
+    public static final Theme DEFAULT = new Theme(ThemeColor.DEFAULT, Brightness.DEFAULT, ColorStyle.FIDELITY, Contrast.DEFAULT);
+
+    private final ThemeColor primaryColorSeed;
+    private final Brightness brightness;
+    private final ColorStyle colorStyle;
+    private final Contrast contrast;
+
+    public Theme(ThemeColor primaryColorSeed,
+                 Brightness brightness,
+                 ColorStyle colorStyle,
+                 Contrast contrast
+    ) {
+        this.primaryColorSeed = primaryColorSeed;
+        this.brightness = brightness;
+        this.colorStyle = colorStyle;
+        this.contrast = contrast;
+    }
+
+    public ColorScheme toColorScheme() {
+        return ColorScheme.newBuilder()
+                .setPrimaryColorSeed(primaryColorSeed.color())
+                .setColorStyle(colorStyle)
+                .setBrightness(brightness)
+                .setSpecVersion(ColorSpecVersion.SPEC_2025)
+                .setContrast(contrast)
+                .build();
+    }
+
+    public ThemeColor primaryColorSeed() {
+        return primaryColorSeed;
+    }
+
+    public Brightness brightness() {
+        return brightness;
+    }
+
+    public ColorStyle colorStyle() {
+        return colorStyle;
+    }
+
+    public Contrast contrast() {
+        return contrast;
+    }
+
+    @Override
+    public boolean equals(Object obj) {
+        return obj == this || obj instanceof Theme that
+                && this.primaryColorSeed.color().equals(that.primaryColorSeed.color())
+                && this.brightness.equals(that.brightness)
+                && this.colorStyle.equals(that.colorStyle)
+                && this.contrast.equals(that.contrast);
+    }
+
+    @Override
+    public int hashCode() {
+        return Objects.hash(primaryColorSeed, brightness, colorStyle, contrast);
+    }
+
+    @Override
+    public String toString() {
+        return "Theme[" +
+                "primaryColorSeed=" + primaryColorSeed + ", " +
+                "brightness=" + brightness + ", " +
+                "colorStyle=" + colorStyle + ", " +
+                "contrast=" + contrast + ']';
+    }
+
+}

HMCL/src/main/java/org/jackhuang/hmcl/theme/ThemeColor.java

@@ -0,0 +1,193 @@
+/*
+ * Hello Minecraft! Launcher
+ * Copyright (C) 2025 huangyuhui <huanghongxun2008@126.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+package org.jackhuang.hmcl.theme;
+
+import com.google.gson.annotations.JsonAdapter;
+import com.google.gson.stream.JsonReader;
+import com.google.gson.stream.JsonWriter;
+import javafx.beans.InvalidationListener;
+import javafx.beans.Observable;
+import javafx.beans.WeakListener;
+import javafx.beans.property.Property;
+import javafx.scene.control.ColorPicker;
+import javafx.scene.paint.Color;
+import org.jackhuang.hmcl.util.gson.JsonSerializable;
+import org.jetbrains.annotations.Contract;
+import org.jetbrains.annotations.NotNull;
+import org.jetbrains.annotations.Nullable;
+
+import java.io.IOException;
+import java.lang.ref.WeakReference;
+import java.util.List;
+import java.util.Objects;
+
+/// @author Glavo
+@JsonAdapter(ThemeColor.TypeAdapter.class)
+@JsonSerializable
+public record ThemeColor(@NotNull String name, @NotNull Color color) {
+
+    public static final ThemeColor DEFAULT = new ThemeColor("blue", Color.web("#5C6BC0"));
+
+    public static final List<ThemeColor> STANDARD_COLORS = List.of(
+            DEFAULT,
+            new ThemeColor("darker_blue", Color.web("#283593")),
+            new ThemeColor("green", Color.web("#43A047")),
+            new ThemeColor("orange", Color.web("#E67E22")),
+            new ThemeColor("purple", Color.web("#9C27B0")),
+            new ThemeColor("red", Color.web("#B71C1C"))
+    );
+
+    public static String getColorDisplayName(Color c) {
+        return c != null ? String.format("#%02X%02X%02X",
+                Math.round(c.getRed() * 255.0D),
+                Math.round(c.getGreen() * 255.0D),
+                Math.round(c.getBlue() * 255.0D))
+                : null;
+    }
+
+    public static String getColorDisplayNameWithOpacity(Color c, double opacity) {
+        return c != null ? String.format("#%02X%02X%02X%02X",
+                Math.round(c.getRed() * 255.0D),
+                Math.round(c.getGreen() * 255.0D),
+                Math.round(c.getBlue() * 255.0D),
+                Math.round(opacity * 255.0))
+                : null;
+    }
+
+    public static @Nullable ThemeColor of(String name) {
+        if (name == null)
+            return null;
+
+        if (!name.startsWith("#")) {
+            for (ThemeColor color : STANDARD_COLORS) {
+                if (name.equalsIgnoreCase(color.name()))
+                    return color;
+            }
+        }
+
+        try {
+            return new ThemeColor(name, Color.web(name));
+        } catch (IllegalArgumentException e) {
+            return null;
+        }
+    }
+
+    @Contract("null -> null; !null -> !null")
+    public static ThemeColor of(Color color) {
+        return color != null ? new ThemeColor(getColorDisplayName(color), color) : null;
+    }
+
+    private static final class BidirectionalBinding implements InvalidationListener, WeakListener {
+        private final WeakReference<ColorPicker> colorPickerRef;
+        private final WeakReference<Property<ThemeColor>> propertyRef;
+        private final int hashCode;
+
+        private boolean updating = false;
+
+        private BidirectionalBinding(ColorPicker colorPicker, Property<ThemeColor> property) {
+            this.colorPickerRef = new WeakReference<>(colorPicker);
+            this.propertyRef = new WeakReference<>(property);
+            this.hashCode = System.identityHashCode(colorPicker) ^ System.identityHashCode(property);
+        }
+
+        @Override
+        public void invalidated(Observable sourceProperty) {
+            if (!updating) {
+                final ColorPicker colorPicker = colorPickerRef.get();
+                final Property<ThemeColor> property = propertyRef.get();
+
+                if (colorPicker == null || property == null) {
+                    if (colorPicker != null) {
+                        colorPicker.valueProperty().removeListener(this);
+                    }
+
+                    if (property != null) {
+                        property.removeListener(this);
+                    }
+                } else {
+                    updating = true;
+                    try {
+                        if (property == sourceProperty) {
+                            ThemeColor newValue = property.getValue();
+                            colorPicker.setValue(newValue != null ? newValue.color() : null);
+                        } else {
+                            Color newValue = colorPicker.getValue();
+                            property.setValue(newValue != null ? ThemeColor.of(newValue) : null);
+                        }
+                    } finally {
+                        updating = false;
+                    }
+                }
+            }
+        }
+
+        @Override
+        public boolean wasGarbageCollected() {
+            return colorPickerRef.get() == null || propertyRef.get() == null;
+        }
+
+        @Override
+        public int hashCode() {
+            return hashCode;
+        }
+
+        @Override
+        public boolean equals(Object o) {
+            if (this == o)
+                return true;
+            if (!(o instanceof BidirectionalBinding that))
+                return false;
+
+            final ColorPicker colorPicker = this.colorPickerRef.get();
+            final Property<ThemeColor> property = this.propertyRef.get();
+
+            final ColorPicker thatColorPicker = that.colorPickerRef.get();
+            final Property<?> thatProperty = that.propertyRef.get();
+
+            if (colorPicker == null || property == null || thatColorPicker == null || thatProperty == null)
+                return false;
+
+            return colorPicker == thatColorPicker && property == thatProperty;
+        }
+    }
+
+    public static void bindBidirectional(ColorPicker colorPicker, Property<ThemeColor> property) {
+        var binding = new BidirectionalBinding(colorPicker, property);
+
+        colorPicker.valueProperty().removeListener(binding);
+        property.removeListener(binding);
+
+        ThemeColor themeColor = property.getValue();
+        colorPicker.setValue(themeColor != null ? themeColor.color() : null);
+
+        colorPicker.valueProperty().addListener(binding);
+        property.addListener(binding);
+    }
+
+    static final class TypeAdapter extends com.google.gson.TypeAdapter<ThemeColor> {
+        @Override
+        public void write(JsonWriter out, ThemeColor value) throws IOException {
+            out.value(value.name());
+        }
+
+        @Override
+        public ThemeColor read(JsonReader in) throws IOException {
+            return Objects.requireNonNullElse(of(in.nextString()), ThemeColor.DEFAULT);
+        }
+    }
+}

HMCL/src/main/java/org/jackhuang/hmcl/theme/Themes.java

@@ -0,0 +1,126 @@
+/*
+ * Hello Minecraft! Launcher
+ * Copyright (C) 2025 huangyuhui <huanghongxun2008@126.com> and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+package org.jackhuang.hmcl.theme;
+
+import javafx.beans.Observable;
+import javafx.beans.binding.Bindings;
+import javafx.beans.binding.BooleanBinding;
+import javafx.beans.binding.ObjectBinding;
+import javafx.beans.binding.ObjectExpression;
+import javafx.beans.value.ChangeListener;
+import javafx.beans.value.ObservableValue;
+import javafx.scene.paint.Color;
+import org.glavo.monetfx.Brightness;
+import org.glavo.monetfx.ColorScheme;
+import org.glavo.monetfx.Contrast;
+import org.glavo.monetfx.beans.property.ColorSchemeProperty;
+import org.glavo.monetfx.beans.property.ReadOnlyColorSchemeProperty;
+import org.glavo.monetfx.beans.property.SimpleColorSchemeProperty;
+import org.jackhuang.hmcl.ui.FXUtils;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Locale;
+import java.util.Objects;
+
+import static org.jackhuang.hmcl.setting.ConfigHolder.config;
+
+/// @author Glavo
+public final class Themes {
+
+    private static final ObjectExpression<Theme> theme = new ObjectBinding<>() {
+        {
+            List<Observable> observables = new ArrayList<>();
+
+            observables.add(config().themeBrightnessProperty());
+            observables.add(config().themeColorProperty());
+            if (FXUtils.DARK_MODE != null) {
+                observables.add(FXUtils.DARK_MODE);
+            }
+            bind(observables.toArray(new Observable[0]));
+        }
+
+        private Brightness getBrightness() {
+            String themeBrightness = config().getThemeBrightness();
+            if (themeBrightness == null)
+                return Brightness.DEFAULT;
+
+            return switch (themeBrightness.toLowerCase(Locale.ROOT).trim()) {
+                case "auto" -> {
+                    if (FXUtils.DARK_MODE != null) {
+                        yield FXUtils.DARK_MODE.get() ? Brightness.DARK : Brightness.LIGHT;
+                    } else {
+                        yield Brightness.DEFAULT;
+                    }
+                }
+                case "dark" -> Brightness.DARK;
+                case "light" -> Brightness.LIGHT;
+                default -> Brightness.DEFAULT;
+            };
+        }
+
+        @Override
+        protected Theme computeValue() {
+            ThemeColor themeColor = Objects.requireNonNullElse(config().getThemeColor(), ThemeColor.DEFAULT);
+
+            return new Theme(themeColor, getBrightness(), Theme.DEFAULT.colorStyle(), Contrast.DEFAULT);
+        }
+    };
+    private static final ColorSchemeProperty colorScheme = new SimpleColorSchemeProperty();
+    private static final BooleanBinding darkMode = Bindings.createBooleanBinding(
+            () -> colorScheme.get().getBrightness() == Brightness.DARK,
+            colorScheme
+    );
+
+    static {
+        ChangeListener<Theme> listener = (observable, oldValue, newValue) -> {
+            if (!Objects.equals(oldValue, newValue)) {
+                colorScheme.set(newValue != null ? newValue.toColorScheme() : Theme.DEFAULT.toColorScheme());
+            }
+        };
+        listener.changed(theme, null, theme.get());
+        theme.addListener(listener);
+    }
+
+    public static ObjectExpression<Theme> themeProperty() {
+        return theme;
+    }
+
+    public static Theme getTheme() {
+        return themeProperty().get();
+    }
+
+    public static ReadOnlyColorSchemeProperty colorSchemeProperty() {
+        return colorScheme;
+    }
+
+    public static ColorScheme getColorScheme() {
+        return colorScheme.get();
+    }
+
+    public static ObservableValue<Color> titleFillProperty() {
+        return colorSchemeProperty().getOnPrimaryContainer();
+    }
+
+    public static BooleanBinding darkModeProperty() {
+        return darkMode;
+    }
+
+    private Themes() {
+    }
+}

HMCL/src/main/java/org/jackhuang/hmcl/ui/FXUtils.java

@@ -57,7 +57,6 @@ import javafx.util.Callback;
 import javafx.util.Duration;
 import javafx.util.StringConverter;
 import org.jackhuang.hmcl.setting.StyleSheets;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.CacheFileTask;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
@@ -135,6 +134,7 @@ public final class FXUtils {
     public static final @Nullable ObservableMap<String, Object> PREFERENCES;
     public static final @Nullable ObservableBooleanValue DARK_MODE;
     public static final @Nullable Boolean REDUCED_MOTION;
+    public static final @Nullable ReadOnlyObjectProperty<Color> ACCENT_COLOR;
 
     public static final @Nullable MethodHandle TEXT_TRUNCATED_PROPERTY;
 
@@ -151,6 +151,7 @@ public final class FXUtils {
 
         ObservableMap<String, Object> preferences = null;
         ObservableBooleanValue darkMode = null;
+        ReadOnlyObjectProperty<Color> accentColorProperty = null;
         Boolean reducedMotion = null;
         if (JAVAFX_MAJOR_VERSION >= 22) {
             try {
@@ -162,14 +163,19 @@ public final class FXUtils {
                 preferences = preferences0;
 
                 @SuppressWarnings("unchecked")
-                var colorSchemeProperty =
-                        (ReadOnlyObjectProperty<? extends Enum<?>>)
-                                lookup.findVirtual(preferencesClass, "colorSchemeProperty", MethodType.methodType(ReadOnlyObjectProperty.class))
-                                        .invoke(preferences);
+                var colorSchemeProperty = (ReadOnlyObjectProperty<? extends Enum<?>>)
+                        lookup.findVirtual(preferencesClass, "colorSchemeProperty", MethodType.methodType(ReadOnlyObjectProperty.class))
+                                .invoke(preferences);
 
                 darkMode = Bindings.createBooleanBinding(() ->
                         "DARK".equals(colorSchemeProperty.get().name()), colorSchemeProperty);
 
+                @SuppressWarnings("unchecked")
+                var accentColorProperty0 = (ReadOnlyObjectProperty<Color>)
+                        lookup.findVirtual(preferencesClass, "accentColorProperty", MethodType.methodType(ReadOnlyObjectProperty.class))
+                                .invoke(preferences);
+                accentColorProperty = accentColorProperty0;
+
                 if (JAVAFX_MAJOR_VERSION >= 24) {
                     reducedMotion = (boolean)
                             lookup.findVirtual(preferencesClass, "isReducedMotion", MethodType.methodType(boolean.class))
@@ -182,6 +188,7 @@ public final class FXUtils {
         PREFERENCES = preferences;
         DARK_MODE = darkMode;
         REDUCED_MOTION = reducedMotion;
+        ACCENT_COLOR = accentColorProperty;
 
         MethodHandle textTruncatedProperty = null;
         if (JAVAFX_MAJOR_VERSION >= 23) {
@@ -1214,7 +1221,7 @@ public final class FXUtils {
     public static JFXButton newToggleButton4(SVG icon) {
         JFXButton button = new JFXButton();
         button.getStyleClass().add("toggle-icon4");
-        button.setGraphic(icon.createIcon(Theme.blackFill(), -1));
+        button.setGraphic(icon.createIcon());
         return button;
     }
 
@@ -1447,11 +1454,11 @@ public final class FXUtils {
             for (int i = 0; i < children.getLength(); i++) {
                 org.w3c.dom.Node node = children.item(i);
 
-                if (node instanceof Element) {
-                    Element element = (Element) node;
+                if (node instanceof Element element) {
                     if ("a".equals(element.getTagName())) {
                         String href = element.getAttribute("href");
                         Text text = new Text(element.getTextContent());
+                        text.getStyleClass().add("hyperlink");
                         onClicked(text, () -> {
                             String link = href;
                             try {

HMCL/src/main/java/org/jackhuang/hmcl/ui/GameCrashWindow.java

@@ -292,7 +292,7 @@ public class GameCrashWindow extends Stage {
     private final class View extends VBox {
 
         View() {
-            setStyle("-fx-background-color: white");
+            this.getStyleClass().add("game-crash-window");
 
             HBox titlePane = new HBox();
             {
@@ -395,6 +395,7 @@ public class GameCrashWindow extends Stage {
                 reasonTitle.getStyleClass().add("two-line-item-second-large-title");
 
                 ScrollPane reasonPane = new ScrollPane(reasonTextFlow);
+                reasonTextFlow.getStyleClass().add("crash-reason-text-flow");
                 reasonPane.setFitToWidth(true);
                 reasonPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
                 reasonPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);
@@ -411,6 +412,7 @@ public class GameCrashWindow extends Stage {
             }
 
             HBox toolBar = new HBox();
+            VBox.setMargin(toolBar, new Insets(0, 0, 4, 0));
             {
                 JFXButton exportGameCrashInfoButton = FXUtils.newRaisedButton(i18n("logwindow.export_game_crash_logs"));
                 exportGameCrashInfoButton.setOnAction(e -> exportGameCrashInfo());
@@ -422,7 +424,6 @@ public class GameCrashWindow extends Stage {
                 helpButton.setOnAction(e -> FXUtils.openLink(Metadata.CONTACT_URL));
                 FXUtils.installFastTooltip(helpButton, i18n("logwindow.help"));
 
-
                 toolBar.setPadding(new Insets(8));
                 toolBar.setSpacing(8);
                 toolBar.getStyleClass().add("jfx-tool-bar");

HMCL/src/main/java/org/jackhuang/hmcl/ui/InstallerItem.java

@@ -36,7 +36,6 @@ import javafx.scene.image.ImageView;
 import javafx.scene.input.MouseButton;
 import javafx.scene.layout.*;
 import org.jackhuang.hmcl.download.LibraryAnalyzer;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.setting.VersionIconType;
 import org.jackhuang.hmcl.ui.construct.RipplerContainer;
 import org.jackhuang.hmcl.util.i18n.I18n;
@@ -396,7 +395,7 @@ public class InstallerItem extends Control {
             pane.getChildren().add(buttonsContainer);
 
             JFXButton removeButton = new JFXButton();
-            removeButton.setGraphic(SVG.CLOSE.createIcon(Theme.blackFill(), -1));
+            removeButton.setGraphic(SVG.CLOSE.createIcon());
             removeButton.getStyleClass().add("toggle-icon4");
             if (control.id.equals(MINECRAFT.getPatchId())) {
                 removeButton.setVisible(false);
@@ -417,8 +416,8 @@ public class InstallerItem extends Control {
             JFXButton installButton = new JFXButton();
             installButton.graphicProperty().bind(Bindings.createObjectBinding(() ->
                             control.resolvedStateProperty.get() instanceof InstallableState ?
-                                    SVG.ARROW_FORWARD.createIcon(Theme.blackFill(), -1) :
-                                    SVG.UPDATE.createIcon(Theme.blackFill(), -1),
+                                    SVG.ARROW_FORWARD.createIcon() :
+                                    SVG.UPDATE.createIcon(),
                     control.resolvedStateProperty
             ));
             installButton.getStyleClass().add("toggle-icon4");

HMCL/src/main/java/org/jackhuang/hmcl/ui/ListPageBase.java

@@ -23,10 +23,11 @@ import javafx.collections.ObservableList;
 import javafx.event.Event;
 import javafx.event.EventHandler;
 import javafx.scene.control.Control;
+import org.jackhuang.hmcl.ui.animation.TransitionPane;
 
 import static org.jackhuang.hmcl.ui.construct.SpinnerPane.FAILED_ACTION;
 
-public class ListPageBase<T> extends Control {
+public class ListPageBase<T> extends Control implements TransitionPane.Cacheable {
     private final ListProperty<T> items = new SimpleListProperty<>(this, "items", FXCollections.observableArrayList());
     private final BooleanProperty loading = new SimpleBooleanProperty(this, "loading", false);
     private final StringProperty failedReason = new SimpleStringProperty(this, "failed");

HMCL/src/main/java/org/jackhuang/hmcl/ui/ListPageSkin.java

@@ -27,7 +27,6 @@ import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.construct.SpinnerPane;
 
 public class ListPageSkin extends SkinBase<ListPage<?>> {
@@ -67,7 +66,7 @@ public class ListPageSkin extends SkinBase<ListPage<?>> {
                 JFXButton btnAdd = FXUtils.newRaisedButton("");
                 FXUtils.setLimitWidth(btnAdd, 40);
                 FXUtils.setLimitHeight(btnAdd, 40);
-                btnAdd.setGraphic(SVG.ADD.createIcon(Theme.whiteFill(), -1));
+                btnAdd.setGraphic(SVG.ADD.createIcon());
                 btnAdd.setOnAction(e -> skinnable.add());
 
                 JFXButton btnRefresh = new JFXButton();
@@ -75,7 +74,7 @@ public class ListPageSkin extends SkinBase<ListPage<?>> {
                 FXUtils.setLimitHeight(btnRefresh, 40);
                 btnRefresh.getStyleClass().add("jfx-button-raised-round");
                 btnRefresh.setButtonType(JFXButton.ButtonType.RAISED);
-                btnRefresh.setGraphic(SVG.REFRESH.createIcon(Theme.whiteFill(), -1));
+                btnRefresh.setGraphic(SVG.REFRESH.createIcon());
                 btnRefresh.setOnAction(e -> skinnable.refresh());
 
                 vBox.getChildren().setAll(btnAdd);

HMCL/src/main/java/org/jackhuang/hmcl/ui/SVG.java

@@ -153,24 +153,25 @@ public enum SVG {
         return new Group(path);
     }
 
-    public Node createIcon(ObservableValue<? extends Paint> fill, double size) {
+    public Node createIcon(double size) {
         SVGPath p = new SVGPath();
-        p.getStyleClass().add("svg");
         p.setContent(path);
-        if (fill != null)
-            p.fillProperty().bind(fill);
-
+        p.getStyleClass().add("svg");
         return createIcon(p, size);
     }
 
-    public Node createIcon(Paint fill, double size) {
+    public Node createIcon() {
         SVGPath p = new SVGPath();
-        p.getStyleClass().add("svg");
         p.setContent(path);
-        if (fill != null)
-            p.fillProperty().set(fill);
-
-        return createIcon(p, size);
+        p.getStyleClass().add("svg");
+        return createIcon(p, -1);
     }
 
+    public Node createIcon(ObservableValue<? extends Paint> color) {
+        SVGPath p = new SVGPath();
+        p.setContent(path);
+        p.getStyleClass().add("svg");
+        p.fillProperty().bind(color);
+        return createIcon(p, -1);
+    }
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/ScrollUtils.java

@@ -52,8 +52,8 @@ final class ScrollUtils {
         }
     }
 
-    private ScrollUtils() {
-    }
+    private static final double DEFAULT_SPEED = 1.0;
+    private static final double DEFAULT_TRACK_PAD_ADJUSTMENT = 7.0;
 
     /**
      * Determines if the given ScrollEvent comes from a trackpad.
@@ -68,16 +68,10 @@ final class ScrollUtils {
      * @see ScrollEvent#getDeltaY()
      */
     public static boolean isTrackPad(ScrollEvent event, ScrollDirection scrollDirection) {
-        switch (scrollDirection) {
-            case UP:
-            case DOWN:
-                return Math.abs(event.getDeltaY()) < 10;
-            case LEFT:
-            case RIGHT:
-                return Math.abs(event.getDeltaX()) < 10;
-            default:
-                return false;
-        }
+        return switch (scrollDirection) {
+            case UP, DOWN -> Math.abs(event.getDeltaY()) < 10;
+            case LEFT, RIGHT -> Math.abs(event.getDeltaX()) < 10;
+        };
     }
 
     /**
@@ -117,7 +111,7 @@ final class ScrollUtils {
      * default speed value of 1.
      */
     public static void addSmoothScrolling(ScrollPane scrollPane) {
-        addSmoothScrolling(scrollPane, 1);
+        addSmoothScrolling(scrollPane, DEFAULT_SPEED);
     }
 
     /**
@@ -126,7 +120,7 @@ final class ScrollUtils {
      * with a default trackPadAdjustment of 7.
      */
     public static void addSmoothScrolling(ScrollPane scrollPane, double speed) {
-        addSmoothScrolling(scrollPane, speed, 7);
+        addSmoothScrolling(scrollPane, speed, DEFAULT_TRACK_PAD_ADJUSTMENT);
     }
 
     /**
@@ -143,12 +137,12 @@ final class ScrollUtils {
 
     /// @author Glavo
     public static void addSmoothScrolling(VirtualFlow<?> virtualFlow) {
-        addSmoothScrolling(virtualFlow, 1);
+        addSmoothScrolling(virtualFlow, DEFAULT_SPEED);
     }
 
     /// @author Glavo
     public static void addSmoothScrolling(VirtualFlow<?> virtualFlow, double speed) {
-        addSmoothScrolling(virtualFlow, speed, 7);
+        addSmoothScrolling(virtualFlow, speed, DEFAULT_TRACK_PAD_ADJUSTMENT);
     }
 
     /// @author Glavo
@@ -180,16 +174,16 @@ final class ScrollUtils {
             }
         };
         if (scrollPane.getContent().getParent() != null) {
-            scrollPane.getContent().getParent().addEventHandler(MouseEvent.MOUSE_PRESSED, mouseHandler);
+            scrollPane.getContent().getParent().addEventFilter(MouseEvent.MOUSE_PRESSED, mouseHandler);
             scrollPane.getContent().getParent().addEventHandler(ScrollEvent.ANY, scrollHandler);
         }
         scrollPane.getContent().parentProperty().addListener((observable, oldValue, newValue) -> {
             if (oldValue != null) {
-                oldValue.removeEventHandler(MouseEvent.MOUSE_PRESSED, mouseHandler);
+                oldValue.removeEventFilter(MouseEvent.MOUSE_PRESSED, mouseHandler);
                 oldValue.removeEventHandler(ScrollEvent.ANY, scrollHandler);
             }
             if (newValue != null) {
-                newValue.addEventHandler(MouseEvent.MOUSE_PRESSED, mouseHandler);
+                newValue.addEventFilter(MouseEvent.MOUSE_PRESSED, mouseHandler);
                 newValue.addEventHandler(ScrollEvent.ANY, scrollHandler);
             }
         });
@@ -250,7 +244,7 @@ final class ScrollUtils {
                 event.consume();
             }
         };
-        virtualFlow.addEventHandler(MouseEvent.MOUSE_PRESSED, mouseHandler);
+        virtualFlow.addEventFilter(MouseEvent.MOUSE_PRESSED, mouseHandler);
         virtualFlow.addEventFilter(ScrollEvent.ANY, scrollHandler);
 
         timeline.getKeyFrames().add(new KeyFrame(DURATION, event -> {
@@ -278,4 +272,7 @@ final class ScrollUtils {
         }));
         timeline.setCycleCount(Animation.INDEFINITE);
     }
+
+    private ScrollUtils() {
+    }
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/ToolbarListPageSkin.java

@@ -28,7 +28,6 @@ import javafx.scene.layout.HBox;
 import javafx.scene.layout.Priority;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.construct.ComponentList;
 import org.jackhuang.hmcl.ui.construct.SpinnerPane;
 
@@ -85,20 +84,10 @@ public abstract class ToolbarListPageSkin<T extends ListPageBase<? extends Node>
         return stackPane;
     }
 
-    public static JFXButton createToolbarButton(String text, SVG svg, Runnable onClick) {
-        JFXButton ret = new JFXButton();
-        ret.getStyleClass().add("jfx-tool-bar-button");
-        ret.textFillProperty().bind(Theme.foregroundFillBinding());
-        ret.setGraphic(wrap(svg.createIcon(Theme.foregroundFillBinding(), -1)));
-        ret.setText(text);
-        ret.setOnAction(e -> onClick.run());
-        return ret;
-    }
-
     public static JFXButton createToolbarButton2(String text, SVG svg, Runnable onClick) {
         JFXButton ret = new JFXButton();
         ret.getStyleClass().add("jfx-tool-bar-button");
-        ret.setGraphic(wrap(svg.createIcon(Theme.blackFill(), -1)));
+        ret.setGraphic(wrap(svg.createIcon()));
         ret.setText(text);
         ret.setOnAction(e -> {
             onClick.run();
@@ -110,8 +99,7 @@ public abstract class ToolbarListPageSkin<T extends ListPageBase<? extends Node>
     public static JFXButton createDecoratorButton(String tooltip, SVG svg, Runnable onClick) {
         JFXButton ret = new JFXButton();
         ret.getStyleClass().add("jfx-decorator-button");
-        ret.textFillProperty().bind(Theme.foregroundFillBinding());
-        ret.setGraphic(wrap(svg.createIcon(Theme.foregroundFillBinding(), -1)));
+        ret.setGraphic(wrap(svg.createIcon()));
         FXUtils.installFastTooltip(ret, tooltip);
         ret.setOnAction(e -> onClick.run());
         return ret;

HMCL/src/main/java/org/jackhuang/hmcl/ui/account/AccountListItemSkin.java

@@ -36,7 +36,6 @@ import org.jackhuang.hmcl.auth.authlibinjector.AuthlibInjectorServer;
 import org.jackhuang.hmcl.auth.microsoft.MicrosoftAccount;
 import org.jackhuang.hmcl.game.TexturesLoader;
 import org.jackhuang.hmcl.setting.Accounts;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.Controllers;
@@ -117,10 +116,10 @@ public final class AccountListItemSkin extends SkinBase<AccountListItem> {
         });
         btnMove.getStyleClass().add("toggle-icon4");
         if (skinnable.getAccount().isPortable()) {
-            btnMove.setGraphic(SVG.PUBLIC.createIcon(Theme.blackFill(), -1));
+            btnMove.setGraphic(SVG.PUBLIC.createIcon());
             FXUtils.installFastTooltip(btnMove, i18n("account.move_to_global"));
         } else {
-            btnMove.setGraphic(SVG.OUTPUT.createIcon(Theme.blackFill(), -1));
+            btnMove.setGraphic(SVG.OUTPUT.createIcon());
             FXUtils.installFastTooltip(btnMove, i18n("account.move_to_portable"));
         }
         spinnerMove.setContent(btnMove);
@@ -146,7 +145,7 @@ public final class AccountListItemSkin extends SkinBase<AccountListItem> {
                     .start();
         });
         btnRefresh.getStyleClass().add("toggle-icon4");
-        btnRefresh.setGraphic(SVG.REFRESH.createIcon(Theme.blackFill(), -1));
+        btnRefresh.setGraphic(SVG.REFRESH.createIcon());
         FXUtils.installFastTooltip(btnRefresh, i18n("button.refresh"));
         spinnerRefresh.setContent(btnRefresh);
         right.getChildren().add(spinnerRefresh);
@@ -163,7 +162,7 @@ public final class AccountListItemSkin extends SkinBase<AccountListItem> {
             }
         });
         btnUpload.getStyleClass().add("toggle-icon4");
-        btnUpload.setGraphic(SVG.CHECKROOM.createIcon(Theme.blackFill(), -1));
+        btnUpload.setGraphic(SVG.CHECKROOM.createIcon());
         FXUtils.installFastTooltip(btnUpload, i18n("account.skin.upload"));
         btnUpload.disableProperty().bind(Bindings.not(skinnable.canUploadSkin()));
         spinnerUpload.setContent(btnUpload);
@@ -175,7 +174,7 @@ public final class AccountListItemSkin extends SkinBase<AccountListItem> {
         spinnerCopyUUID.getStyleClass().add("small-spinner-pane");
         btnUpload.getStyleClass().add("toggle-icon4");
         btnCopyUUID.setOnAction(e -> FXUtils.copyText(skinnable.getAccount().getUUID().toString()));
-        btnCopyUUID.setGraphic(SVG.CONTENT_COPY.createIcon(Theme.blackFill(), -1));
+        btnCopyUUID.setGraphic(SVG.CONTENT_COPY.createIcon());
         FXUtils.installFastTooltip(btnCopyUUID, i18n("account.copy_uuid"));
         spinnerCopyUUID.setContent(btnCopyUUID);
         right.getChildren().add(spinnerCopyUUID);
@@ -184,7 +183,7 @@ public final class AccountListItemSkin extends SkinBase<AccountListItem> {
         btnRemove.setOnAction(e -> Controllers.confirm(i18n("button.remove.confirm"), i18n("button.remove"), skinnable::remove, null));
         btnRemove.getStyleClass().add("toggle-icon4");
         BorderPane.setAlignment(btnRemove, Pos.CENTER);
-        btnRemove.setGraphic(SVG.DELETE.createIcon(Theme.blackFill(), -1));
+        btnRemove.setGraphic(SVG.DELETE.createIcon());
         FXUtils.installFastTooltip(btnRemove, i18n("button.delete"));
         right.getChildren().add(btnRemove);
         root.setRight(right);

HMCL/src/main/java/org/jackhuang/hmcl/ui/account/AccountListPage.java

@@ -39,7 +39,6 @@ import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.auth.Account;
 import org.jackhuang.hmcl.auth.authlibinjector.AuthlibInjectorServer;
 import org.jackhuang.hmcl.setting.Accounts;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
@@ -158,7 +157,7 @@ public final class AccountListPage extends DecoratorAnimatedPage implements Deco
                             e.consume();
                         });
                         btnRemove.getStyleClass().add("toggle-icon4");
-                        btnRemove.setGraphic(SVG.CLOSE.createIcon(Theme.blackFill(), 14));
+                        btnRemove.setGraphic(SVG.CLOSE.createIcon(14));
                         item.setRightGraphic(btnRemove);
 
                         ObservableValue<String> title = BindingMapping.of(server, AuthlibInjectorServer::getName);

HMCL/src/main/java/org/jackhuang/hmcl/ui/account/CreateAccountPane.java

@@ -50,7 +50,6 @@ import org.jackhuang.hmcl.auth.yggdrasil.YggdrasilService;
 import org.jackhuang.hmcl.game.OAuthServer;
 import org.jackhuang.hmcl.game.TexturesLoader;
 import org.jackhuang.hmcl.setting.Accounts;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.task.TaskExecutor;
@@ -465,7 +464,7 @@ public class CreateAccountPane extends JFXDialogLayout implements DialogAware {
                 linksContainer.setMinWidth(USE_PREF_SIZE);
 
                 JFXButton btnAddServer = new JFXButton();
-                btnAddServer.setGraphic(SVG.ADD.createIcon(Theme.blackFill(), 20));
+                btnAddServer.setGraphic(SVG.ADD.createIcon(20));
                 btnAddServer.getStyleClass().add("toggle-icon4");
                 btnAddServer.setOnAction(e -> {
                     Controllers.dialog(new AddAuthlibInjectorServerPane());

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/AdvancedListBox.java

@@ -26,7 +26,6 @@ import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
-import javafx.scene.paint.Paint;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
@@ -109,8 +108,8 @@ public class AdvancedListBox extends ScrollPane {
         item.activeProperty().bind(tabHeader.getSelectionModel().selectedItemProperty().isEqualTo(tab));
         item.setOnAction(e -> tabHeader.select(tab));
 
-        Node unselectedIcon = unselectedGraphic.createIcon((Paint) null, 20);
-        Node selectedIcon = selectedGraphic.createIcon((Paint) null, 20);
+        Node unselectedIcon = unselectedGraphic.createIcon(20);
+        Node selectedIcon = selectedGraphic.createIcon(20);
 
         TransitionPane leftGraphic = new TransitionPane();
         leftGraphic.setAlignment(Pos.CENTER);

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/ClassTitle.java

@@ -21,7 +21,6 @@ import javafx.scene.Node;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
-import javafx.scene.paint.Color;
 import javafx.scene.shape.Rectangle;
 import javafx.scene.text.Text;
 import org.jackhuang.hmcl.util.Lang;
@@ -44,7 +43,6 @@ public class ClassTitle extends StackPane {
         Rectangle rectangle = new Rectangle();
         rectangle.widthProperty().bind(vbox.widthProperty());
         rectangle.setHeight(1.0);
-        rectangle.setFill(Color.GRAY);
         vbox.getChildren().add(rectangle);
         getChildren().setAll(vbox);
         getStyleClass().add("class-title");

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/ComponentListCell.java

@@ -30,7 +30,7 @@ import javafx.scene.input.MouseEvent;
 import javafx.scene.layout.*;
 import javafx.scene.shape.Rectangle;
 import javafx.util.Duration;
-import org.jackhuang.hmcl.setting.Theme;
+import org.jackhuang.hmcl.theme.Themes;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.animation.AnimationUtils;
@@ -79,7 +79,7 @@ final class ComponentListCell extends StackPane {
 
             VBox groupNode = new VBox();
 
-            Node expandIcon = SVG.KEYBOARD_ARROW_DOWN.createIcon(Theme.blackFill(), 20);
+            Node expandIcon = SVG.KEYBOARD_ARROW_DOWN.createIcon(20);
             expandIcon.setMouseTransparent(true);
             HBox.setMargin(expandIcon, new Insets(0, 8, 0, 8));
 
@@ -99,12 +99,14 @@ final class ComponentListCell extends StackPane {
             if (!overrideHeaderLeft) {
                 Label label = new Label();
                 label.textProperty().bind(list.titleProperty());
+                label.getStyleClass().add("title-label");
                 labelVBox.getChildren().add(label);
 
                 if (list.isHasSubtitle()) {
                     Label subtitleLabel = new Label();
                     subtitleLabel.textProperty().bind(list.subtitleProperty());
                     subtitleLabel.getStyleClass().add("subtitle-label");
+                    subtitleLabel.textFillProperty().bind(Themes.colorSchemeProperty().getOnSurfaceVariant());
                     labelVBox.getChildren().add(subtitleLabel);
                 }
             }

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/FileItem.java

@@ -28,7 +28,6 @@ import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.VBox;
 import javafx.stage.DirectoryChooser;
 import org.jackhuang.hmcl.Metadata;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
@@ -60,7 +59,7 @@ public class FileItem extends BorderPane {
         setLeft(left);
 
         JFXButton right = new JFXButton();
-        right.setGraphic(SVG.EDIT.createIcon(Theme.blackFill(), 16));
+        right.setGraphic(SVG.EDIT.createIcon(16));
         right.getStyleClass().add("toggle-icon4");
         right.setOnAction(e -> onExplore());
         FXUtils.installFastTooltip(right, i18n("button.edit"));

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/FileSelector.java

@@ -27,7 +27,6 @@ import javafx.geometry.Pos;
 import javafx.scene.layout.HBox;
 import javafx.stage.DirectoryChooser;
 import javafx.stage.FileChooser;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
@@ -82,7 +81,7 @@ public class FileSelector extends HBox {
         FXUtils.bindString(customField, valueProperty());
 
         JFXButton selectButton = new JFXButton();
-        selectButton.setGraphic(SVG.FOLDER_OPEN.createIcon(Theme.blackFill(), 15));
+        selectButton.setGraphic(SVG.FOLDER_OPEN.createIcon(15));
         selectButton.setOnAction(e -> {
             if (directory) {
                 DirectoryChooser chooser = new DirectoryChooser();

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/FloatScrollBarSkin.java

@@ -28,6 +28,8 @@ import javafx.scene.layout.Region;
 import javafx.scene.shape.Rectangle;
 import org.jackhuang.hmcl.util.Lang;
 
+// Referenced in root.css
+@SuppressWarnings("unused")
 public class FloatScrollBarSkin implements Skin<ScrollBar> {
     private ScrollBar scrollBar;
     private Region group;

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/HintPane.java

@@ -26,7 +26,6 @@ import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
 import javafx.scene.text.Text;
 import javafx.scene.text.TextFlow;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
@@ -67,7 +66,7 @@ public class HintPane extends VBox {
                 throw new IllegalArgumentException("Unrecognized message box message type " + type);
         }
 
-        HBox hbox = new HBox(svg.createIcon(Theme.blackFill(), 16), new Text(type.getDisplayName()));
+        HBox hbox = new HBox(svg.createIcon(16), new Text(type.getDisplayName()));
         hbox.setAlignment(Pos.CENTER_LEFT);
         flow.getChildren().setAll(label);
         getChildren().setAll(hbox, flow);

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedMenuItem.java

@@ -18,14 +18,13 @@
 package org.jackhuang.hmcl.ui.construct;
 
 import com.jfoenix.controls.JFXPopup;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 
-public class IconedMenuItem extends IconedItem {
+public final class IconedMenuItem extends IconedItem {
 
     public IconedMenuItem(SVG icon, String text, Runnable action, JFXPopup popup) {
-        super(icon != null ? FXUtils.limitingSize(icon.createIcon(Theme.blackFill(), 14), 14, 14) : null, text);
+        super(icon != null ? icon.createIcon(14) : null, text);
 
         getStyleClass().setAll("iconed-menu-item");
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/IconedTwoLineListItem.java

@@ -15,7 +15,6 @@ import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Priority;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.util.StringUtils;
@@ -111,7 +110,7 @@ public class IconedTwoLineListItem extends HBox {
         if (externalLinkButton == null) {
             externalLinkButton = new JFXButton();
             externalLinkButton.getStyleClass().add("toggle-icon4");
-            externalLinkButton.setGraphic(SVG.OPEN_IN_NEW.createIcon(Theme.blackFill(), -1));
+            externalLinkButton.setGraphic(SVG.OPEN_IN_NEW.createIcon());
             externalLinkButton.setOnAction(e -> FXUtils.openLink(externalLink.get()));
         }
         return externalLinkButton;

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/ImagePickerItem.java

@@ -32,7 +32,6 @@ import javafx.scene.image.ImageView;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 
@@ -54,12 +53,12 @@ public final class ImagePickerItem extends BorderPane {
         imageView.setPreserveRatio(true);
 
         JFXButton selectButton = new JFXButton();
-        selectButton.setGraphic(SVG.EDIT.createIcon(Theme.blackFill(), 20));
+        selectButton.setGraphic(SVG.EDIT.createIcon(20));
         selectButton.onActionProperty().bind(onSelectButtonClicked);
         selectButton.getStyleClass().add("toggle-icon4");
 
         JFXButton deleteButton = new JFXButton();
-        deleteButton.setGraphic(SVG.CLOSE.createIcon(Theme.blackFill(), 20));
+        deleteButton.setGraphic(SVG.CLOSE.createIcon(20));
         deleteButton.onActionProperty().bind(onDeleteButtonClicked);
         deleteButton.getStyleClass().add("toggle-icon4");
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/JFXHyperlink.java

@@ -18,7 +18,6 @@
 package org.jackhuang.hmcl.ui.construct;
 
 import javafx.scene.control.Hyperlink;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 
@@ -27,7 +26,7 @@ public final class JFXHyperlink extends Hyperlink {
     public JFXHyperlink(String text) {
         super(text);
 
-        setGraphic(SVG.OPEN_IN_NEW.createIcon(Theme.blackFill(), 16));
+        setGraphic(SVG.OPEN_IN_NEW.createIcon(16));
     }
 
     public void setExternalLink(String externalLink) {

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/MenuUpDownButton.java

@@ -29,7 +29,6 @@ import javafx.scene.control.Label;
 import javafx.scene.control.Skin;
 import javafx.scene.control.SkinBase;
 import javafx.scene.layout.HBox;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 
@@ -39,6 +38,7 @@ public class MenuUpDownButton extends Control {
     private final StringProperty text = new SimpleStringProperty(this, "text");
 
     public MenuUpDownButton() {
+        this.getStyleClass().add("menu-up-down-button");
     }
 
     @Override
@@ -78,11 +78,10 @@ public class MenuUpDownButton extends Control {
             HBox content = new HBox(8);
             content.setAlignment(Pos.CENTER);
             Label label = new Label();
-            label.setStyle("-fx-text-fill: black;");
             label.textProperty().bind(control.text);
 
-            Node up = SVG.ARROW_DROP_UP.createIcon(Theme.blackFill(), 16);
-            Node down = SVG.ARROW_DROP_DOWN.createIcon(Theme.blackFill(), 16);
+            Node up = SVG.ARROW_DROP_UP.createIcon(16);
+            Node down = SVG.ARROW_DROP_DOWN.createIcon(16);
 
             JFXButton button = new JFXButton();
             button.setGraphic(content);

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/MessageDialogPane.java

@@ -28,7 +28,6 @@ import javafx.scene.layout.Priority;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import javafx.scene.text.TextFlow;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
@@ -91,7 +90,7 @@ public final class MessageDialogPane extends HBox {
             default:
                 throw new IllegalArgumentException("Unrecognized message box message type " + type);
         }
-        graphic.setGraphic(svg.createIcon(Theme.blackFill(), 40));
+        graphic.setGraphic(svg.createIcon(40));
 
         VBox vbox = new VBox();
         HBox.setHgrow(vbox, Priority.ALWAYS);

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/MultiFileItem.java

@@ -17,6 +17,7 @@
  */
 package org.jackhuang.hmcl.ui.construct;
 
+import com.jfoenix.controls.JFXColorPicker;
 import com.jfoenix.controls.JFXRadioButton;
 import com.jfoenix.controls.JFXTextField;
 import com.jfoenix.validation.base.ValidatorBase;
@@ -30,12 +31,15 @@ import javafx.scene.control.Toggle;
 import javafx.scene.control.ToggleGroup;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.VBox;
+import javafx.scene.paint.Color;
 import javafx.scene.paint.Paint;
 import javafx.stage.FileChooser;
+import org.jackhuang.hmcl.theme.ThemeColor;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.util.StringUtils;
 
 import java.util.Collection;
+import java.util.List;
 import java.util.Objects;
 import java.util.Optional;
 import java.util.function.Consumer;
@@ -301,17 +305,27 @@ public final class MultiFileItem<T> extends VBox {
     }
 
     public static final class PaintOption<T> extends Option<T> {
-        private final ColorPicker colorPicker = new ColorPicker();
+        private final ColorPicker colorPicker = new JFXColorPicker();
 
         public PaintOption(String title, T data) {
             super(title, data);
         }
 
+        public PaintOption<T> setCustomColors(List<Color> colors) {
+            colorPicker.getCustomColors().setAll(colors);
+            return this;
+        }
+
         public PaintOption<T> bindBidirectional(Property<Paint> property) {
             FXUtils.bindPaint(colorPicker, property);
             return this;
         }
 
+        public PaintOption<T> bindThemeColorBidirectional(Property<ThemeColor> property) {
+            ThemeColor.bindBidirectional(colorPicker, property);
+            return this;
+        }
+
         @Override
         protected Node createItem(ToggleGroup group) {
             BorderPane pane = new BorderPane();

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/RipplerContainer.java

@@ -38,6 +38,7 @@ import javafx.scene.paint.Color;
 import javafx.scene.paint.Paint;
 import javafx.scene.shape.Rectangle;
 import javafx.util.Duration;
+import org.jackhuang.hmcl.theme.Themes;
 import org.jackhuang.hmcl.ui.animation.AnimationUtils;
 import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.util.Lang;
@@ -50,7 +51,7 @@ public class RipplerContainer extends StackPane {
     private static final Duration DURATION = Duration.millis(200);
 
     private final ObjectProperty<Node> container = new SimpleObjectProperty<>(this, "container", null);
-    private final StyleableObjectProperty<Paint> ripplerFill = new SimpleStyleableObjectProperty<>(StyleableProperties.RIPPLER_FILL,this, "ripplerFill", null);
+    private final StyleableObjectProperty<Paint> ripplerFill = new SimpleStyleableObjectProperty<>(StyleableProperties.RIPPLER_FILL, this, "ripplerFill", null);
     private final BooleanProperty selected = new SimpleBooleanProperty(this, "selected", false);
 
     private final StackPane buttonContainer = new StackPane();
@@ -136,7 +137,10 @@ public class RipplerContainer extends StackPane {
     }
 
     private void interpolateBackground(double frac) {
-        setBackground(new Background(new BackgroundFill(Color.rgb(0, 0, 0, frac * 0.04), CornerRadii.EMPTY, Insets.EMPTY)));
+        Color onSurface = Themes.getColorScheme().getOnSurface();
+        setBackground(new Background(new BackgroundFill(
+                Color.color(onSurface.getRed(), onSurface.getGreen(), onSurface.getBlue(), frac * 0.04),
+                CornerRadii.EMPTY, Insets.EMPTY)));
     }
 
     protected void updateChildren() {

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TaskExecutorDialogPane.java

@@ -50,6 +50,8 @@ public class TaskExecutorDialogPane extends BorderPane {
     private final TaskListPane taskListPane;
 
     public TaskExecutorDialogPane(@NotNull TaskCancellationAction cancel) {
+        this.getStyleClass().add("task-executor-dialog-layout");
+
         FXUtils.setLimitWidth(this, 500);
         FXUtils.setLimitHeight(this, 300);
 
@@ -74,6 +76,7 @@ public class TaskExecutorDialogPane extends BorderPane {
             bottom.setLeft(lblProgress);
 
             btnCancel = new JFXButton(i18n("button.cancel"));
+            btnCancel.getStyleClass().add("dialog-cancel");
             bottom.setRight(btnCancel);
         }
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/TaskListPane.java

@@ -64,7 +64,6 @@ import org.jackhuang.hmcl.mod.multimc.MultiMCModpackInstallTask;
 import org.jackhuang.hmcl.mod.server.ServerModpackCompletionTask;
 import org.jackhuang.hmcl.mod.server.ServerModpackExportTask;
 import org.jackhuang.hmcl.mod.server.ServerModpackLocalInstallTask;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.task.TaskExecutor;
 import org.jackhuang.hmcl.task.TaskListener;
@@ -310,7 +309,7 @@ public final class TaskListPane extends StackPane {
         }
 
         private void updateLeftIcon(StageNode.Status status) {
-            left.getChildren().setAll(status.svg.createIcon(Theme.blackFill(), STATUS_ICON_SIZE));
+            left.getChildren().setAll(status.svg.createIcon(STATUS_ICON_SIZE));
         }
 
         @Override

HMCL/src/main/java/org/jackhuang/hmcl/ui/decorator/DecoratorSkin.java

@@ -45,7 +45,7 @@ import javafx.stage.Stage;
 
 import javafx.util.Duration;
 import org.jackhuang.hmcl.Metadata;
-import org.jackhuang.hmcl.setting.Theme;
+import org.jackhuang.hmcl.theme.Themes;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
@@ -233,19 +233,19 @@ public class DecoratorSkin extends SkinBase<Decorator> {
             {
                 JFXButton btnHelp = new JFXButton();
                 btnHelp.setFocusTraversable(false);
-                btnHelp.setGraphic(SVG.HELP.createIcon(Theme.foregroundFillBinding(), -1));
+                btnHelp.setGraphic(SVG.HELP.createIcon(Themes.titleFillProperty()));
                 btnHelp.getStyleClass().add("jfx-decorator-button");
                 btnHelp.setOnAction(e -> FXUtils.openLink(Metadata.CONTACT_URL));
 
                 JFXButton btnMin = new JFXButton();
                 btnMin.setFocusTraversable(false);
-                btnMin.setGraphic(SVG.MINIMIZE.createIcon(Theme.foregroundFillBinding(), -1));
+                btnMin.setGraphic(SVG.MINIMIZE.createIcon(Themes.titleFillProperty()));
                 btnMin.getStyleClass().add("jfx-decorator-button");
                 btnMin.setOnAction(e -> skinnable.minimize());
 
                 JFXButton btnClose = new JFXButton();
                 btnClose.setFocusTraversable(false);
-                btnClose.setGraphic(SVG.CLOSE.createIcon(Theme.foregroundFillBinding(), -1));
+                btnClose.setGraphic(SVG.CLOSE.createIcon(Themes.titleFillProperty()));
                 btnClose.getStyleClass().add("jfx-decorator-button");
                 btnClose.setOnAction(e -> skinnable.close());
 
@@ -265,6 +265,8 @@ public class DecoratorSkin extends SkinBase<Decorator> {
 
     private Node createNavBar(Decorator skinnable, double leftPaneWidth, boolean canBack, boolean canClose, boolean showCloseAsHome, boolean canRefresh, String title, Node titleNode) {
         BorderPane navBar = new BorderPane();
+        navBar.getStyleClass().add("navigation-bar");
+
         {
             HBox navLeft = new HBox();
             navLeft.setAlignment(Pos.CENTER_LEFT);
@@ -273,9 +275,8 @@ public class DecoratorSkin extends SkinBase<Decorator> {
             if (canBack) {
                 JFXButton backNavButton = new JFXButton();
                 backNavButton.setFocusTraversable(false);
-                backNavButton.setGraphic(SVG.ARROW_BACK.createIcon(Theme.foregroundFillBinding(), -1));
+                backNavButton.setGraphic(SVG.ARROW_BACK.createIcon(Themes.titleFillProperty()));
                 backNavButton.getStyleClass().add("jfx-decorator-button");
-                backNavButton.ripplerFillProperty().set(Theme.whiteFill());
                 backNavButton.onActionProperty().bind(skinnable.onBackNavButtonActionProperty());
                 backNavButton.visibleProperty().set(canBack);
 
@@ -285,14 +286,13 @@ public class DecoratorSkin extends SkinBase<Decorator> {
             if (canClose) {
                 JFXButton closeNavButton = new JFXButton();
                 closeNavButton.setFocusTraversable(false);
-                closeNavButton.setGraphic(SVG.CLOSE.createIcon(Theme.foregroundFillBinding(), -1));
+                closeNavButton.setGraphic(SVG.CLOSE.createIcon(Themes.titleFillProperty()));
                 closeNavButton.getStyleClass().add("jfx-decorator-button");
-                closeNavButton.ripplerFillProperty().set(Theme.whiteFill());
                 closeNavButton.onActionProperty().bind(skinnable.onCloseNavButtonActionProperty());
                 if (showCloseAsHome)
-                    closeNavButton.setGraphic(SVG.HOME.createIcon(Theme.foregroundFillBinding(), -1));
+                    closeNavButton.setGraphic(SVG.HOME.createIcon(Themes.titleFillProperty()));
                 else
-                    closeNavButton.setGraphic(SVG.CLOSE.createIcon(Theme.foregroundFillBinding(), -1));
+                    closeNavButton.setGraphic(SVG.CLOSE.createIcon(Themes.titleFillProperty()));
 
                 navLeft.getChildren().add(closeNavButton);
             }
@@ -333,9 +333,8 @@ public class DecoratorSkin extends SkinBase<Decorator> {
                 HBox navRight = new HBox();
                 navRight.setAlignment(Pos.CENTER_RIGHT);
                 JFXButton refreshNavButton = new JFXButton();
-                refreshNavButton.setGraphic(SVG.REFRESH.createIcon(Theme.foregroundFillBinding(), -1));
+                refreshNavButton.setGraphic(SVG.REFRESH.createIcon(Themes.titleFillProperty()));
                 refreshNavButton.getStyleClass().add("jfx-decorator-button");
-                refreshNavButton.ripplerFillProperty().set(Theme.whiteFill());
                 refreshNavButton.onActionProperty().bind(skinnable.onRefreshNavButtonActionProperty());
 
                 Rectangle separator = new Rectangle();

HMCL/src/main/java/org/jackhuang/hmcl/ui/download/VersionsPage.java

@@ -233,7 +233,7 @@ public final class VersionsPage extends Control implements WizardPage, Refreshab
             }
             setGraphic(pane);
 
-            twoLineListItem.setTitle(I18n.getDisplayVersion(remoteVersion));
+            twoLineListItem.setTitle(I18n.getDisplaySelfVersion(remoteVersion));
             if (remoteVersion.getReleaseDate() != null) {
                 twoLineListItem.setSubtitle(I18n.formatDateTime(remoteVersion.getReleaseDate()));
             } else {

HMCL/src/main/java/org/jackhuang/hmcl/ui/export/ExportWizardProvider.java

@@ -126,7 +126,7 @@ public final class ExportWizardProvider implements WizardProvider {
 
                     exported.setBackgroundImageType(config().getBackgroundImageType());
                     exported.setBackgroundImage(config().getBackgroundImage());
-                    exported.setTheme(config().getTheme());
+                    exported.setThemeColor(config().getThemeColor());
                     exported.setDownloadType(config().getDownloadType());
                     exported.setPreferredLoginType(config().getPreferredLoginType());
                     exported.getAuthlibInjectorServers().setAll(config().getAuthlibInjectorServers());

HMCL/src/main/java/org/jackhuang/hmcl/ui/export/ModpackInfoPage.java

@@ -45,6 +45,7 @@ import org.jackhuang.hmcl.util.SettingsMap;
 import org.jackhuang.hmcl.util.StringUtils;
 import org.jackhuang.hmcl.util.io.FileUtils;
 import org.jackhuang.hmcl.util.io.JarUtils;
+import org.jackhuang.hmcl.util.platform.OperatingSystem;
 import org.jackhuang.hmcl.util.platform.SystemInfo;
 
 import java.nio.file.Path;
@@ -108,9 +109,9 @@ public final class ModpackInfoPage extends Control implements WizardPage {
     private void onNext() {
         FileChooser fileChooser = new FileChooser();
         fileChooser.setTitle(i18n("modpack.wizard.step.initialization.save"));
-        if (controller.getSettings().get(MODPACK_TYPE) == ModpackTypeSelectionPage.MODPACK_TYPE_MODRINTH) {
+        if (controller.getSettings().get(MODPACK_TYPE) == MODPACK_TYPE_MODRINTH) {
             fileChooser.getExtensionFilters().add(new FileChooser.ExtensionFilter(i18n("modpack"), "*.mrpack"));
-            fileChooser.setInitialFileName(name.get() + ".mrpack");
+            fileChooser.setInitialFileName(name.get() + (OperatingSystem.CURRENT_OS == OperatingSystem.MACOS ? "" : ".mrpack"));
         } else {
             fileChooser.getExtensionFilters().add(new FileChooser.ExtensionFilter(i18n("modpack"), "*.zip"));
             fileChooser.setInitialFileName(name.get() + ".zip");

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/AboutPage.java

@@ -21,12 +21,14 @@ import com.google.gson.JsonArray;
 import com.google.gson.JsonElement;
 import com.google.gson.JsonObject;
 import com.google.gson.JsonParseException;
+import javafx.beans.binding.Bindings;
 import javafx.geometry.Insets;
 import javafx.scene.control.ScrollPane;
 import javafx.scene.image.Image;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.Metadata;
+import org.jackhuang.hmcl.theme.Themes;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.construct.ComponentList;
 import org.jackhuang.hmcl.ui.construct.IconedTwoLineListItem;
@@ -105,6 +107,12 @@ public final class AboutPage extends StackPane {
         getChildren().setAll(scrollPane);
     }
 
+    private static Image loadImage(String url) {
+        return url.startsWith("/")
+                ? FXUtils.newBuiltinImage(url)
+                : new Image(url);
+    }
+
     private static ComponentList loadIconedTwoLineList(String path) {
         ComponentList componentList = new ComponentList();
 
@@ -122,10 +130,14 @@ public final class AboutPage extends StackPane {
                 IconedTwoLineListItem item = new IconedTwoLineListItem();
 
                 if (obj.has("image")) {
-                    String image = obj.get("image").getAsString();
-                    item.setImage(image.startsWith("/")
-                            ? FXUtils.newBuiltinImage(image)
-                            : new Image(image));
+                    JsonElement image = obj.get("image");
+                    if (image.isJsonPrimitive()) {
+                        item.setImage(loadImage(image.getAsString()));
+                    } else if (image.isJsonObject()) {
+                        item.imageProperty().bind(Bindings.when(Themes.darkModeProperty())
+                                .then(loadImage(image.getAsJsonObject().get("dark").getAsString()))
+                                .otherwise(loadImage(image.getAsJsonObject().get("light").getAsString())));
+                    }
                 }
 
                 if (obj.has("title"))

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/DownloadSettingsPage.java

@@ -78,7 +78,7 @@ public class DownloadSettingsPage extends StackPane {
                     versionListSourcePane.setRight(cboVersionListSource);
                     FXUtils.setLimitWidth(cboVersionListSource, 400);
 
-                    cboVersionListSource.getItems().setAll(DownloadProviders.providersById.keySet());
+                    cboVersionListSource.getItems().setAll(DownloadProviders.AUTO_PROVIDERS.keySet());
                     selectedItemPropertyFor(cboVersionListSource).bindBidirectional(config().versionListSourceProperty());
                 }
 
@@ -95,7 +95,7 @@ public class DownloadSettingsPage extends StackPane {
                     downloadSourcePane.setRight(cboDownloadSource);
                     FXUtils.setLimitWidth(cboDownloadSource, 420);
 
-                    cboDownloadSource.getItems().setAll(DownloadProviders.rawProviders.keySet());
+                    cboDownloadSource.getItems().setAll(DownloadProviders.DIRECT_PROVIDERS.keySet());
                     selectedItemPropertyFor(cboDownloadSource).bindBidirectional(config().downloadTypeProperty());
                 }
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/FeedbackPage.java

@@ -17,9 +17,11 @@
  */
 package org.jackhuang.hmcl.ui.main;
 
+import javafx.beans.binding.Bindings;
 import javafx.geometry.Insets;
 import javafx.scene.control.ScrollPane;
 import javafx.scene.layout.VBox;
+import org.jackhuang.hmcl.theme.Themes;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.construct.ComponentList;
 import org.jackhuang.hmcl.ui.construct.IconedTwoLineListItem;
@@ -50,7 +52,9 @@ public class FeedbackPage extends SpinnerPane {
             users.setExternalLink(Metadata.GROUPS_URL);
 
             IconedTwoLineListItem github = new IconedTwoLineListItem();
-            github.setImage(FXUtils.newBuiltinImage("/assets/img/github.png"));
+            github.imageProperty().bind(Bindings.when(Themes.darkModeProperty())
+                    .then(FXUtils.newBuiltinImage("/assets/img/github-white.png"))
+                    .otherwise(FXUtils.newBuiltinImage("/assets/img/github.png")));
             github.setTitle(i18n("feedback.github"));
             github.setSubtitle(i18n("feedback.github.statement"));
             github.setExternalLink("https://github.com/HMCL-dev/HMCL/issues/new/choose");

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/JavaManagementPage.java

@@ -35,7 +35,6 @@ import org.jackhuang.hmcl.java.JavaManager;
 import org.jackhuang.hmcl.java.JavaRuntime;
 import org.jackhuang.hmcl.setting.ConfigHolder;
 import org.jackhuang.hmcl.setting.DownloadProviders;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.*;
@@ -263,7 +262,7 @@ public final class JavaManagementPage extends ListPageBase<JavaManagementPage.Ja
             {
                 JFXButton revealButton = new JFXButton();
                 revealButton.getStyleClass().add("toggle-icon4");
-                revealButton.setGraphic(FXUtils.limitingSize(SVG.FOLDER_OPEN.createIcon(Theme.blackFill(), 24), 24, 24));
+                revealButton.setGraphic(FXUtils.limitingSize(SVG.FOLDER_OPEN.createIcon(24), 24, 24));
                 revealButton.setOnAction(e -> control.onReveal());
                 FXUtils.installFastTooltip(revealButton, i18n("reveal.in_file_manager"));
 
@@ -276,12 +275,12 @@ public final class JavaManagementPage extends ListPageBase<JavaManagementPage.Ja
                         null
                 ));
                 if (java.isManaged()) {
-                    removeButton.setGraphic(FXUtils.limitingSize(SVG.DELETE_FOREVER.createIcon(Theme.blackFill(), 24), 24, 24));
+                    removeButton.setGraphic(FXUtils.limitingSize(SVG.DELETE_FOREVER.createIcon(24), 24, 24));
                     FXUtils.installFastTooltip(removeButton, i18n("java.uninstall"));
                     if (JavaRuntime.CURRENT_JAVA != null && java.getBinary().equals(JavaRuntime.CURRENT_JAVA.getBinary()))
                         removeButton.setDisable(true);
                 } else {
-                    removeButton.setGraphic(FXUtils.limitingSize(SVG.DELETE.createIcon(Theme.blackFill(), 24), 24, 24));
+                    removeButton.setGraphic(FXUtils.limitingSize(SVG.DELETE.createIcon(24), 24, 24));
                     FXUtils.installFastTooltip(removeButton, i18n("java.disable"));
                 }
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/JavaRestorePage.java

@@ -32,7 +32,6 @@ import javafx.scene.control.*;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
 import org.jackhuang.hmcl.java.JavaManager;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.ui.*;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane;
@@ -160,7 +159,7 @@ public final class JavaRestorePage extends ListPageBase<JavaRestorePage.Disabled
             {
                 JFXButton revealButton = new JFXButton();
                 revealButton.getStyleClass().add("toggle-icon4");
-                revealButton.setGraphic(FXUtils.limitingSize(SVG.FOLDER_OPEN.createIcon(Theme.blackFill(), 24), 24, 24));
+                revealButton.setGraphic(FXUtils.limitingSize(SVG.FOLDER_OPEN.createIcon(24), 24, 24));
                 revealButton.setOnAction(e -> skinnable.onReveal());
                 FXUtils.installFastTooltip(revealButton, i18n("reveal.in_file_manager"));
 
@@ -169,7 +168,7 @@ public final class JavaRestorePage extends ListPageBase<JavaRestorePage.Disabled
 
                     JFXButton removeButton = new JFXButton();
                     removeButton.getStyleClass().add("toggle-icon4");
-                    removeButton.setGraphic(FXUtils.limitingSize(SVG.DELETE.createIcon(Theme.blackFill(), 24), 24, 24));
+                    removeButton.setGraphic(FXUtils.limitingSize(SVG.DELETE.createIcon(24), 24, 24));
                     removeButton.setOnAction(e -> skinnable.onRemove());
                     FXUtils.installFastTooltip(removeButton, i18n("java.disabled.management.remove"));
 
@@ -177,7 +176,7 @@ public final class JavaRestorePage extends ListPageBase<JavaRestorePage.Disabled
                 } else {
                     JFXButton restoreButton = new JFXButton();
                     restoreButton.getStyleClass().add("toggle-icon4");
-                    restoreButton.setGraphic(FXUtils.limitingSize(SVG.RESTORE.createIcon(Theme.blackFill(), 24), 24, 24));
+                    restoreButton.setGraphic(FXUtils.limitingSize(SVG.RESTORE.createIcon(24), 24, 24));
                     restoreButton.setOnAction(e -> skinnable.onRestore());
                     FXUtils.installFastTooltip(restoreButton, i18n("java.disabled.management.restore"));
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/MainPage.java

@@ -50,7 +50,6 @@ import org.jackhuang.hmcl.game.Version;
 import org.jackhuang.hmcl.setting.DownloadProviders;
 import org.jackhuang.hmcl.setting.Profile;
 import org.jackhuang.hmcl.setting.Profiles;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.Controllers;
@@ -152,7 +151,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
                 }
             });
             btnHide.getStyleClass().add("announcement-close-button");
-            btnHide.setGraphic(SVG.CLOSE.createIcon(Theme.blackFill(), 20));
+            btnHide.setGraphic(SVG.CLOSE.createIcon(20));
             titleBar.setRight(btnHide);
 
             TextFlow body = FXUtils.segmentToTextFlow(content, Controllers::onHyperlinkAction);
@@ -188,7 +187,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
             StackPane.setMargin(hBox, new Insets(9, 12, 9, 16));
             {
                 Label lblIcon = new Label();
-                lblIcon.setGraphic(SVG.UPDATE.createIcon(Theme.whiteFill(), 20));
+                lblIcon.setGraphic(SVG.UPDATE.createIcon(20));
 
                 TwoLineListItem prompt = new TwoLineListItem();
                 prompt.setSubtitle(i18n("update.bubble.subtitle"));
@@ -200,7 +199,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
             }
 
             JFXButton closeUpdateButton = new JFXButton();
-            closeUpdateButton.setGraphic(SVG.CLOSE.createIcon(Theme.whiteFill(), 10));
+            closeUpdateButton.setGraphic(SVG.CLOSE.createIcon(10));
             StackPane.setAlignment(closeUpdateButton, Pos.TOP_RIGHT);
             closeUpdateButton.getStyleClass().add("toggle-icon-tiny");
             StackPane.setMargin(closeUpdateButton, new Insets(5));
@@ -277,7 +276,7 @@ public final class MainPage extends StackPane implements DecoratorPage {
             menuButton.setOnAction(e -> onMenu());
             menuButton.setClip(new Rectangle(211, -100, 100, 200));
             StackPane graphic = new StackPane();
-            Node svg = SVG.ARROW_DROP_UP.createIcon(Theme.foregroundFillBinding(), 30);
+            Node svg = SVG.ARROW_DROP_UP.createIcon(30);
             StackPane.setAlignment(svg, Pos.CENTER_RIGHT);
             graphic.getChildren().setAll(svg);
             graphic.setTranslateX(6);

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/PersonalizationPage.java

@@ -17,10 +17,7 @@
  */
 package org.jackhuang.hmcl.ui.main;
 
-import com.jfoenix.controls.JFXButton;
-import com.jfoenix.controls.JFXComboBox;
-import com.jfoenix.controls.JFXSlider;
-import com.jfoenix.controls.JFXTextField;
+import com.jfoenix.controls.*;
 import com.jfoenix.effects.JFXDepthManager;
 import javafx.application.Platform;
 import javafx.beans.binding.Bindings;
@@ -35,12 +32,11 @@ import javafx.scene.control.ColorPicker;
 import javafx.scene.control.Label;
 import javafx.scene.control.ScrollPane;
 import javafx.scene.layout.*;
-import javafx.scene.paint.Color;
 import javafx.scene.text.Font;
 import javafx.scene.text.FontSmoothingType;
 import org.jackhuang.hmcl.setting.EnumBackgroundImage;
 import org.jackhuang.hmcl.setting.FontManager;
-import org.jackhuang.hmcl.setting.Theme;
+import org.jackhuang.hmcl.theme.ThemeColor;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.construct.*;
@@ -81,6 +77,22 @@ public class PersonalizationPage extends StackPane {
         getChildren().setAll(scrollPane);
 
         ComponentList themeList = new ComponentList();
+        {
+            BorderPane brightnessPane = new BorderPane();
+            themeList.getContent().add(brightnessPane);
+
+            Label left = new Label(i18n("settings.launcher.brightness"));
+            BorderPane.setAlignment(left, Pos.CENTER_LEFT);
+
+            brightnessPane.setLeft(left);
+
+            JFXComboBox<String> cboBrightness = new JFXComboBox<>(
+                    FXCollections.observableArrayList("auto", "light", "dark"));
+            cboBrightness.setConverter(FXUtils.stringConverter(name -> i18n("settings.launcher.brightness." + name)));
+            cboBrightness.valueProperty().bindBidirectional(config().themeBrightnessProperty());
+            brightnessPane.setRight(cboBrightness);
+        }
+
         {
             BorderPane themePane = new BorderPane();
             themeList.getContent().add(themePane);
@@ -93,10 +105,9 @@ public class PersonalizationPage extends StackPane {
             themeColorPickerContainer.setMinHeight(30);
             themePane.setRight(themeColorPickerContainer);
 
-            ColorPicker picker = new ColorPicker(Color.web(Theme.getTheme().getColor()));
-            picker.getCustomColors().setAll(Theme.SUGGESTED_COLORS);
-            picker.setOnAction(e ->
-                    config().setTheme(Theme.custom(Theme.getColorDisplayName(picker.getValue()))));
+            ColorPicker picker = new JFXColorPicker();
+            picker.getCustomColors().setAll(ThemeColor.STANDARD_COLORS.stream().map(ThemeColor::color).toList());
+            ThemeColor.bindBidirectional(picker, config().themeColorProperty());
             themeColorPickerContainer.getChildren().setAll(picker);
             Platform.runLater(() -> JFXDepthManager.setDepth(picker, 0));
         }
@@ -267,7 +278,7 @@ public class PersonalizationPage extends StackPane {
 
                         JFXButton clearButton = new JFXButton();
                         clearButton.getStyleClass().add("toggle-icon4");
-                        clearButton.setGraphic(SVG.RESTORE.createIcon(Theme.blackFill(), -1));
+                        clearButton.setGraphic(SVG.RESTORE.createIcon());
                         clearButton.setOnAction(e -> cboFont.setValue(null));
 
                         hBox.getChildren().setAll(cboFont, clearButton);

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/SettingsPage.java

@@ -93,13 +93,13 @@ public final class SettingsPage extends SettingsView {
                 lblUpdateSub.getStyleClass().setAll("subtitle-label");
 
                 lblUpdate.setText(i18n("update"));
-                lblUpdate.getStyleClass().setAll();
+                lblUpdate.getStyleClass().setAll("title-label");
             } else {
                 lblUpdateSub.setText(i18n("update.latest"));
                 lblUpdateSub.getStyleClass().setAll("subtitle-label");
 
                 lblUpdate.setText(i18n("update"));
-                lblUpdate.getStyleClass().setAll();
+                lblUpdate.getStyleClass().setAll("title-label");
             }
         };
         UpdateChecker.latestVersionProperty().addListener(new WeakInvalidationListener(updateListener));

HMCL/src/main/java/org/jackhuang/hmcl/ui/main/SettingsView.java

@@ -27,11 +27,8 @@ import javafx.scene.Cursor;
 import javafx.scene.control.Label;
 import javafx.scene.control.ScrollPane;
 import javafx.scene.layout.*;
-import javafx.scene.text.Text;
 import javafx.scene.text.TextAlignment;
-import javafx.scene.text.TextFlow;
 import org.jackhuang.hmcl.setting.EnumCommonDirectory;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.construct.ComponentList;
@@ -115,6 +112,7 @@ public abstract class SettingsView extends StackPane {
                         VBox headerLeft = new VBox();
 
                         lblUpdate = new Label(i18n("update"));
+                        lblUpdate.getStyleClass().add("title-label");
                         lblUpdateSub = new Label();
                         lblUpdateSub.getStyleClass().add("subtitle-label");
 
@@ -126,7 +124,7 @@ public abstract class SettingsView extends StackPane {
                         btnUpdate = new JFXButton();
                         btnUpdate.setOnAction(e -> onUpdate());
                         btnUpdate.getStyleClass().add("toggle-icon4");
-                        btnUpdate.setGraphic(SVG.UPDATE.createIcon(Theme.blackFill(), 20));
+                        btnUpdate.setGraphic(SVG.UPDATE.createIcon(20));
 
                         updatePane.setHeaderRight(btnUpdate);
                     }
@@ -138,7 +136,7 @@ public abstract class SettingsView extends StackPane {
                         chkUpdateStable = new JFXRadioButton(i18n("update.channel.stable"));
                         chkUpdateDev = new JFXRadioButton(i18n("update.channel.dev"));
 
-                        TextFlow noteWrapper = new TextFlow(new Text(i18n("update.note")));
+                        Label noteWrapper = new Label(i18n("update.note"));
                         VBox.setMargin(noteWrapper, new Insets(10, 0, 0, 0));
 
                         content.getChildren().setAll(chkUpdateStable, chkUpdateDev, noteWrapper);

HMCL/src/main/java/org/jackhuang/hmcl/ui/profile/ProfileListItemSkin.java

@@ -24,7 +24,6 @@ import javafx.scene.Node;
 import javafx.scene.control.SkinBase;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.construct.RipplerContainer;
@@ -64,7 +63,7 @@ public class ProfileListItemSkin extends SkinBase<ProfileListItem> {
         btnRemove.setOnAction(e -> skinnable.remove());
         btnRemove.getStyleClass().add("toggle-icon4");
         BorderPane.setAlignment(btnRemove, Pos.CENTER);
-        btnRemove.setGraphic(SVG.CLOSE.createIcon(Theme.blackFill(), 14));
+        btnRemove.setGraphic(SVG.CLOSE.createIcon(14));
         right.getChildren().add(btnRemove);
         root.setRight(right);
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/terracotta/TerracottaControllerPage.java

@@ -46,7 +46,6 @@ import javafx.scene.text.TextFlow;
 import org.jackhuang.hmcl.game.LauncherHelper;
 import org.jackhuang.hmcl.setting.Profile;
 import org.jackhuang.hmcl.setting.Profiles;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.terracotta.TerracottaManager;
@@ -59,14 +58,10 @@ import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.WeakListenerHolder;
 import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
-import org.jackhuang.hmcl.ui.construct.ComponentList;
-import org.jackhuang.hmcl.ui.construct.ComponentSublist;
-import org.jackhuang.hmcl.ui.construct.MessageDialogPane;
-import org.jackhuang.hmcl.ui.construct.RipplerContainer;
-import org.jackhuang.hmcl.ui.construct.SpinnerPane;
-import org.jackhuang.hmcl.ui.construct.TwoLineListItem;
+import org.jackhuang.hmcl.ui.construct.*;
 import org.jackhuang.hmcl.ui.versions.Versions;
 import org.jackhuang.hmcl.util.i18n.I18n;
+import org.jackhuang.hmcl.util.i18n.LocaleUtils;
 import org.jackhuang.hmcl.util.io.FileUtils;
 import org.jackhuang.hmcl.util.io.Zipper;
 import org.jackhuang.hmcl.util.logging.Logger;
@@ -530,7 +525,13 @@ public class TerracottaControllerPage extends StackPane {
         UI_STATE.addListener(new WeakChangeListener<>(listener));
 
         VBox content = new VBox(10);
-        content.getChildren().addAll(ComponentList.createComponentListTitle(i18n("terracotta.status")), transition);
+        content.getChildren().add(ComponentList.createComponentListTitle(i18n("terracotta.status")));
+        if (!LocaleUtils.IS_CHINA_MAINLAND) {
+            HintPane hintPane = new HintPane(MessageDialogPane.MessageType.WARNING);
+            hintPane.setText(i18n("terracotta.unsupported.region"));
+            content.getChildren().add(hintPane);
+        }
+        content.getChildren().add(transition);
         content.setPadding(new Insets(10));
         content.setFillWidth(true);
 
@@ -559,7 +560,7 @@ public class TerracottaControllerPage extends StackPane {
             Label description = new Label(link.description().getText(I18n.getLocale().getCandidateLocales()));
             HBox placeholder = new HBox();
             HBox.setHgrow(placeholder, Priority.ALWAYS);
-            Node icon = SVG.OPEN_IN_NEW.createIcon(Theme.blackFill(), 16);
+            Node icon = SVG.OPEN_IN_NEW.createIcon(16);
             node.getChildren().setAll(description, placeholder, icon);
 
             String url = link.link();
@@ -670,11 +671,11 @@ public class TerracottaControllerPage extends StackPane {
         }
 
         public void setLeftIcon(SVG left) {
-            this.left.set(left.createIcon(Theme.blackFill(), 28));
+            this.left.set(left.createIcon(28));
         }
 
         public void setRightIcon(SVG right) {
-            this.right.set(right.createIcon(Theme.blackFill(), 28));
+            this.right.set(right.createIcon(28));
         }
     }
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/DownloadPage.java

@@ -38,7 +38,6 @@ import org.jackhuang.hmcl.mod.ModLoaderType;
 import org.jackhuang.hmcl.mod.RemoteMod;
 import org.jackhuang.hmcl.mod.RemoteModRepository;
 import org.jackhuang.hmcl.setting.Profile;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.FileDownloadTask;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
@@ -394,15 +393,15 @@ public class DownloadPage extends Control implements DecoratorPage {
                     switch (dataItem.getVersionType()) {
                         case Alpha:
                             content.addTag(i18n("mods.channel.alpha"));
-                            graphicPane.getChildren().setAll(SVG.ALPHA_CIRCLE.createIcon(Theme.blackFill(), 24));
+                            graphicPane.getChildren().setAll(SVG.ALPHA_CIRCLE.createIcon(24));
                             break;
                         case Beta:
                             content.addTag(i18n("mods.channel.beta"));
-                            graphicPane.getChildren().setAll(SVG.BETA_CIRCLE.createIcon(Theme.blackFill(), 24));
+                            graphicPane.getChildren().setAll(SVG.BETA_CIRCLE.createIcon(24));
                             break;
                         case Release:
                             content.addTag(i18n("mods.channel.release"));
-                            graphicPane.getChildren().setAll(SVG.RELEASE_CIRCLE.createIcon(Theme.blackFill(), 24));
+                            graphicPane.getChildren().setAll(SVG.RELEASE_CIRCLE.createIcon(24));
                             break;
                     }
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameListItemSkin.java

@@ -26,7 +26,6 @@ import javafx.scene.control.SkinBase;
 import javafx.scene.input.MouseButton;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.construct.IconedMenuItem;
@@ -81,7 +80,7 @@ public class GameListItemSkin extends SkinBase<GameListItem> {
             JFXButton btnUpgrade = new JFXButton();
             btnUpgrade.setOnAction(e -> skinnable.update());
             btnUpgrade.getStyleClass().add("toggle-icon4");
-            btnUpgrade.setGraphic(FXUtils.limitingSize(SVG.UPDATE.createIcon(Theme.blackFill(), 24), 24, 24));
+            btnUpgrade.setGraphic(FXUtils.limitingSize(SVG.UPDATE.createIcon(24), 24, 24));
             FXUtils.installFastTooltip(btnUpgrade, i18n("version.update"));
             right.getChildren().add(btnUpgrade);
         }
@@ -91,7 +90,7 @@ public class GameListItemSkin extends SkinBase<GameListItem> {
             btnLaunch.setOnAction(e -> skinnable.launch());
             btnLaunch.getStyleClass().add("toggle-icon4");
             BorderPane.setAlignment(btnLaunch, Pos.CENTER);
-            btnLaunch.setGraphic(FXUtils.limitingSize(SVG.ROCKET_LAUNCH.createIcon(Theme.blackFill(), 24), 24, 24));
+            btnLaunch.setGraphic(FXUtils.limitingSize(SVG.ROCKET_LAUNCH.createIcon(24), 24, 24));
             FXUtils.installFastTooltip(btnLaunch, i18n("version.launch.test"));
             right.getChildren().add(btnLaunch);
         }
@@ -106,7 +105,7 @@ public class GameListItemSkin extends SkinBase<GameListItem> {
             });
             btnManage.getStyleClass().add("toggle-icon4");
             BorderPane.setAlignment(btnManage, Pos.CENTER);
-            btnManage.setGraphic(FXUtils.limitingSize(SVG.MORE_VERT.createIcon(Theme.blackFill(), 24), 24, 24));
+            btnManage.setGraphic(FXUtils.limitingSize(SVG.MORE_VERT.createIcon(24), 24, 24));
             FXUtils.installFastTooltip(btnManage, i18n("settings.game.management"));
             right.getChildren().add(btnManage);
         }

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/InstallerListPage.java

@@ -29,7 +29,6 @@ import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.task.TaskExecutor;
 import org.jackhuang.hmcl.task.TaskListener;
 import org.jackhuang.hmcl.ui.*;
-import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.download.UpdateInstallerWizardProvider;
 import org.jackhuang.hmcl.util.TaskCancellationAction;
 import org.jackhuang.hmcl.util.io.FileUtils;
@@ -43,7 +42,7 @@ import java.util.concurrent.CompletableFuture;
 import static org.jackhuang.hmcl.ui.FXUtils.runInFX;
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
-public class InstallerListPage extends ListPageBase<InstallerItem> implements VersionPage.VersionLoadable, TransitionPane.Cacheable {
+public class InstallerListPage extends ListPageBase<InstallerItem> implements VersionPage.VersionLoadable {
     private Profile profile;
     private String versionId;
     private Version version;

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModCheckUpdatesTask.java

@@ -39,13 +39,13 @@ public class ModCheckUpdatesTask extends Task<List<LocalModFile.ModUpdate>> {
                                 .map(type ->
                                         Task.supplyAsync(() -> mod.checkUpdates(gameVersion, type.getRemoteModRepository()))
                                                 .setSignificance(TaskSignificance.MAJOR)
-                                                .setName(String.format("%s (%s)", mod.getFileName(), type.name())).withCounter("mods.check_updates")
+                                                .setName(String.format("%s (%s)", mod.getFileName(), type.name())).withCounter("update.checking")
                                 )
                                 .collect(Collectors.toList())
                 )
                 .collect(Collectors.toList());
 
-        setStage("mods.check_updates");
+        setStage("update.checking");
         getProperties().put("total", dependents.size() * RemoteMod.Type.values().length);
     }
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPage.java

@@ -34,7 +34,6 @@ import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.ListPageBase;
-import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane;
 import org.jackhuang.hmcl.ui.construct.PageAware;
 import org.jackhuang.hmcl.util.TaskCancellationAction;
@@ -50,7 +49,7 @@ import java.util.concurrent.locks.ReentrantLock;
 import static org.jackhuang.hmcl.util.logging.Logger.LOG;
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
-public final class ModListPage extends ListPageBase<ModListPageSkin.ModInfoObject> implements VersionPage.VersionLoadable, PageAware, TransitionPane.Cacheable {
+public final class ModListPage extends ListPageBase<ModListPageSkin.ModInfoObject> implements VersionPage.VersionLoadable, PageAware {
     private final BooleanProperty modded = new SimpleBooleanProperty(this, "modded", false);
 
     private final ReentrantLock lock = new ReentrantLock();
@@ -248,8 +247,8 @@ public final class ModListPage extends ListPageBase<ModListPageSkin.ModInfoObjec
                                 Controllers.navigateForward(new ModUpdatesPage(modManager, result));
                             }
                         })
-                        .withStagesHint(Collections.singletonList("mods.check_updates")),
-                i18n("update.checking"), TaskCancellationAction.NORMAL);
+                        .withStagesHint(Collections.singletonList("update.checking")),
+                i18n("mods.check_updates"), TaskCancellationAction.NORMAL);
 
         if (profile.getRepository().isModpack(instanceId)) {
             Controllers.confirm(

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModListPageSkin.java

@@ -46,7 +46,6 @@ import org.jackhuang.hmcl.mod.RemoteModRepository;
 import org.jackhuang.hmcl.mod.curse.CurseForgeRemoteModRepository;
 import org.jackhuang.hmcl.mod.modrinth.ModrinthRemoteModRepository;
 import org.jackhuang.hmcl.setting.Profile;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.setting.VersionIconType;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
@@ -152,7 +151,7 @@ final class ModListPageSkin extends SkinBase<ModListPage> {
                     createToolbarButton2(i18n("button.refresh"), SVG.REFRESH, skinnable::refresh),
                     createToolbarButton2(i18n("mods.add"), SVG.ADD, skinnable::add),
                     createToolbarButton2(i18n("button.reveal_dir"), SVG.FOLDER_OPEN, skinnable::openModFolder),
-                    createToolbarButton2(i18n("mods.check_updates"), SVG.UPDATE, skinnable::checkUpdates),
+                    createToolbarButton2(i18n("mods.check_updates.button"), SVG.UPDATE, skinnable::checkUpdates),
                     createToolbarButton2(i18n("download"), SVG.DOWNLOAD, skinnable::download),
                     createToolbarButton2(i18n("search"), SVG.SEARCH, () -> changeToolbar(searchBar))
             );
@@ -591,15 +590,15 @@ final class ModListPageSkin extends SkinBase<ModListPage> {
             imageView.setImage(VersionIconType.COMMAND.getIcon());
 
             restoreButton.getStyleClass().add("toggle-icon4");
-            restoreButton.setGraphic(FXUtils.limitingSize(SVG.RESTORE.createIcon(Theme.blackFill(), 24), 24, 24));
+            restoreButton.setGraphic(FXUtils.limitingSize(SVG.RESTORE.createIcon(24), 24, 24));
 
             FXUtils.installFastTooltip(restoreButton, i18n("mods.restore"));
 
             revealButton.getStyleClass().add("toggle-icon4");
-            revealButton.setGraphic(FXUtils.limitingSize(SVG.FOLDER.createIcon(Theme.blackFill(), 24), 24, 24));
+            revealButton.setGraphic(FXUtils.limitingSize(SVG.FOLDER.createIcon(24), 24, 24));
 
             infoButton.getStyleClass().add("toggle-icon4");
-            infoButton.setGraphic(FXUtils.limitingSize(SVG.INFO.createIcon(Theme.blackFill(), 24), 24, 24));
+            infoButton.setGraphic(FXUtils.limitingSize(SVG.INFO.createIcon(24), 24, 24));
 
             container.getChildren().setAll(checkBox, imageView, content, restoreButton, revealButton, infoButton);
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/ModUpdatesPage.java

@@ -111,7 +111,7 @@ public class ModUpdatesPage extends BorderPane implements DecoratorPage {
         JFXButton exportListButton = FXUtils.newRaisedButton(i18n("button.export"));
         exportListButton.setOnAction(e -> exportList());
 
-        JFXButton nextButton = FXUtils.newRaisedButton(i18n("mods.check_updates.update"));
+        JFXButton nextButton = FXUtils.newRaisedButton(i18n("mods.check_updates.confirm"));
         nextButton.setOnAction(e -> updateMods());
 
         JFXButton cancelButton = FXUtils.newRaisedButton(i18n("button.cancel"));
@@ -147,7 +147,7 @@ public class ModUpdatesPage extends BorderPane implements DecoratorPage {
                         Controllers.dialog(i18n("install.success"));
                     }
                 }),
-                i18n("mods.check_updates.update"),
+                i18n("mods.check_updates"),
                 TaskCancellationAction.NORMAL);
     }
 
@@ -276,7 +276,7 @@ public class ModUpdatesPage extends BorderPane implements DecoratorPage {
         private final List<LocalModFile> failedMods = new ArrayList<>();
 
         ModUpdateTask(ModManager modManager, List<Pair<LocalModFile, RemoteMod.Version>> mods) {
-            setStage("mods.check_updates.update");
+            setStage("mods.check_updates.confirm");
             getProperties().put("total", mods.size());
 
             this.dependents = new ArrayList<>();
@@ -308,7 +308,7 @@ public class ModUpdatesPage extends BorderPane implements DecoratorPage {
                                 failedMods.add(local);
                             }
                         })
-                        .withCounter("mods.check_updates.update"));
+                        .withCounter("mods.check_updates.confirm"));
             }
         }
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/SchematicsPage.java

@@ -33,11 +33,9 @@ import javafx.scene.layout.StackPane;
 import javafx.stage.FileChooser;
 import org.jackhuang.hmcl.schematic.LitematicFile;
 import org.jackhuang.hmcl.setting.Profile;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.*;
-import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.construct.*;
 import org.jackhuang.hmcl.util.Lang;
 import org.jackhuang.hmcl.util.StringUtils;
@@ -61,7 +59,7 @@ import static org.jackhuang.hmcl.util.logging.Logger.LOG;
 /**
  * @author Glavo
  */
-public final class SchematicsPage extends ListPageBase<SchematicsPage.Item> implements VersionPage.VersionLoadable, TransitionPane.Cacheable {
+public final class SchematicsPage extends ListPageBase<SchematicsPage.Item> implements VersionPage.VersionLoadable {
 
     private static String translateAuthorName(String author) {
         if (I18n.isUseChinese() && "hsds".equals(author)) {
@@ -241,7 +239,7 @@ public final class SchematicsPage extends ListPageBase<SchematicsPage.Item> impl
             StackPane icon = new StackPane();
             icon.setPrefSize(size, size);
             icon.setMaxSize(size, size);
-            icon.getChildren().add(getIcon().createIcon(Theme.blackFill(), size));
+            icon.getChildren().add(getIcon().createIcon(size));
             return icon;
         }
 
@@ -581,12 +579,12 @@ public final class SchematicsPage extends ListPageBase<SchematicsPage.Item> impl
                 JFXButton btnReveal = new JFXButton();
                 FXUtils.installFastTooltip(btnReveal, i18n("reveal.in_file_manager"));
                 btnReveal.getStyleClass().add("toggle-icon4");
-                btnReveal.setGraphic(SVG.FOLDER_OPEN.createIcon(Theme.blackFill(), -1));
+                btnReveal.setGraphic(SVG.FOLDER_OPEN.createIcon());
                 btnReveal.setOnAction(event -> item.onReveal());
 
                 JFXButton btnDelete = new JFXButton();
                 btnDelete.getStyleClass().add("toggle-icon4");
-                btnDelete.setGraphic(SVG.DELETE_FOREVER.createIcon(Theme.blackFill(), -1));
+                btnDelete.setGraphic(SVG.DELETE_FOREVER.createIcon());
                 btnDelete.setOnAction(event ->
                         Controllers.confirm(i18n("button.remove.confirm"), i18n("button.remove"),
                                 item::onDelete, null));

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/VersionIconDialog.java

@@ -23,7 +23,6 @@ import javafx.scene.layout.FlowPane;
 import javafx.stage.FileChooser;
 import org.jackhuang.hmcl.event.Event;
 import org.jackhuang.hmcl.setting.Profile;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.setting.VersionIconType;
 import org.jackhuang.hmcl.setting.VersionSetting;
 import org.jackhuang.hmcl.ui.Controllers;
@@ -93,7 +92,7 @@ public class VersionIconDialog extends DialogPane {
     }
 
     private Node createCustomIcon() {
-        Node shape = SVG.ADD_CIRCLE.createIcon(Theme.blackFill(), 32);
+        Node shape = SVG.ADD_CIRCLE.createIcon(32);
         shape.setMouseTransparent(true);
         RipplerContainer container = new RipplerContainer(shape);
         FXUtils.setLimitWidth(container, 36);

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/VersionPage.java

@@ -27,7 +27,6 @@ import javafx.scene.Node;
 import javafx.scene.layout.Priority;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
-import javafx.scene.paint.Paint;
 import org.jackhuang.hmcl.event.EventBus;
 import org.jackhuang.hmcl.event.EventPriority;
 import org.jackhuang.hmcl.event.RefreshedVersionsEvent;
@@ -312,7 +311,7 @@ public class VersionPage extends DecoratorAnimatedPage implements DecoratorPage
     }
 
     public static Node wrap(SVG svg) {
-        return wrap(svg.createIcon((Paint) null, 20));
+        return wrap(svg.createIcon(20));
     }
 
     public interface VersionLoadable {

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldBackupsPage.java

@@ -31,7 +31,6 @@ import javafx.scene.layout.HBox;
 import javafx.scene.layout.StackPane;
 import org.jackhuang.hmcl.game.World;
 import org.jackhuang.hmcl.game.WorldLockedException;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.*;
@@ -40,7 +39,6 @@ import org.jackhuang.hmcl.ui.construct.RipplerContainer;
 import org.jackhuang.hmcl.ui.construct.TwoLineListItem;
 import org.jackhuang.hmcl.util.Pair;
 import org.jackhuang.hmcl.util.StringUtils;
-import org.jackhuang.hmcl.util.i18n.I18n;
 import org.jetbrains.annotations.NotNull;
 
 import java.nio.file.*;
@@ -247,7 +245,7 @@ public final class WorldBackupsPage extends ListPageBase<WorldBackupsPage.Backup
                 item.setSubtitle(formatDateTime(skinnable.getBackupTime()) + (skinnable.count == 0 ? "" : " (" + skinnable.count + ")"));
 
                 if (world.getGameVersion() != null)
-                    item.addTag(I18n.getDisplayVersion(world.getGameVersion()));
+                    item.addTag(world.getGameVersion());
             }
 
             {
@@ -259,14 +257,14 @@ public final class WorldBackupsPage extends ListPageBase<WorldBackupsPage.Backup
                 right.getChildren().add(btnReveal);
                 FXUtils.installFastTooltip(btnReveal, i18n("reveal.in_file_manager"));
                 btnReveal.getStyleClass().add("toggle-icon4");
-                btnReveal.setGraphic(SVG.FOLDER_OPEN.createIcon(Theme.blackFill(), -1));
+                btnReveal.setGraphic(SVG.FOLDER_OPEN.createIcon());
                 btnReveal.setOnAction(event -> skinnable.onReveal());
 
                 JFXButton btnDelete = new JFXButton();
                 right.getChildren().add(btnDelete);
                 FXUtils.installFastTooltip(btnDelete, i18n("world.backup.delete"));
                 btnDelete.getStyleClass().add("toggle-icon4");
-                btnDelete.setGraphic(SVG.DELETE.createIcon(Theme.blackFill(), -1));
+                btnDelete.setGraphic(SVG.DELETE.createIcon());
                 btnDelete.setOnAction(event -> Controllers.confirm(i18n("button.remove.confirm"), i18n("button.remove"), skinnable::onDelete, null));
             }
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldExportPage.java

@@ -23,7 +23,6 @@ import javafx.scene.control.Skin;
 import org.jackhuang.hmcl.game.World;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.wizard.WizardSinglePage;
-import org.jackhuang.hmcl.util.i18n.I18n;
 
 import java.nio.file.Path;
 import java.nio.file.Paths;
@@ -42,8 +41,7 @@ public class WorldExportPage extends WizardSinglePage {
         this.world = world;
 
         path.set(export.toString());
-        if (world.getGameVersion() != null)
-            gameVersion.set(I18n.getDisplayVersion(world.getGameVersion()));
+        gameVersion.set(world.getGameVersion());
         worldName.set(world.getWorldName());
     }
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldInfoPage.java

@@ -33,7 +33,6 @@ import javafx.scene.layout.HBox;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.game.World;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.FXUtils;
@@ -123,8 +122,7 @@ public final class WorldInfoPage extends SpinnerPane {
 
                 Label gameVersionLabel = new Label();
                 FXUtils.copyOnDoubleClick(gameVersionLabel);
-                if (world.getGameVersion() != null)
-                    gameVersionLabel.setText(world.getGameVersion().toNormalizedString());
+                gameVersionLabel.setText(world.getGameVersion());
                 BorderPane.setAlignment(gameVersionLabel, Pos.CENTER_RIGHT);
                 gameVersionPane.setRight(gameVersionLabel);
             }
@@ -162,7 +160,7 @@ public final class WorldInfoPage extends SpinnerPane {
                 blur.setIterations(3);
                 FXUtils.onChangeAndOperate(visibility, isVisibility -> {
                     SVG icon = isVisibility ? SVG.VISIBILITY : SVG.VISIBILITY_OFF;
-                    visibilityButton.getChildren().setAll(icon.createIcon(Theme.blackFill(), 12));
+                    visibilityButton.getChildren().setAll(icon.createIcon(12));
                     randomSeedLabel.setEffect(isVisibility ? null : blur);
                 });
             }

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldListItemSkin.java

@@ -28,12 +28,11 @@ import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.StackPane;
 import org.jackhuang.hmcl.game.World;
-import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
 import org.jackhuang.hmcl.ui.construct.*;
 import org.jackhuang.hmcl.util.ChunkBaseApp;
-import org.jackhuang.hmcl.util.i18n.I18n;
+import org.jackhuang.hmcl.util.versioning.GameVersionNumber;
 
 import java.time.Instant;
 
@@ -73,10 +72,10 @@ public final class WorldListItemSkin extends SkinBase<WorldListItem> {
             item.setMouseTransparent(true);
             if (world.getWorldName() != null)
                 item.setTitle(parseColorEscapes(world.getWorldName()));
-            item.setSubtitle(i18n("world.datetime", formatDateTime(Instant.ofEpochMilli(world.getLastPlayed()))));
+            item.setSubtitle(i18n("world.datetime", formatDateTime(Instant.ofEpochMilli(world.getLastPlayed())), world.getGameVersion() == null ? i18n("message.unknown") : world.getGameVersion()));
 
             if (world.getGameVersion() != null)
-                item.addTag(I18n.getDisplayVersion(world.getGameVersion()));
+                item.addTag(world.getGameVersion());
             if (world.isLocked())
                 item.addTag(i18n("world.locked"));
         }
@@ -89,7 +88,7 @@ public final class WorldListItemSkin extends SkinBase<WorldListItem> {
             JFXButton btnMore = new JFXButton();
             right.getChildren().add(btnMore);
             btnMore.getStyleClass().add("toggle-icon4");
-            btnMore.setGraphic(SVG.MORE_VERT.createIcon(Theme.blackFill(), -1));
+            btnMore.setGraphic(SVG.MORE_VERT.createIcon());
             btnMore.setOnAction(event -> showPopupMenu(JFXPopup.PopupHPosition.RIGHT, 0, root.getHeight()));
         }
 
@@ -127,7 +126,7 @@ public final class WorldListItemSkin extends SkinBase<WorldListItem> {
                     new IconedMenuItem(SVG.FORT, i18n("world.chunkbase.nether_fortress"), () -> ChunkBaseApp.openNetherFortressFinder(world), popup)
             );
 
-            if (world.getGameVersion() != null && world.getGameVersion().compareTo("1.13") >= 0) {
+            if (GameVersionNumber.compare(world.getGameVersion(), "1.13") >= 0) {
                 popupMenu.getContent().add(new IconedMenuItem(SVG.LOCATION_CITY, i18n("world.chunkbase.end_city"),
                         () -> ChunkBaseApp.openEndCityFinder(world), popup));
             }

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldListPage.java

@@ -27,9 +27,7 @@ import org.jackhuang.hmcl.setting.Profile;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.*;
-import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.util.io.FileUtils;
-import org.jackhuang.hmcl.util.versioning.GameVersionNumber;
 
 import java.io.IOException;
 import java.nio.file.FileAlreadyExistsException;
@@ -43,7 +41,7 @@ import java.util.stream.Stream;
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 import static org.jackhuang.hmcl.util.logging.Logger.LOG;
 
-public final class WorldListPage extends ListPageBase<WorldListItem> implements VersionPage.VersionLoadable, TransitionPane.Cacheable {
+public final class WorldListPage extends ListPageBase<WorldListItem> implements VersionPage.VersionLoadable {
     private final BooleanProperty showAll = new SimpleBooleanProperty(this, "showAll", false);
 
     private Path savesDir;
@@ -51,7 +49,7 @@ public final class WorldListPage extends ListPageBase<WorldListItem> implements
     private List<World> worlds;
     private Profile profile;
     private String id;
-    private GameVersionNumber gameVersion;
+    private String gameVersion;
 
     public WorldListPage() {
         FXUtils.applyDragListener(this, it -> "zip".equals(FileUtils.getExtension(it)), modpacks -> {
@@ -89,7 +87,7 @@ public final class WorldListPage extends ListPageBase<WorldListItem> implements
             return;
 
         setLoading(true);
-        Task.runAsync(() -> gameVersion = profile.getRepository().getGameVersion(id).map(GameVersionNumber::asGameVersion).orElse(null))
+        Task.runAsync(() -> gameVersion = profile.getRepository().getGameVersion(id).orElse(null))
                 .thenApplyAsync(unused -> {
                     try (Stream<World> stream = World.getWorlds(savesDir)) {
                         return stream.parallel().collect(Collectors.toList());

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/WorldManagePage.java

@@ -33,6 +33,7 @@ import org.jackhuang.hmcl.ui.construct.*;
 import org.jackhuang.hmcl.ui.decorator.DecoratorAnimatedPage;
 import org.jackhuang.hmcl.ui.decorator.DecoratorPage;
 import org.jackhuang.hmcl.util.ChunkBaseApp;
+import org.jackhuang.hmcl.util.versioning.GameVersionNumber;
 
 import java.io.IOException;
 import java.nio.channels.FileChannel;
@@ -83,7 +84,7 @@ public final class WorldManagePage extends DecoratorAnimatedPage implements Deco
                 .addNavigationDrawerTab(header, worldBackupsTab, i18n("world.backup"), SVG.ARCHIVE, SVG.ARCHIVE_FILL);
 
         if (world.getGameVersion() != null && // old game will not write game version to level.dat
-                world.getGameVersion().isAtLeast("1.13", "17w43a")) {
+                GameVersionNumber.asGameVersion(world.getGameVersion()).isAtLeast("1.13", "17w43a")) {
             header.getTabs().add(datapackTab);
             sideBar.addNavigationDrawerTab(header, datapackTab, i18n("world.datapack"), SVG.EXTENSION, SVG.EXTENSION_FILL);
         }
@@ -101,7 +102,7 @@ public final class WorldManagePage extends DecoratorAnimatedPage implements Deco
                     new IconedMenuItem(SVG.FORT, i18n("world.chunkbase.nether_fortress"), () -> ChunkBaseApp.openNetherFortressFinder(world), popup)
             );
 
-            if (world.getGameVersion() != null && world.getGameVersion().compareTo("1.13") >= 0) {
+            if (GameVersionNumber.compare(world.getGameVersion(), "1.13") >= 0) {
                 popupMenu.getContent().add(
                         new IconedMenuItem(SVG.LOCATION_CITY, i18n("world.chunkbase.end_city"), () -> ChunkBaseApp.openEndCityFinder(world), popup));
             }

HMCL/src/main/java/org/jackhuang/hmcl/util/ChunkBaseApp.java

@@ -49,7 +49,7 @@ public final class ChunkBaseApp {
 
     public static boolean isSupported(@NotNull World world) {
         return world.getSeed() != null && world.getGameVersion() != null &&
-                world.getGameVersion().compareTo(MIN_GAME_VERSION) >= 0;
+                GameVersionNumber.asGameVersion(world.getGameVersion()).compareTo(MIN_GAME_VERSION) >= 0;
     }
 
     public static ChunkBaseApp newBuilder(String app, long seed) {
@@ -60,7 +60,7 @@ public final class ChunkBaseApp {
         assert isSupported(world);
 
         newBuilder("seed-map", Objects.requireNonNull(world.getSeed()))
-                .addPlatform(world.getGameVersion(), world.isLargeBiomes(), SEED_MAP_GAME_VERSIONS)
+                .addPlatform(GameVersionNumber.asGameVersion(world.getGameVersion()), world.isLargeBiomes(), SEED_MAP_GAME_VERSIONS)
                 .open();
     }
 
@@ -68,7 +68,7 @@ public final class ChunkBaseApp {
         assert isSupported(world);
 
         newBuilder("stronghold-finder", Objects.requireNonNull(world.getSeed()))
-                .addPlatform(world.getGameVersion(), world.isLargeBiomes(), STRONGHOLD_FINDER_GAME_VERSIONS)
+                .addPlatform(GameVersionNumber.asGameVersion(world.getGameVersion()), world.isLargeBiomes(), STRONGHOLD_FINDER_GAME_VERSIONS)
                 .open();
     }
 
@@ -76,7 +76,7 @@ public final class ChunkBaseApp {
         assert isSupported(world);
 
         newBuilder("nether-fortress-finder", Objects.requireNonNull(world.getSeed()))
-                .addPlatform(world.getGameVersion(), false, NETHER_FORTRESS_GAME_VERSIONS)
+                .addPlatform(GameVersionNumber.asGameVersion(world.getGameVersion()), false, NETHER_FORTRESS_GAME_VERSIONS)
                 .open();
     }
 
@@ -84,7 +84,7 @@ public final class ChunkBaseApp {
         assert isSupported(world);
 
         newBuilder("endcity-finder", Objects.requireNonNull(world.getSeed()))
-                .addPlatform(world.getGameVersion(), false, END_CITY_GAME_VERSIONS)
+                .addPlatform(GameVersionNumber.asGameVersion(world.getGameVersion()), false, END_CITY_GAME_VERSIONS)
                 .open();
     }
 

HMCL/src/main/java/org/jackhuang/hmcl/util/i18n/I18n.java

@@ -20,8 +20,8 @@ package org.jackhuang.hmcl.util.i18n;
 import org.jackhuang.hmcl.download.RemoteVersion;
 import org.jackhuang.hmcl.download.game.GameRemoteVersion;
 import org.jackhuang.hmcl.util.i18n.translator.Translator;
-import org.jackhuang.hmcl.util.versioning.GameVersionNumber;
 import org.jetbrains.annotations.Nullable;
+import org.jetbrains.annotations.PropertyKey;
 
 import java.io.IOException;
 import java.io.InputStream;
@@ -45,11 +45,11 @@ public final class I18n {
     }
 
     public static boolean isUpsideDown() {
-        return LocaleUtils.getScript(locale.getLocale()).equals("Qabs");
+        return LocaleUtils.getScript(locale.getDisplayLocale()).equals("Qabs");
     }
 
     public static boolean isUseChinese() {
-        return LocaleUtils.isChinese(locale.getLocale());
+        return LocaleUtils.isChinese(locale.getDisplayLocale());
     }
 
     public static ResourceBundle getResourceBundle() {
@@ -60,11 +60,11 @@ public final class I18n {
         return locale.getTranslator();
     }
 
-    public static String i18n(String key, Object... formatArgs) {
+    public static String i18n(@PropertyKey(resourceBundle = "assets.lang.I18N") String key, Object... formatArgs) {
         return locale.i18n(key, formatArgs);
     }
 
-    public static String i18n(String key) {
+    public static String i18n(@PropertyKey(resourceBundle = "assets.lang.I18N") String key) {
         return locale.i18n(key);
     }
 
@@ -76,11 +76,7 @@ public final class I18n {
         return getTranslator().formatSpeed(bytes);
     }
 
-    public static String getDisplayVersion(RemoteVersion version) {
-        return getTranslator().getDisplayVersion(version);
-    }
-
-    public static String getDisplayVersion(GameVersionNumber version) {
+    public static String getDisplaySelfVersion(RemoteVersion version) {
         return getTranslator().getDisplayVersion(version);
     }
 

HMCL/src/main/java/org/jackhuang/hmcl/util/i18n/MinecraftWiki.java

@@ -72,7 +72,7 @@ public final class MinecraftWiki {
                 else if (wikiVersion.startsWith("1.0.0-rc2"))
                     wikiVersion = "1.0.0-rc2";
             }
-        } else if (gameVersion instanceof GameVersionNumber.LegacySnapshot) {
+        } else if (gameVersion instanceof GameVersionNumber.Snapshot) {
             return locale.i18n("wiki.version.game.snapshot", wikiVersion) + variantSuffix;
         } else {
             if (wikiVersion.length() >= 6 && wikiVersion.charAt(2) == 'w') {

HMCL/src/main/java/org/jackhuang/hmcl/util/i18n/SupportedLocale.java

@@ -24,6 +24,7 @@ import com.google.gson.stream.JsonWriter;
 import org.jackhuang.hmcl.util.StringUtils;
 import org.jackhuang.hmcl.util.gson.JsonUtils;
 import org.jackhuang.hmcl.util.i18n.translator.Translator;
+import org.jetbrains.annotations.PropertyKey;
 
 import java.io.IOException;
 import java.io.InputStream;
@@ -41,6 +42,10 @@ import static org.jackhuang.hmcl.util.logging.Logger.LOG;
 public final class SupportedLocale {
     public static final SupportedLocale DEFAULT = new SupportedLocale();
 
+    public static boolean isExperimentalSupported(Locale locale) {
+        return "ar".equals(locale.getLanguage());
+    }
+
     private static final ConcurrentMap<Locale, SupportedLocale> LOCALES = new ConcurrentHashMap<>();
 
     public static List<SupportedLocale> getSupportedLocales() {
@@ -50,7 +55,11 @@ public final class SupportedLocale {
         InputStream locales = SupportedLocale.class.getResourceAsStream("/assets/lang/languages.json");
         if (locales != null) {
             try (locales) {
-                list.addAll(JsonUtils.fromNonNullJsonFully(locales, JsonUtils.listTypeOf(SupportedLocale.class)));
+                for (SupportedLocale locale : JsonUtils.fromNonNullJsonFully(locales, JsonUtils.listTypeOf(SupportedLocale.class))) {
+                    if (!isExperimentalSupported(locale.getLocale())) {
+                        list.add(locale);
+                    }
+                }
             } catch (Throwable e) {
                 LOG.warning("Failed to load languages.json", e);
             }
@@ -72,6 +81,7 @@ public final class SupportedLocale {
     private final boolean isDefault;
     private final String name;
     private final Locale locale;
+    private final Locale displayLocale;
     private final TextDirection textDirection;
 
     private ResourceBundle resourceBundle;
@@ -84,9 +94,15 @@ public final class SupportedLocale {
         this.name = "def"; // TODO: Change to "default" after updating the Config format
 
         String language = System.getenv("HMCL_LANGUAGE");
-        this.locale = StringUtils.isBlank(language)
-                ? LocaleUtils.SYSTEM_DEFAULT
-                : Locale.forLanguageTag(language);
+        if (StringUtils.isBlank(language)) {
+            this.locale = LocaleUtils.SYSTEM_DEFAULT;
+            this.displayLocale = isExperimentalSupported(this.locale)
+                    ? Locale.ENGLISH
+                    : this.locale;
+        } else {
+            this.locale = Locale.forLanguageTag(language);
+            this.displayLocale = this.locale;
+        }
         this.textDirection = LocaleUtils.getTextDirection(locale);
     }
 
@@ -94,6 +110,7 @@ public final class SupportedLocale {
         this.isDefault = false;
         this.name = locale.toLanguageTag();
         this.locale = locale;
+        this.displayLocale = locale;
         this.textDirection = LocaleUtils.getTextDirection(locale);
     }
 
@@ -109,6 +126,15 @@ public final class SupportedLocale {
         return locale;
     }
 
+    /// Used to represent the text display language of HMCL.
+    ///
+    /// Usually equivalent to [#getLocale()],
+    /// but for [experimentally supported languages][#isExperimentalSupported(Locale)],
+    /// it falls back to ENGLISH by default.
+    public Locale getDisplayLocale() {
+        return displayLocale;
+    }
+
     public TextDirection getTextDirection() {
         return textDirection;
     }
@@ -166,7 +192,7 @@ public final class SupportedLocale {
     public ResourceBundle getResourceBundle() {
         ResourceBundle bundle = resourceBundle;
         if (resourceBundle == null)
-            resourceBundle = bundle = ResourceBundle.getBundle("assets.lang.I18N", locale,
+            resourceBundle = bundle = ResourceBundle.getBundle("assets.lang.I18N", displayLocale,
                     DefaultResourceBundleControl.INSTANCE);
 
         return bundle;
@@ -175,7 +201,7 @@ public final class SupportedLocale {
     public ResourceBundle getLocaleNamesBundle() {
         ResourceBundle bundle = localeNamesBundle;
         if (localeNamesBundle == null)
-            localeNamesBundle = bundle = ResourceBundle.getBundle("assets.lang.LocaleNames", locale,
+            localeNamesBundle = bundle = ResourceBundle.getBundle("assets.lang.LocaleNames", displayLocale,
                     DefaultResourceBundleControl.INSTANCE);
 
         return bundle;
@@ -183,11 +209,11 @@ public final class SupportedLocale {
 
     public List<Locale> getCandidateLocales() {
         if (candidateLocales == null)
-            candidateLocales = List.copyOf(LocaleUtils.getCandidateLocales(locale));
+            candidateLocales = List.copyOf(LocaleUtils.getCandidateLocales(displayLocale));
         return candidateLocales;
     }
 
-    public String i18n(String key, Object... formatArgs) {
+    public String i18n(@PropertyKey(resourceBundle = "assets.lang.I18N") String key, Object... formatArgs) {
         try {
             return String.format(getResourceBundle().getString(key), formatArgs);
         } catch (MissingResourceException e) {
@@ -199,7 +225,7 @@ public final class SupportedLocale {
         return key + Arrays.toString(formatArgs);
     }
 
-    public String i18n(String key) {
+    public String i18n(@PropertyKey(resourceBundle = "assets.lang.I18N") String key) {
         try {
             return getResourceBundle().getString(key);
         } catch (MissingResourceException e) {

HMCL/src/main/java/org/jackhuang/hmcl/util/i18n/translator/Translator.java

@@ -19,7 +19,6 @@ package org.jackhuang.hmcl.util.i18n.translator;
 
 import org.jackhuang.hmcl.download.RemoteVersion;
 import org.jackhuang.hmcl.util.i18n.SupportedLocale;
-import org.jackhuang.hmcl.util.versioning.GameVersionNumber;
 
 import java.time.ZoneId;
 import java.time.format.DateTimeFormatter;
@@ -29,29 +28,25 @@ import java.util.Locale;
 /// @author Glavo
 public class Translator {
     protected final SupportedLocale supportedLocale;
-    protected final Locale locale;
+    protected final Locale displayLocale;
 
     public Translator(SupportedLocale supportedLocale) {
         this.supportedLocale = supportedLocale;
-        this.locale = supportedLocale.getLocale();
+        this.displayLocale = supportedLocale.getDisplayLocale();
     }
 
     public final SupportedLocale getSupportedLocale() {
         return supportedLocale;
     }
 
-    public final Locale getLocale() {
-        return locale;
+    public final Locale getDisplayLocale() {
+        return displayLocale;
     }
 
     public String getDisplayVersion(RemoteVersion remoteVersion) {
         return remoteVersion.getSelfVersion();
     }
 
-    public String getDisplayVersion(GameVersionNumber versionNumber) {
-        return versionNumber.toNormalizedString();
-    }
-
     /// @see [#formatDateTime(TemporalAccessor)]
     protected DateTimeFormatter dateTimeFormatter;
 

HMCL/src/main/java/org/jackhuang/hmcl/util/i18n/translator/Translator_lzh.java

@@ -92,38 +92,22 @@ public class Translator_lzh extends Translator {
                 appendDigitByDigit(builder, String.valueOf(release.getPatch()));
             }
 
-            switch (release.getEaType()) {
-                case GA -> {
-                    // do nothing
-                }
-                case PRE_RELEASE -> {
-                    builder.append("之預");
-                    appendDigitByDigit(builder, release.getEaVersion().toString());
-                }
-                case RELEASE_CANDIDATE -> {
-                    builder.append("之候");
-                    appendDigitByDigit(builder, release.getEaVersion().toString());
-                }
-                default -> {
-                    // Unsupported
-                    return gameVersion.toString();
-                }
-            }
-
-            switch (release.getAdditional()) {
-                case NONE -> {
-                }
-                case UNOBFUSCATED -> {
-                    builder.append("涇渭");
-                }
-                default -> {
-                    // Unsupported
-                    return gameVersion.toString();
-                }
+            //noinspection StatementWithEmptyBody
+            if (release.getEaType() == GameVersionNumber.Release.TYPE_GA) {
+                // do nothing
+            } else if (release.getEaType() == GameVersionNumber.Release.TYPE_PRE) {
+                builder.append("之預");
+                appendDigitByDigit(builder, release.getEaVersion().toString());
+            } else if (release.getEaType() == GameVersionNumber.Release.TYPE_RC) {
+                builder.append("之候");
+                appendDigitByDigit(builder, release.getEaVersion().toString());
+            } else {
+                // Unsupported
+                return gameVersion.toString();
             }
 
             return builder.toString();
-        } else if (gameVersion instanceof GameVersionNumber.LegacySnapshot snapshot) {
+        } else if (gameVersion instanceof GameVersionNumber.Snapshot snapshot) {
             StringBuilder builder = new StringBuilder();
 
             appendDigitByDigit(builder, String.valueOf(snapshot.getYear()));
@@ -136,9 +120,6 @@ public class Translator_lzh extends Translator {
             else
                 builder.append(suffix);
 
-            if (snapshot.isUnobfuscated())
-                builder.append("涇渭");
-
             return builder.toString();
         } else if (gameVersion instanceof GameVersionNumber.Special) {
             String version = gameVersion.toString();
@@ -149,7 +130,6 @@ public class Translator_lzh extends Translator {
                 case "2.0_purple" -> "二點〇紫";
                 case "1.rv-pre1" -> "一點真視之預一";
                 case "3d shareware v1.34" -> "躍然享件一點三四";
-                case "13w12~" -> "一三週一二閏";
                 case "20w14infinite", "20w14~", "20w14∞" -> "二〇週一四宇";
                 case "22w13oneblockatatime" -> "二二週一三典";
                 case "23w13a_or_b" -> "二三週一三暨";
@@ -199,11 +179,6 @@ public class Translator_lzh extends Translator {
             return translateGenericVersion(remoteVersion.getSelfVersion());
     }
 
-    @Override
-    public String getDisplayVersion(GameVersionNumber versionNumber) {
-        return translateGameVersion(versionNumber);
-    }
-
     @Override
     public String formatDateTime(TemporalAccessor time) {
         LocalDateTime localDateTime;

HMCL/src/main/resources/assets/about/deps.json

@@ -78,5 +78,10 @@
     "title": "EasyTier",
     "subtitle": "Copyright 2024-present Easytier Programme within The Commons Conservancy",
     "externalLink": "https://github.com/EasyTier/EasyTier"
+  },
+  {
+    "title": "MonetFX",
+    "subtitle": "Copyright © 2025 Glavo.\nLicensed under the Apache 2.0 License.",
+    "externalLink": "https://github.com/Glavo/MonetFX"
   }
 ]

HMCL/src/main/resources/assets/about/thanks.json

@@ -71,7 +71,10 @@
     "externalLink" : "https://github.com/mcmod-info-mirror"
   },
   {
-    "image" : "/assets/img/github.png",
+    "image" : {
+      "light" : "/assets/img/github.png",
+      "dark" : "/assets/img/github-white.png"
+    },
     "titleLocalized" : "about.thanks_to.contributors",
     "subtitleLocalized" : "about.thanks_to.contributors.statement",
     "externalLink" : "https://github.com/HMCL-dev/HMCL/graphs/contributors"

HMCL/src/main/resources/assets/css/blue.css

@@ -1,28 +1,60 @@
-/**
- * Hello Minecraft! Launcher
- * Copyright (C) 2020  huangyuhui <huanghongxun2008@126.com> and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-.root {
-    -fx-base-color: #5C6BC0;
-    -fx-base-darker-color: derive(-fx-base-color, -10%);
-    -fx-base-check-color: derive(-fx-base-color, 30%);
-    -fx-rippler-color: rgba(92, 107, 192, 0.3);
-    -fx-base-rippler-color: derive(rgba(92, 107, 192, 0.3), 100%);
-    -fx-base-disabled-text-fill: rgba(256, 256, 256, 0.7);
-    -fx-base-text-fill: white;
-
-    -theme-thumb: rgba(92, 107, 192, 0.7);
+* {
+    -monet-primary: #4352A5;
+    -monet-on-primary: #FFFFFF;
+    -monet-primary-container: #5C6BC0;
+    -monet-on-primary-container: #F8F6FF;
+    -monet-primary-fixed: #DEE0FF;
+    -monet-primary-fixed-dim: #BAC3FF;
+    -monet-on-primary-fixed: #00105B;
+    -monet-on-primary-fixed-variant: #2F3F92;
+    -monet-secondary: #575C7F;
+    -monet-on-secondary: #FFFFFF;
+    -monet-secondary-container: #D0D5FD;
+    -monet-on-secondary-container: #565B7D;
+    -monet-secondary-fixed: #DEE0FF;
+    -monet-secondary-fixed-dim: #BFC4EC;
+    -monet-on-secondary-fixed: #141938;
+    -monet-on-secondary-fixed-variant: #3F4566;
+    -monet-tertiary: #775200;
+    -monet-on-tertiary: #FFFFFF;
+    -monet-tertiary-container: #976900;
+    -monet-on-tertiary-container: #FFF6EE;
+    -monet-tertiary-fixed: #FFDEAC;
+    -monet-tertiary-fixed-dim: #F6BD58;
+    -monet-on-tertiary-fixed: #281900;
+    -monet-on-tertiary-fixed-variant: #5F4100;
+    -monet-error: #BA1A1A;
+    -monet-on-error: #FFFFFF;
+    -monet-error-container: #FFDAD6;
+    -monet-on-error-container: #93000A;
+    -monet-surface: #FBF8FF;
+    -monet-on-surface: #1B1B21;
+    -monet-surface-dim: #DBD9E1;
+    -monet-surface-bright: #FBF8FF;
+    -monet-surface-container-lowest: #FFFFFF;
+    -monet-surface-container-low: #F5F2FA;
+    -monet-surface-container: #EFEDF5;
+    -monet-surface-container-high: #E9E7EF;
+    -monet-surface-container-highest: #E3E1E9;
+    -monet-surface-variant: #E2E1EF;
+    -monet-on-surface-variant: #454651;
+    -monet-background: #FBF8FF;
+    -monet-on-background: #1B1B21;
+    -monet-outline: #767683;
+    -monet-outline-variant: #C6C5D3;
+    -monet-shadow: #000000;
+    -monet-scrim: #000000;
+    -monet-inverse-surface: #303036;
+    -monet-inverse-on-surface: #F2EFF7;
+    -monet-inverse-primary: #BAC3FF;
+    -monet-surface-tint: #4858AB;
+    -monet-primary-seed: #5C6BC0;
+    -monet-primary-transparent-50: #4352A580;
+    -monet-secondary-container-transparent-50: #D0D5FD80;
+    -monet-surface-transparent-50: #FBF8FF80;
+    -monet-surface-transparent-80: #FBF8FFCC;
+    -monet-on-surface-variant-transparent-38: #45465161;
+    -monet-surface-container-low-transparent-80: #F5F2FACC;
+    -monet-secondary-container-transparent-80: #D0D5FDCC;
+    -warning-tag-background: #F1AEB5;
 }