[release/3.9] 修复 CurseForge 源无法搜索到内容的问题 (#5232 )

https://github.com/HMCL-dev/HMCL/pull/5220
[release/3.9] Fix #5121 : NeoForge alpha 版本未正确归类的问题 (#5231 )
2026-01-14 20:49:09 +08:00 · 2026-01-14 20:48:26 +08:00 · 2026-01-14 20:47:09 +08:00 · 2026-01-14 20:46:32 +08:00 · 2026-01-14 20:36:57 +08:00 · 2026-01-14 20:36:11 +08:00
278 changed files with 18542 additions and 4530 deletions
@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: QQ 群
+    url: https://docs.hmcl.net/groups.html
+    about: Hello Minecraft! Launcher 的官方 QQ 交流群。
+  - name: Discord 服务器
+    url: https://discord.gg/jVvC7HfM6U
+    about: Hello Minecraft! Launcher 的官方 Discord 服务器。
@@ -21,5 +21,9 @@ jobs:
          distribution: 'zulu'
          java-version: '17'
          java-package: 'jdk+fx'
+      - name: Setup Gradle
+        uses: gradle/actions/setup-gradle@v5
+        with:
+          cache-cleanup: never
      - name: Check Codes
        run: ./gradlew checkstyle checkTranslations --no-daemon --parallel --stacktrace
@@ -1,119 +0,0 @@
-name: Check Update
-
-on:
-  workflow_dispatch:
-#  schedule:
-#    - cron: '30 * * * *'
-
-permissions:
-  contents: write
-
-jobs:
-  dev-check-update:
-    if: ${{ github.repository_owner == 'HMCL-dev' }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - name: Set up JDK
-        uses: actions/setup-java@v5
-        with:
-          distribution: 'temurin'
-          java-version: '25'
-      - name: Fetch tags
-        run: git fetch --all --tags
-      - name: Fetch last version
-        run: ./gradlew checkUpdateDev --no-daemon --info --stacktrace
-      - name: Check for existing tags
-        run: if [ -z "$(git tag -l "$HMCL_TAG_NAME")" ]; then echo "continue=true" >> $GITHUB_ENV; fi
-      - name: Download artifacts
-        if: ${{ env.continue == 'true' }}
-        run: |
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.exe"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.exe.sha256"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.jar"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.jar.sha256"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.sh"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.sh.sha256"
-      - name: Generate release note
-        if: ${{ env.continue == 'true' }}
-        run: |
-          echo "The full changelogs can be found on the website: https://docs.hmcl.net/changelog/dev.html" >> RELEASE_NOTE
-          echo "" >> RELEASE_NOTE
-          echo "*Notice: changelogs are written in Chinese.*" >> RELEASE_NOTE
-          echo "" >> RELEASE_NOTE
-          echo "| File Name | SHA-256 Checksum |"  >> RELEASE_NOTE
-          echo "| ---  | --- |" >> RELEASE_NOTE
-          echo "| [HMCL-$HMCL_VERSION.exe]($GH_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.exe) | \`$(cat HMCL-$HMCL_VERSION.exe.sha256)\` |" >> RELEASE_NOTE
-          echo "| [HMCL-$HMCL_VERSION.jar]($GH_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.jar) | \`$(cat HMCL-$HMCL_VERSION.jar.sha256)\` |" >> RELEASE_NOTE
-          echo "| [HMCL-$HMCL_VERSION.sh]($GH_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.sh)   | \`$(cat HMCL-$HMCL_VERSION.sh.sha256)\` |"  >> RELEASE_NOTE
-        env:
-          GH_DOWNLOAD_BASE_URL: https://github.com/HMCL-dev/HMCL/releases/download
-      - name: Create release
-        if: ${{ env.continue == 'true' }}
-        uses: softprops/action-gh-release@v2
-        with:
-          body_path: RELEASE_NOTE
-          files: |
-            HMCL-${{ env.HMCL_VERSION }}.exe
-            HMCL-${{ env.HMCL_VERSION }}.jar
-            HMCL-${{ env.HMCL_VERSION }}.sh
-          target_commitish: ${{ env.HMCL_COMMIT_SHA }}
-          name: ${{ env.HMCL_TAG_NAME }}
-          tag_name: ${{ env.HMCL_TAG_NAME }}
-          prerelease: true
-  stable-check-update:
-    if: ${{ github.repository_owner == 'HMCL-dev' }}
-    needs: dev-check-update
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v5
-      - name: Set up JDK
-        uses: actions/setup-java@v5
-        with:
-          distribution: 'temurin'
-          java-version: '25'
-      - name: Fetch tags
-        run: git fetch --all --tags
-
-      - name: Fetch last version
-        run: ./gradlew checkUpdateStable --no-daemon --info --stacktrace
-      - name: Check for existing tags
-        run: if ! git tag -l | grep -q "$HMCL_TAG_NAME"; then echo "continue=true" >> $GITHUB_ENV; fi 
-      - name: Download artifacts
-        if: ${{ env.continue == 'true' }}
-        run: |
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.exe"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.exe.sha256"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.jar"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.jar.sha256"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.sh"
-          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.sh.sha256"
-      - name: Generate release note
-        if: ${{ env.continue == 'true' }}
-        run: |
-          echo "**This version is a stable version.**" >> RELEASE_NOTE
-          echo "" >> RELEASE_NOTE
-          echo "The full changelogs can be found on the website: https://docs.hmcl.net/changelog/stable.html" >> RELEASE_NOTE
-          echo "" >> RELEASE_NOTE
-          echo "*Notice: changelogs are written in Chinese.*" >> RELEASE_NOTE
-          echo "" >> RELEASE_NOTE
-          echo "| File Name | SHA-256 Checksum |"  >> RELEASE_NOTE
-          echo "| ---  | --- |" >> RELEASE_NOTE
-          echo "| [HMCL-$HMCL_VERSION.exe]($GH_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.exe) | \`$(cat HMCL-$HMCL_VERSION.exe.sha256)\` |" >> RELEASE_NOTE
-          echo "| [HMCL-$HMCL_VERSION.jar]($GH_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.jar) | \`$(cat HMCL-$HMCL_VERSION.jar.sha256)\` |" >> RELEASE_NOTE
-          echo "| [HMCL-$HMCL_VERSION.sh]($GH_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.sh)   | \`$(cat HMCL-$HMCL_VERSION.sh.sha256)\` |"  >> RELEASE_NOTE
-        env:
-          GH_DOWNLOAD_BASE_URL: https://github.com/HMCL-dev/HMCL/releases/download
-      - name: Create release
-        if: ${{ env.continue == 'true' }}
-        uses: softprops/action-gh-release@v2
-        with:
-          body_path: RELEASE_NOTE
-          files: |
-            HMCL-${{ env.HMCL_VERSION }}.exe
-            HMCL-${{ env.HMCL_VERSION }}.jar
-            HMCL-${{ env.HMCL_VERSION }}.sh
-          target_commitish: ${{ env.HMCL_COMMIT_SHA }}
-          name: ${{ env.HMCL_TAG_NAME }}
-          tag_name: ${{ env.HMCL_TAG_NAME }}
-          prerelease: true
@@ -1,21 +0,0 @@
-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
@@ -19,8 +19,12 @@ jobs:
        distribution: 'zulu'
        java-version: '17'
        java-package: 'jdk+fx'
+    - name: Setup Gradle
+      uses: gradle/actions/setup-gradle@v5
+      with:
+        cache-cleanup: never
    - name: Build with Gradle
-      run: ./gradlew build --no-daemon
+      run: ./gradlew build --no-daemon --parallel
      env:
        MICROSOFT_AUTH_ID: ${{ secrets.MICROSOFT_AUTH_ID }}
        MICROSOFT_AUTH_SECRET: ${{ secrets.MICROSOFT_AUTH_SECRET }}
@@ -47,4 +51,4 @@ jobs:
        name: HMCL-${{ env.SHORT_SHA }}-sh
        path: |
          HMCL/build/libs/HMCL-*.sh
-          HMCL/build/libs/HMCL-*.sh.sha256
+          HMCL/build/libs/HMCL-*.sh.sha256
@@ -0,0 +1,32 @@
+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/*"
@@ -0,0 +1,125 @@
+name: Create Release
+
+on:
+  workflow_dispatch:
+#  schedule:
+#    - cron: '30 * * * *'
+
+permissions:
+  contents: write
+
+jobs:
+  check-update:
+    if: ${{ github.repository_owner == 'HMCL-dev' }}
+    strategy:
+      fail-fast: false
+      max-parallel: 1
+      matrix:
+        include:
+          - channel: dev
+            task: checkUpdateDev
+          - channel: stable
+            task: checkUpdateStable
+    runs-on: ubuntu-latest
+    name: check-update-${{ matrix.channel }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+          fetch-tags: true
+      - name: Set up JDK
+        uses: actions/setup-java@v5
+        with:
+          distribution: 'temurin'
+          java-version: '25'
+      - name: Fetch last version
+        run: ./gradlew ${{ matrix.task }} --no-daemon --info --stacktrace
+      - name: Check for existing tags
+        run: if [ -z "$(git tag -l "$HMCL_TAG_NAME")" ]; then echo "continue=true" >> $GITHUB_ENV; fi
+      - name: Download artifacts
+        if: ${{ env.continue == 'true' }}
+        run: |
+          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.exe"
+          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.exe.sha256"
+          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.jar"
+          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.jar.sha256"
+          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.sh"
+          wget "$HMCL_CI_DOWNLOAD_BASE_URI/HMCL-$HMCL_VERSION.sh.sha256"
+      - name: Verify artifacts
+        if: ${{ env.continue == 'true' }}
+        run: |
+          export JAR_SHA256=$(cat HMCL-$HMCL_VERSION.jar.sha256 | tr -d '\n')
+          export EXE_SHA256=$(cat HMCL-$HMCL_VERSION.exe.sha256 | tr -d '\n')
+          export SH_SHA256=$(cat HMCL-$HMCL_VERSION.sh.sha256 | tr -d '\n')
+          
+          echo "$JAR_SHA256  HMCL-$HMCL_VERSION.jar" | sha256sum -c
+          echo "$EXE_SHA256  HMCL-$HMCL_VERSION.exe" | sha256sum -c
+          echo "$SH_SHA256  HMCL-$HMCL_VERSION.sh" | sha256sum -c
+      - name: Generate release note
+        if: ${{ env.continue == 'true' }}
+        run: |
+          # GitHub Release Note
+          echo "&nbsp;**[Changelog](https://docs.hmcl.net/changelog/${{ matrix.channel }}.html#HMCL-$HMCL_VERSION)** (Chinese)" >> RELEASE_NOTE
+          echo "" >> RELEASE_NOTE
+          echo "| File | SHA-256 Checksum |"  >> RELEASE_NOTE
+          echo "| ---  | --- |" >> RELEASE_NOTE
+          echo "| [HMCL-$HMCL_VERSION.exe]($GH_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.exe) | \`$(cat HMCL-$HMCL_VERSION.exe.sha256)\` |" >> RELEASE_NOTE
+          echo "| [HMCL-$HMCL_VERSION.jar]($GH_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.jar) | \`$(cat HMCL-$HMCL_VERSION.jar.sha256)\` |" >> RELEASE_NOTE
+          echo "| [HMCL-$HMCL_VERSION.sh]($GH_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.sh)   | \`$(cat HMCL-$HMCL_VERSION.sh.sha256)\` |"  >> RELEASE_NOTE
+          
+          # CNB Release Note
+          echo "[更新日志](https://docs.hmcl.net/changelog/${{ matrix.channel }}.html#HMCL-$HMCL_VERSION)" >> CNB_RELEASE_NOTE
+          echo "" >> CNB_RELEASE_NOTE
+          echo "| 文件 | SHA-256 校验码 |"  >> CNB_RELEASE_NOTE
+          echo "| :---  | --- |" >> CNB_RELEASE_NOTE
+          echo "| [HMCL-$HMCL_VERSION.exe]($CNB_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.exe) | \`$(cat HMCL-$HMCL_VERSION.exe.sha256)\` |" >> CNB_RELEASE_NOTE
+          echo "| [HMCL-$HMCL_VERSION.jar]($CNB_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.jar) | \`$(cat HMCL-$HMCL_VERSION.jar.sha256)\` |" >> CNB_RELEASE_NOTE
+          echo "| [HMCL-$HMCL_VERSION.sh]($CNB_DOWNLOAD_BASE_URL/v$HMCL_VERSION/HMCL-$HMCL_VERSION.sh)   | \`$(cat HMCL-$HMCL_VERSION.sh.sha256)\` |"  >> CNB_RELEASE_NOTE
+        env:
+          GH_DOWNLOAD_BASE_URL: https://github.com/${{ github.repository }}/releases/download
+          CNB_DOWNLOAD_BASE_URL: https://cnb.cool/HMCL-dev/HMCL/-/releases/download
+      - name: Create GitHub release
+        if: ${{ env.continue == 'true' }}
+        run: |
+          gh release create "${{ env.HMCL_TAG_NAME }}" \
+            "HMCL-${{ env.HMCL_VERSION }}.exe" \
+            "HMCL-${{ env.HMCL_VERSION }}.jar" \
+            "HMCL-${{ env.HMCL_VERSION }}.sh" \
+            --target "${{ env.HMCL_COMMIT_SHA }}" \
+            --title "${{ env.HMCL_TAG_NAME }}" \
+            --notes-file RELEASE_NOTE \
+            --prerelease
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Install git-cnb
+        if: ${{ env.continue == 'true' }}
+        run: go install "cnb.cool/looc/git-cnb@$GIT_CNB_VERSION"
+        env:
+          GIT_CNB_VERSION: '1.1.2'
+      - name: Create CNB release
+        if: ${{ env.continue == 'true' }}
+        run: |
+          echo "Uploading tags to CNB"
+          git fetch --tags
+          git push "https://cnb:${{ secrets.CNB_SYNC_TOKEN }}@cnb.cool/$CNB_REPO.git" "$HMCL_TAG_NAME"
+          
+          echo "Creating CNB release"
+          ~/go/bin/git-cnb release create \
+             --repo "$CNB_REPO" \
+             --tag "$HMCL_TAG_NAME" \
+             --name "HMCL $HMCL_VERSION" \
+             --body "$(cat CNB_RELEASE_NOTE)" \
+             --prerelease true
+
+           echo "Uploading HMCL-$HMCL_VERSION.jar"
+           ~/go/bin/git-cnb release asset-upload --repo="$CNB_REPO" --tag-name "$HMCL_TAG_NAME" --file-name "HMCL-$HMCL_VERSION.jar"
+
+           echo "Uploading HMCL-$HMCL_VERSION.exe"
+           ~/go/bin/git-cnb release asset-upload --repo="$CNB_REPO" --tag-name "$HMCL_TAG_NAME" --file-name "HMCL-$HMCL_VERSION.exe"
+
+           echo "Uploading HMCL-$HMCL_VERSION.sh"
+           ~/go/bin/git-cnb release asset-upload --repo="$CNB_REPO" --tag-name "$HMCL_TAG_NAME" --file-name "HMCL-$HMCL_VERSION.sh"
+        env:
+          CNB_TOKEN: ${{ secrets.CNB_SYNC_TOKEN }}
+          CNB_REPO: HMCL-dev/HMCL
@@ -19,6 +19,9 @@ hmcl-exported-logs-*
 /.local/
 /.cache/

+# IANA Language Subtag Registry
+language-subtag-registry
+
 # gradle build
 /build/
 /HMCL/build/
@@ -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,15 +125,24 @@ 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.glass.ui",
    "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",
+    "javafx.graphics/com.sun.javafx.tk.quantum",
    "javafx.controls/javafx.scene.control.skin",
    "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 +208,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()) {
@@ -335,7 +342,7 @@ tasks.register<JavaExec>("run") {
    classpath = files(jarPath)
    workingDir = rootProject.rootDir

-    val vmOptions = parseToolOptions(System.getenv("HMCL_JAVA_OPTS"))
+    val vmOptions = parseToolOptions(System.getenv("HMCL_JAVA_OPTS") ?: "-Xmx1g")
    if (vmOptions.none { it.startsWith("-Dhmcl.offline.auth.restricted=") })
        vmOptions += "-Dhmcl.offline.auth.restricted=false"

@@ -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());
+    }
+}
@@ -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;
+    }
+}
@@ -0,0 +1,533 @@
+/*
+ * 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.controls.events.JFXDialogEvent;
+import com.jfoenix.converters.DialogTransitionConverter;
+import com.jfoenix.effects.JFXDepthManager;
+import com.jfoenix.transitions.CachedTransition;
+import javafx.animation.Interpolator;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
+import javafx.animation.Transition;
+import javafx.beans.DefaultProperty;
+import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.ObjectPropertyBase;
+import javafx.beans.property.SimpleBooleanProperty;
+import javafx.css.CssMetaData;
+import javafx.css.SimpleStyleableObjectProperty;
+import javafx.css.Styleable;
+import javafx.css.StyleableObjectProperty;
+import javafx.css.StyleableProperty;
+import javafx.event.Event;
+import javafx.event.EventHandler;
+import javafx.geometry.Pos;
+import javafx.scene.CacheHint;
+import javafx.scene.Node;
+import javafx.scene.SnapshotParameters;
+import javafx.scene.image.ImageView;
+import javafx.scene.image.WritableImage;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.Background;
+import javafx.scene.layout.BackgroundFill;
+import javafx.scene.layout.CornerRadii;
+import javafx.scene.layout.Region;
+import javafx.scene.layout.StackPane;
+import javafx.scene.paint.Color;
+import javafx.util.Duration;
+import org.jackhuang.hmcl.ui.animation.Motion;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/// Note: for JFXDialog to work properly, the root node **MUST**
+/// be of type [StackPane]
+///
+/// @author Shadi Shaheen
+/// @version 1.0
+/// @since 2016-03-09
+@DefaultProperty(value = "content")
+public class JFXDialog extends StackPane {
+
+    private static final double INITIAL_SCALE = 0.8;
+
+    // public static enum JFXDialogLayout{PLAIN, HEADING, ACTIONS, BACKDROP};
+    public enum DialogTransition {
+        CENTER, NONE
+    }
+
+    private StackPane contentHolder;
+
+    private double offsetX = 0;
+    private double offsetY = 0;
+
+    private StackPane dialogContainer;
+    private Region content;
+    private Transition animation;
+
+    private final EventHandler<? super MouseEvent> closeHandler = e -> close();
+
+    /// creates empty JFXDialog control with CENTER animation type
+    public JFXDialog() {
+        this(null, null, DialogTransition.CENTER);
+    }
+
+    /// creates empty JFXDialog control with a specified animation type
+    public JFXDialog(DialogTransition transition) {
+        this(null, null, transition);
+    }
+
+    /// creates JFXDialog control with a specified animation type, the animation type
+    /// can be one of the following:
+    ///
+    ///   - CENTER
+    ///   - TOP
+    ///   - RIGHT
+    ///   - BOTTOM
+    ///   - LEFT
+    ///
+    /// @param dialogContainer is the parent of the dialog, it
+    /// @param content         the content of dialog
+    /// @param transitionType  the animation type
+    public JFXDialog(StackPane dialogContainer, Region content, DialogTransition transitionType) {
+        initialize();
+        setContent(content);
+        setDialogContainer(dialogContainer);
+        this.transitionType.set(transitionType);
+        // init change listeners
+        initChangeListeners();
+    }
+
+    /// creates JFXDialog control with a specified animation type that
+    /// is closed when clicking on the overlay, the animation type
+    /// can be one of the following:
+    ///
+    ///   - CENTER
+    ///   - TOP
+    ///   - RIGHT
+    ///   - BOTTOM
+    ///   - LEFT
+    public JFXDialog(StackPane dialogContainer, Region content, DialogTransition transitionType, boolean overlayClose) {
+        setOverlayClose(overlayClose);
+        initialize();
+        setContent(content);
+        setDialogContainer(dialogContainer);
+        this.transitionType.set(transitionType);
+        // init change listeners
+        initChangeListeners();
+    }
+
+    private void initChangeListeners() {
+        overlayCloseProperty().addListener((o, oldVal, newVal) -> {
+            if (newVal) {
+                this.addEventHandler(MouseEvent.MOUSE_PRESSED, closeHandler);
+            } else {
+                this.removeEventHandler(MouseEvent.MOUSE_PRESSED, closeHandler);
+            }
+        });
+    }
+
+    private void initialize() {
+        this.setVisible(false);
+        this.getStyleClass().add(DEFAULT_STYLE_CLASS);
+        this.transitionType.addListener((o, oldVal, newVal) -> {
+            animation = getShowAnimation(transitionType.get());
+        });
+
+        contentHolder = new StackPane();
+        contentHolder.setBackground(new Background(new BackgroundFill(Color.WHITE, new CornerRadii(2), null)));
+        JFXDepthManager.setDepth(contentHolder, 4);
+        contentHolder.setPickOnBounds(false);
+        // ensure stackpane is never resized beyond it's preferred size
+        contentHolder.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
+        this.getChildren().add(contentHolder);
+        this.getStyleClass().add("jfx-dialog-overlay-pane");
+        StackPane.setAlignment(contentHolder, Pos.CENTER);
+        this.setBackground(new Background(new BackgroundFill(Color.rgb(0, 0, 0, 0.1), null, null)));
+        // close the dialog if clicked on the overlay pane
+        if (overlayClose.get()) {
+            this.addEventHandler(MouseEvent.MOUSE_PRESSED, closeHandler);
+        }
+        // prevent propagating the events to overlay pane
+        contentHolder.addEventHandler(MouseEvent.ANY, Event::consume);
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Setters / Getters                                                       *
+     *                                                                         *
+     **************************************************************************/
+
+    /// @return the dialog container
+    public StackPane getDialogContainer() {
+        return dialogContainer;
+    }
+
+    /// set the dialog container
+    /// Note: the dialog container must be StackPane, its the container for the dialog to be shown in.
+    public void setDialogContainer(StackPane dialogContainer) {
+        if (dialogContainer != null) {
+            this.dialogContainer = dialogContainer;
+            // FIXME: need to be improved to consider only the parent boundary
+            offsetX = dialogContainer.getBoundsInLocal().getWidth();
+            offsetY = dialogContainer.getBoundsInLocal().getHeight();
+            animation = getShowAnimation(transitionType.get());
+        }
+    }
+
+    /// @return dialog content node
+    public Region getContent() {
+        return content;
+    }
+
+    /// set the content of the dialog
+    public void setContent(Region content) {
+        if (content != null) {
+            this.content = content;
+            this.content.setPickOnBounds(false);
+            contentHolder.getChildren().setAll(content);
+        }
+    }
+
+    /// indicates whether the dialog will close when clicking on the overlay or not
+    private final BooleanProperty overlayClose = new SimpleBooleanProperty(true);
+
+    public final BooleanProperty overlayCloseProperty() {
+        return this.overlayClose;
+    }
+
+    public final boolean isOverlayClose() {
+        return this.overlayCloseProperty().get();
+    }
+
+    public final void setOverlayClose(final boolean overlayClose) {
+        this.overlayCloseProperty().set(overlayClose);
+    }
+
+    /// if sets to true, the content of dialog container will be cached and replaced with an image
+    /// when displaying the dialog (better performance).
+    /// this is recommended if the content behind the dialog will not change during the showing
+    /// period
+    private final BooleanProperty cacheContainer = new SimpleBooleanProperty(false);
+
+    public boolean isCacheContainer() {
+        return cacheContainer.get();
+    }
+
+    public BooleanProperty cacheContainerProperty() {
+        return cacheContainer;
+    }
+
+    public void setCacheContainer(boolean cacheContainer) {
+        this.cacheContainer.set(cacheContainer);
+    }
+
+    /// it will show the dialog in the specified container
+    public void show(StackPane dialogContainer) {
+        this.setDialogContainer(dialogContainer);
+        showDialog();
+    }
+
+    private ArrayList<Node> tempContent;
+
+    /**
+     * show the dialog inside its parent container
+     */
+    public void show() {
+        this.setDialogContainer(dialogContainer);
+        showDialog();
+    }
+
+    private void showDialog() {
+        if (dialogContainer == null) {
+            throw new RuntimeException("ERROR: JFXDialog container is not set!");
+        }
+        if (isCacheContainer()) {
+            tempContent = new ArrayList<>(dialogContainer.getChildren());
+
+            SnapshotParameters snapShotparams = new SnapshotParameters();
+            snapShotparams.setFill(Color.TRANSPARENT);
+            WritableImage temp = dialogContainer.snapshot(snapShotparams,
+                    new WritableImage((int) dialogContainer.getWidth(),
+                            (int) dialogContainer.getHeight()));
+            ImageView tempImage = new ImageView(temp);
+            tempImage.setCache(true);
+            tempImage.setCacheHint(CacheHint.SPEED);
+            dialogContainer.getChildren().setAll(tempImage, this);
+        } else {
+            //prevent error if opening an already opened dialog
+            dialogContainer.getChildren().remove(this);
+            tempContent = null;
+            dialogContainer.getChildren().add(this);
+        }
+
+        if (animation != null) {
+            animation.play();
+        } else {
+            setVisible(true);
+            setOpacity(1);
+            Event.fireEvent(JFXDialog.this, new JFXDialogEvent(JFXDialogEvent.OPENED));
+        }
+    }
+
+    /**
+     * close the dialog
+     */
+    public void close() {
+        if (animation != null) {
+            animation.setRate(-2);
+            animation.play();
+            animation.setOnFinished(e -> {
+                closeDialog();
+            });
+        } else {
+            setOpacity(0);
+            setVisible(false);
+            closeDialog();
+        }
+    }
+
+    private void closeDialog() {
+        resetProperties();
+        Event.fireEvent(JFXDialog.this, new JFXDialogEvent(JFXDialogEvent.CLOSED));
+        if (tempContent == null) {
+            dialogContainer.getChildren().remove(this);
+        } else {
+            dialogContainer.getChildren().setAll(tempContent);
+        }
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Transitions                                                             *
+     *                                                                         *
+     **************************************************************************/
+
+    private Transition getShowAnimation(DialogTransition transitionType) {
+        Transition animation = null;
+        if (contentHolder != null) {
+            animation = switch (transitionType) {
+                case CENTER -> {
+                    contentHolder.setScaleX(INITIAL_SCALE);
+                    contentHolder.setScaleY(INITIAL_SCALE);
+                    yield new CenterTransition();
+                }
+                case NONE -> {
+                    contentHolder.setScaleX(1);
+                    contentHolder.setScaleY(1);
+                    contentHolder.setTranslateX(0);
+                    contentHolder.setTranslateY(0);
+                    yield null;
+                }
+            };
+        }
+        if (animation != null) {
+            animation.setOnFinished(finish ->
+                    Event.fireEvent(JFXDialog.this, new JFXDialogEvent(JFXDialogEvent.OPENED)));
+        }
+        return animation;
+    }
+
+    private void resetProperties() {
+        this.setVisible(false);
+        contentHolder.setTranslateX(0);
+        contentHolder.setTranslateY(0);
+        contentHolder.setScaleX(1);
+        contentHolder.setScaleY(1);
+    }
+
+    private final class CenterTransition extends CachedTransition {
+        private static final Interpolator INTERPOLATOR = Motion.EMPHASIZED_DECELERATE;
+
+        CenterTransition() {
+            super(contentHolder, new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(contentHolder.scaleXProperty(), INITIAL_SCALE, INTERPOLATOR),
+                            new KeyValue(contentHolder.scaleYProperty(), INITIAL_SCALE, INTERPOLATOR),
+                            new KeyValue(JFXDialog.this.visibleProperty(), false, Motion.LINEAR)
+                    ),
+                    new KeyFrame(Duration.millis(10),
+                            new KeyValue(JFXDialog.this.visibleProperty(), true, Motion.LINEAR),
+                            new KeyValue(JFXDialog.this.opacityProperty(), 0, INTERPOLATOR)
+                    ),
+                    new KeyFrame(Motion.EXTRA_LONG4,
+                            new KeyValue(contentHolder.scaleXProperty(), 1, INTERPOLATOR),
+                            new KeyValue(contentHolder.scaleYProperty(), 1, INTERPOLATOR),
+                            new KeyValue(JFXDialog.this.visibleProperty(), true, Motion.LINEAR),
+                            new KeyValue(JFXDialog.this.opacityProperty(), 1, INTERPOLATOR)
+                    ))
+            );
+            // reduce the number to increase the shifting , increase number to reduce shifting
+            setCycleDuration(Duration.seconds(0.4));
+            setDelay(Duration.ZERO);
+        }
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Stylesheet Handling                                                     *
+     *                                                                         *
+     **************************************************************************/
+
+    /// Initialize the style class to 'jfx-dialog'.
+    ///
+    /// This is the selector class from which CSS can be used to style
+    /// this control.
+    private static final String DEFAULT_STYLE_CLASS = "jfx-dialog";
+
+    /// dialog transition type property, it can be one of the following:
+    ///
+    ///   - CENTER
+    ///   - TOP
+    ///   - RIGHT
+    ///   - BOTTOM
+    ///   - LEFT
+    ///   - NONE
+    private final StyleableObjectProperty<DialogTransition> transitionType = new SimpleStyleableObjectProperty<>(
+            StyleableProperties.DIALOG_TRANSITION,
+            JFXDialog.this,
+            "dialogTransition",
+            DialogTransition.CENTER);
+
+    public DialogTransition getTransitionType() {
+        return transitionType == null ? DialogTransition.CENTER : transitionType.get();
+    }
+
+    public StyleableObjectProperty<DialogTransition> transitionTypeProperty() {
+        return this.transitionType;
+    }
+
+    public void setTransitionType(DialogTransition transition) {
+        this.transitionType.set(transition);
+    }
+
+    private static final class StyleableProperties {
+        private static final CssMetaData<JFXDialog, DialogTransition> DIALOG_TRANSITION =
+                new CssMetaData<JFXDialog, DialogTransition>("-jfx-dialog-transition",
+                        DialogTransitionConverter.getInstance(),
+                        DialogTransition.CENTER) {
+                    @Override
+                    public boolean isSettable(JFXDialog control) {
+                        return control.transitionType == null || !control.transitionType.isBound();
+                    }
+
+                    @Override
+                    public StyleableProperty<DialogTransition> getStyleableProperty(JFXDialog control) {
+                        return control.transitionTypeProperty();
+                    }
+                };
+
+        private static final List<CssMetaData<? extends Styleable, ?>> CHILD_STYLEABLES;
+
+        static {
+            final List<CssMetaData<? extends Styleable, ?>> styleables =
+                    new ArrayList<>(StackPane.getClassCssMetaData());
+            Collections.addAll(styleables,
+                    DIALOG_TRANSITION
+            );
+            CHILD_STYLEABLES = Collections.unmodifiableList(styleables);
+        }
+    }
+
+    @Override
+    public List<CssMetaData<? extends Styleable, ?>> getCssMetaData() {
+        return getClassCssMetaData();
+    }
+
+    public static List<CssMetaData<? extends Styleable, ?>> getClassCssMetaData() {
+        return StyleableProperties.CHILD_STYLEABLES;
+    }
+
+
+    /***************************************************************************
+     *                                                                         *
+     * Custom Events                                                           *
+     *                                                                         *
+     **************************************************************************/
+
+    private final ObjectProperty<EventHandler<? super JFXDialogEvent>> onDialogClosedProperty = new ObjectPropertyBase<EventHandler<? super JFXDialogEvent>>() {
+        @Override
+        protected void invalidated() {
+            setEventHandler(JFXDialogEvent.CLOSED, get());
+        }
+
+        @Override
+        public Object getBean() {
+            return JFXDialog.this;
+        }
+
+        @Override
+        public String getName() {
+            return "onClosed";
+        }
+    };
+
+    /**
+     * Defines a function to be called when the dialog is closed.
+     * Note: it will be triggered after the close animation is finished.
+     */
+    public ObjectProperty<EventHandler<? super JFXDialogEvent>> onDialogClosedProperty() {
+        return onDialogClosedProperty;
+    }
+
+    public void setOnDialogClosed(EventHandler<? super JFXDialogEvent> handler) {
+        onDialogClosedProperty().set(handler);
+    }
+
+    public EventHandler<? super JFXDialogEvent> getOnDialogClosed() {
+        return onDialogClosedProperty().get();
+    }
+
+    private final ObjectProperty<EventHandler<? super JFXDialogEvent>> onDialogOpenedProperty = new ObjectPropertyBase<>() {
+        @Override
+        protected void invalidated() {
+            setEventHandler(JFXDialogEvent.OPENED, get());
+        }
+
+        @Override
+        public Object getBean() {
+            return JFXDialog.this;
+        }
+
+        @Override
+        public String getName() {
+            return "onOpened";
+        }
+    };
+
+    /**
+     * Defines a function to be called when the dialog is opened.
+     * Note: it will be triggered after the show animation is finished.
+     */
+    public ObjectProperty<EventHandler<? super JFXDialogEvent>> onDialogOpenedProperty() {
+        return onDialogOpenedProperty;
+    }
+
+    public void setOnDialogOpened(EventHandler<? super JFXDialogEvent> handler) {
+        onDialogOpenedProperty().set(handler);
+    }
+
+    public EventHandler<? super JFXDialogEvent> getOnDialogOpened() {
+        return onDialogOpenedProperty().get();
+    }
+}
@@ -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;
+    }
+}
@@ -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;
+    }
+
+}
@@ -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);
+        }
+    }
+
+}
@@ -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));
+        }
+    }
+}
@@ -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;
+    }
+}
@@ -0,0 +1,258 @@
+/*
+ * 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.beans.property.ObjectProperty;
+import javafx.beans.property.SimpleObjectProperty;
+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);
+
+    private final ObjectProperty<Color> textFill = new SimpleObjectProperty<>(Color.BLACK);
+    private final ObjectProperty<Background> colorBoxBackground = new SimpleObjectProperty<>(null);
+
+    public JFXColorPickerSkin(final ColorPicker colorPicker) {
+        super(colorPicker);
+
+        // create displayNode
+        displayNode = new Label("");
+        displayNode.getStyleClass().add("color-label");
+        displayNode.setMouseTransparent(true);
+        displayNode.textFillProperty().bind(textFill);
+
+        // label graphic
+        colorBox = new JFXClippedPane(displayNode);
+        colorBox.getStyleClass().add("color-box");
+        colorBox.setManaged(false);
+        colorBox.backgroundProperty().bind(colorBoxBackground);
+        initColor();
+        final JFXRippler rippler = new JFXRippler(colorBox, JFXRippler.RipplerMask.FIT);
+        rippler.ripplerFillProperty().bind(textFill);
+        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) -> {
+                colorBoxBackground.set(new Background(new BackgroundFill(colorCircle.getFill(), new CornerRadii(3), Insets.EMPTY)));
+                colorBox.getChildren().remove(colorCircle);
+            });
+            animateColor.play();
+        }
+        // update label color
+        textFill.set(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
+        colorBoxBackground.set(new Background(new BackgroundFill(circleColor, new CornerRadii(3), Insets.EMPTY)));
+        // update label color
+        textFill.set(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;
+    }
+}
@@ -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);
+    }
+
+}
@@ -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);
+        }
+    }
+}
@@ -0,0 +1,407 @@
+/*
+ * 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.Scene;
+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(hexTab);
+        tabs.getTabs().add(rgbTab);
+        tabs.getTabs().add(hsbTab);
+
+        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);
+    }
+}
@@ -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"));
+    }
+}
@@ -0,0 +1,96 @@
+// Copy from https://github.com/sshahine/JFoenix/blob/d427fd801a338f934307ba41ce604eb5c79f0b20/jfoenix/src/main/java/com/jfoenix/skins/JFXListViewSkin.java
+
+/*
+ * 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.skins.ListViewSkin;
+import com.jfoenix.controls.JFXListView;
+import com.jfoenix.effects.JFXDepthManager;
+import javafx.scene.control.ListCell;
+import javafx.scene.control.skin.VirtualFlow;
+import javafx.scene.layout.Region;
+import org.jackhuang.hmcl.ui.FXUtils;
+
+// https://github.com/HMCL-dev/HMCL/issues/4720
+public class JFXListViewSkin<T> extends ListViewSkin<T> {
+
+    private final VirtualFlow<ListCell<T>> flow;
+
+    @SuppressWarnings("unchecked")
+    public JFXListViewSkin(final JFXListView<T> listView) {
+        super(listView);
+        flow = (VirtualFlow<ListCell<T>>) getChildren().get(0);
+        JFXDepthManager.setDepth(flow, listView.depthProperty().get());
+        listView.depthProperty().addListener((o, oldVal, newVal) -> JFXDepthManager.setDepth(flow, newVal));
+
+        if (!Boolean.TRUE.equals(listView.getProperties().get("no-smooth-scrolling"))) {
+            FXUtils.smoothScrolling(flow);
+        }
+    }
+
+    @Override
+    protected double computePrefWidth(double height, double topInset, double rightInset, double bottomInset, double leftInset) {
+        return 200;
+    }
+
+    @Override
+    protected double computePrefHeight(double width, double topInset, double rightInset, double bottomInset, double leftInset) {
+        final int itemsCount = getSkinnable().getItems().size();
+        if (getSkinnable().maxHeightProperty().isBound() || itemsCount <= 0) {
+            return super.computePrefHeight(width, topInset, rightInset, bottomInset, leftInset);
+        }
+
+        final double fixedCellSize = getSkinnable().getFixedCellSize();
+        double computedHeight = fixedCellSize != Region.USE_COMPUTED_SIZE ?
+                fixedCellSize * itemsCount + snapVerticalInsets() : estimateHeight();
+        double height = super.computePrefHeight(width, topInset, rightInset, bottomInset, leftInset);
+        if (height > computedHeight) {
+            height = computedHeight;
+        }
+
+        if (getSkinnable().getMaxHeight() > 0 && computedHeight > getSkinnable().getMaxHeight()) {
+            return getSkinnable().getMaxHeight();
+        }
+
+        return height;
+    }
+
+    private double estimateHeight() {
+        // compute the border/padding for the list
+        double borderWidth = snapVerticalInsets();
+        // compute the gap between list cells
+
+        JFXListView<T> listview = (JFXListView<T>) getSkinnable();
+        double gap = listview.isExpanded() ? ((JFXListView<T>) getSkinnable()).getVerticalGap() * (getSkinnable().getItems()
+                .size()) : 0;
+        // compute the height of each list cell
+        double cellsHeight = 0;
+        for (int i = 0; i < flow.getCellCount(); i++) {
+            ListCell<T> cell = flow.getCell(i);
+            cellsHeight += cell.getHeight();
+        }
+        return cellsHeight + gap + borderWidth;
+    }
+
+    private double snapVerticalInsets() {
+        return getSkinnable().snappedBottomInset() + getSkinnable().snappedTopInset();
+    }
+
+}
@@ -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;
+        };
+    }
+}
@@ -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;
+    }
+}
@@ -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);
+            }
+        }
+    }
+}
@@ -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();
+        }
+    }
+}
@@ -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;
+        }
+    }
+}
@@ -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;
+        }
+    }
+}
@@ -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() {
+    }
+
+}
@@ -21,6 +21,8 @@ import org.jackhuang.hmcl.util.FileSaver;
 import org.jackhuang.hmcl.util.SelfDependencyPatcher;
 import org.jackhuang.hmcl.util.SwingUtils;
 import org.jackhuang.hmcl.java.JavaRuntime;
+import org.jackhuang.hmcl.util.io.FileUtils;
+import org.jackhuang.hmcl.util.io.JarUtils;
 import org.jackhuang.hmcl.util.platform.OperatingSystem;

 import java.io.IOException;
@@ -28,6 +30,7 @@ import java.lang.invoke.MethodHandle;
 import java.lang.invoke.MethodHandles;
 import java.lang.invoke.MethodType;
 import java.nio.file.Files;
+import java.nio.file.Path;
 import java.util.concurrent.CancellationException;

 import static org.jackhuang.hmcl.util.logging.Logger.LOG;
@@ -49,7 +52,7 @@ public final class EntryPoint {
        setupJavaFXVMOptions();
        checkDirectoryPath();

-        if (OperatingSystem.CURRENT_OS == OperatingSystem.MACOS)
+        if (OperatingSystem.CURRENT_OS == OperatingSystem.MACOS && !isInsideMacAppBundle())
            initIcon();

        checkJavaFX();
@@ -159,6 +162,25 @@ public final class EntryPoint {
        }
    }

+    private static boolean isInsideMacAppBundle() {
+        Path thisJar = JarUtils.thisJarPath();
+        if (thisJar == null)
+            return false;
+
+        for (Path current = thisJar.getParent();
+             current != null && current.getParent() != null;
+             current = current.getParent()
+        ) {
+            if ("Contents".equals(FileUtils.getName(current))
+                    && FileUtils.getName(current.getParent()).endsWith(".app")
+                    && Files.exists(current.resolve("Info.plist"))
+            ) {
+                return true;
+            }
+        }
+        return false;
+    }
+
    private static void initIcon() {
        try {
            if (java.awt.Taskbar.isTaskbarSupported()) {
@@ -20,11 +20,13 @@ package org.jackhuang.hmcl;
 import javafx.application.Application;
 import javafx.application.Platform;
 import javafx.beans.value.ObservableBooleanValue;
+import javafx.geometry.Rectangle2D;
 import javafx.scene.control.Alert;
 import javafx.scene.control.Alert.AlertType;
 import javafx.scene.control.ButtonType;
 import javafx.scene.input.Clipboard;
 import javafx.scene.input.DataFormat;
+import javafx.stage.Screen;
 import javafx.stage.Stage;
 import org.jackhuang.hmcl.setting.ConfigHolder;
 import org.jackhuang.hmcl.setting.SambaException;
@@ -54,6 +56,7 @@ import java.net.CookieManager;
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
+import java.text.DecimalFormat;
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.Objects;
@@ -79,6 +82,18 @@ public final class Launcher extends Application {
        LOG.info("Dark Mode: " + Optional.ofNullable(FXUtils.DARK_MODE).map(ObservableBooleanValue::get).orElse(false));
        LOG.info("Reduced Motion: " + Objects.requireNonNullElse(FXUtils.REDUCED_MOTION, false));

+        if (Screen.getScreens().isEmpty()) {
+            LOG.info("No screen");
+        } else {
+            StringBuilder builder = new StringBuilder("Screens:");
+            int count = 0;
+            for (Screen screen : Screen.getScreens()) {
+                builder.append("\n - Screen ").append(++count).append(": ");
+                appendScreen(builder, screen);
+            }
+            LOG.info(builder.toString());
+        }
+
        try {
            try {
                ConfigHolder.init();
@@ -131,6 +146,38 @@ public final class Launcher extends Application {
        }
    }

+    private static void appendScreen(StringBuilder builder, Screen screen) {
+        Rectangle2D bounds = screen.getBounds();
+        double scale = screen.getOutputScaleX();
+
+        builder.append(Math.round(bounds.getWidth() * scale));
+        builder.append('x');
+        builder.append(Math.round(bounds.getHeight() * scale));
+
+        DecimalFormat decimalFormat = new DecimalFormat("#.##");
+
+        if (scale != 1.0) {
+            builder.append(" @ ");
+            builder.append(decimalFormat.format(scale));
+            builder.append('x');
+        }
+
+        double dpi = screen.getDpi();
+        builder.append(' ');
+        builder.append(decimalFormat.format(dpi));
+        builder.append("dpi");
+
+        builder.append(" in ")
+                .append(Math.round(Math.sqrt(bounds.getWidth() * bounds.getWidth() + bounds.getHeight() * bounds.getHeight()) / dpi))
+                .append('"');
+
+        builder.append(" (").append(decimalFormat.format(bounds.getMinX()))
+                .append(", ").append(decimalFormat.format(bounds.getMinY()))
+                .append(", ").append(decimalFormat.format(bounds.getMaxX()))
+                .append(", ").append(decimalFormat.format(bounds.getMaxY()))
+                .append(")");
+    }
+
    private static ButtonType showAlert(AlertType alertType, String contentText, ButtonType... buttons) {
        return new Alert(alertType, contentText, buttons).showAndWait().orElse(null);
    }
@@ -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";
@@ -25,22 +25,23 @@ import org.jackhuang.hmcl.Metadata;
 import org.jackhuang.hmcl.download.LibraryAnalyzer;
 import org.jackhuang.hmcl.event.Event;
 import org.jackhuang.hmcl.event.EventManager;
+import org.jackhuang.hmcl.java.JavaRuntime;
 import org.jackhuang.hmcl.mod.ModAdviser;
 import org.jackhuang.hmcl.mod.Modpack;
 import org.jackhuang.hmcl.mod.ModpackConfiguration;
 import org.jackhuang.hmcl.mod.ModpackProvider;
 import org.jackhuang.hmcl.setting.Profile;
-import org.jackhuang.hmcl.util.FileSaver;
 import org.jackhuang.hmcl.setting.VersionIconType;
 import org.jackhuang.hmcl.setting.VersionSetting;
 import org.jackhuang.hmcl.ui.FXUtils;
+import org.jackhuang.hmcl.util.FileSaver;
 import org.jackhuang.hmcl.util.Lang;
 import org.jackhuang.hmcl.util.StringUtils;
 import org.jackhuang.hmcl.util.gson.JsonUtils;
 import org.jackhuang.hmcl.util.io.FileUtils;
-import org.jackhuang.hmcl.java.JavaRuntime;
 import org.jackhuang.hmcl.util.platform.OperatingSystem;
 import org.jackhuang.hmcl.util.platform.SystemInfo;
+import org.jackhuang.hmcl.util.versioning.GameVersionNumber;
 import org.jackhuang.hmcl.util.versioning.VersionNumber;
 import org.jetbrains.annotations.Nullable;

@@ -54,8 +55,8 @@ import java.util.stream.Collectors;
 import java.util.stream.Stream;

 import static org.jackhuang.hmcl.setting.ConfigHolder.config;
-import static org.jackhuang.hmcl.util.logging.Logger.LOG;
 import static org.jackhuang.hmcl.util.Pair.pair;
+import static org.jackhuang.hmcl.util.logging.Logger.LOG;

 public final class HMCLGameRepository extends DefaultGameRepository {
    private final Profile profile;
@@ -318,23 +319,32 @@ public final class HMCLGameRepository extends DefaultGameRepository {
                LibraryAnalyzer libraryAnalyzer = LibraryAnalyzer.analyze(version, null);
                if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.FABRIC))
                    return VersionIconType.FABRIC.getIcon();
+                else if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.QUILT))
+                    return VersionIconType.QUILT.getIcon();
+                else if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.NEO_FORGE))
+                    return VersionIconType.NEO_FORGE.getIcon();
                else if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.FORGE))
                    return VersionIconType.FORGE.getIcon();
                else if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.CLEANROOM))
                    return VersionIconType.CLEANROOM.getIcon();
-                else if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.NEO_FORGE))
-                    return VersionIconType.NEO_FORGE.getIcon();
-                else if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.QUILT))
-                    return VersionIconType.QUILT.getIcon();
-                else if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.OPTIFINE))
-                    return VersionIconType.OPTIFINE.getIcon();
                else if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.LITELOADER))
                    return VersionIconType.CHICKEN.getIcon();
-                else
-                    return VersionIconType.FURNACE.getIcon();
+                else if (libraryAnalyzer.has(LibraryAnalyzer.LibraryType.OPTIFINE))
+                    return VersionIconType.OPTIFINE.getIcon();
            }

-            return VersionIconType.DEFAULT.getIcon();
+            String gameVersion = getGameVersion(version).orElse(null);
+            if (gameVersion != null) {
+                GameVersionNumber versionNumber = GameVersionNumber.asGameVersion(gameVersion);
+                if (versionNumber.isAprilFools()) {
+                    return VersionIconType.APRIL_FOOLS.getIcon();
+                } else if (versionNumber instanceof GameVersionNumber.LegacySnapshot) {
+                    return VersionIconType.COMMAND.getIcon();
+                } else if (versionNumber instanceof GameVersionNumber.Old) {
+                    return VersionIconType.CRAFT_TABLE.getIcon();
+                }
+            }
+            return VersionIconType.GRASS.getIcon();
        } else {
            return iconType.getIcon();
        }
@@ -377,7 +387,7 @@ public final class HMCLGameRepository extends DefaultGameRepository {
            vs.setUsesGlobal(true);
    }

-    public LaunchOptions getLaunchOptions(String version, JavaRuntime javaVersion, Path gameDir, List<String> javaAgents, List<String> javaArguments, boolean makeLaunchScript) {
+    public LaunchOptions.Builder getLaunchOptions(String version, JavaRuntime javaVersion, Path gameDir, List<String> javaAgents, List<String> javaArguments, boolean makeLaunchScript) {
        VersionSetting vs = getVersionSetting(version);

        LaunchOptions.Builder builder = new LaunchOptions.Builder()
@@ -408,7 +418,6 @@ public final class HMCLGameRepository extends DefaultGameRepository {
                .setWidth(vs.getWidth())
                .setHeight(vs.getHeight())
                .setFullscreen(vs.isFullscreen())
-                .setServerIp(vs.getServerIp())
                .setWrapper(vs.getWrapper())
                .setPreLaunchCommand(vs.getPreLaunchCommand())
                .setPostExitCommand(vs.getPostExitCommand())
@@ -418,12 +427,17 @@ public final class HMCLGameRepository extends DefaultGameRepository {
                .setNativesDir(vs.getNativesDir())
                .setProcessPriority(vs.getProcessPriority())
                .setRenderer(vs.getRenderer())
+                .setEnableDebugLogOutput(vs.isEnableDebugLogOutput())
                .setUseNativeGLFW(vs.isUseNativeGLFW())
                .setUseNativeOpenAL(vs.isUseNativeOpenAL())
                .setDaemon(!makeLaunchScript && vs.getLauncherVisibility().isDaemon())
                .setJavaAgents(javaAgents)
                .setJavaArguments(javaArguments);

+        if (StringUtils.isNotBlank(vs.getServerIp())) {
+            builder.setQuickPlayOption(new QuickPlayOption.MultiPlayer(vs.getServerIp()));
+        }
+
        if (config().hasProxy()) {
            builder.setProxyType(config().getProxyType());
            builder.setProxyHost(config().getProxyHost());
@@ -450,7 +464,7 @@ public final class HMCLGameRepository extends DefaultGameRepository {
        if (vs.isAutoMemory() && builder.getJavaArguments().stream().anyMatch(it -> it.startsWith("-Xmx")))
            builder.setMaxMemory(null);

-        return builder.create();
+        return builder;
    }

    @Override
@@ -22,6 +22,7 @@ import javafx.stage.Stage;
 import org.jackhuang.hmcl.Launcher;
 import org.jackhuang.hmcl.auth.*;
 import org.jackhuang.hmcl.auth.authlibinjector.AuthlibInjectorDownloadException;
+import org.jackhuang.hmcl.auth.offline.OfflineAccount;
 import org.jackhuang.hmcl.download.DefaultDependencyManager;
 import org.jackhuang.hmcl.download.DownloadProvider;
 import org.jackhuang.hmcl.download.LibraryAnalyzer;
@@ -51,6 +52,7 @@ import org.jackhuang.hmcl.util.versioning.VersionNumber;

 import java.io.FileNotFoundException;
 import java.io.IOException;
+import java.lang.ref.WeakReference;
 import java.net.SocketTimeoutException;
 import java.net.URI;
 import java.nio.file.AccessDeniedException;
@@ -60,7 +62,6 @@ import java.util.concurrent.*;
 import java.util.concurrent.atomic.AtomicReference;
 import java.util.concurrent.locks.ReentrantLock;
 import java.util.stream.Collectors;
-import java.lang.ref.WeakReference;

 import static javafx.application.Platform.runLater;
 import static javafx.application.Platform.setImplicitExit;
@@ -81,6 +82,8 @@ public final class LauncherHelper {
    private final VersionSetting setting;
    private LauncherVisibility launcherVisibility;
    private boolean showLogs;
+    private QuickPlayOption quickPlayOption;
+    private boolean disableOfflineSkin = false;

    public LauncherHelper(Profile profile, Account account, String selectedVersion) {
        this.profile = Objects.requireNonNull(profile);
@@ -111,6 +114,14 @@ public final class LauncherHelper {
        launcherVisibility = LauncherVisibility.KEEP;
    }

+    public void setQuickPlayOption(QuickPlayOption quickPlayOption) {
+        this.quickPlayOption = quickPlayOption;
+    }
+
+    public void setDisableOfflineSkin() {
+        disableOfflineSkin = true;
+    }
+
    public void launch() {
        FXUtils.checkFxUserThread();

@@ -188,8 +199,15 @@ public final class LauncherHelper {
                .thenComposeAsync(() -> gameVersion.map(s -> new GameVerificationFixTask(dependencyManager, s, version.get())).orElse(null))
                .thenComposeAsync(() -> logIn(account).withStage("launch.state.logging_in"))
                .thenComposeAsync(authInfo -> Task.supplyAsync(() -> {
-                    LaunchOptions launchOptions = repository.getLaunchOptions(
+                    LaunchOptions.Builder launchOptionsBuilder = repository.getLaunchOptions(
                            selectedVersion, javaVersionRef.get(), profile.getGameDir(), javaAgents, javaArguments, scriptFile != null);
+                    if (disableOfflineSkin) {
+                        launchOptionsBuilder.setDaemon(false);
+                    }
+                    if (quickPlayOption != null) {
+                        launchOptionsBuilder.setQuickPlayOption(quickPlayOption);
+                    }
+                    LaunchOptions launchOptions = launchOptionsBuilder.create();

                    LOG.info("Here's the structure of game mod directory:\n" + FileUtils.printFileStructure(repository.getModsDirectory(selectedVersion), 10));

@@ -639,10 +657,13 @@ public final class LauncherHelper {
        return future;
    }

-    private static Task<AuthInfo> logIn(Account account) {
+    private Task<AuthInfo> logIn(Account account) {
        return Task.composeAsync(() -> {
            try {
-                return Task.completed(account.logIn());
+                if (disableOfflineSkin && account instanceof OfflineAccount offlineAccount)
+                    return Task.completed(offlineAccount.logInWithoutSkin());
+                else
+                    return Task.completed(account.logIn());
            } catch (CredentialExpiredException e) {
                LOG.info("Credential has expired", e);

@@ -20,7 +20,6 @@ package org.jackhuang.hmcl.setting;
 import com.google.gson.*;
 import com.google.gson.annotations.JsonAdapter;
 import com.google.gson.annotations.SerializedName;
-import javafx.beans.InvalidationListener;
 import javafx.beans.Observable;
 import javafx.beans.property.*;
 import javafx.collections.FXCollections;
@@ -35,21 +34,18 @@ 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.jackhuang.hmcl.util.javafx.DirtyTracker;
-import org.jackhuang.hmcl.util.javafx.ObservableHelper;
 import org.jetbrains.annotations.Nullable;

-import java.lang.invoke.MethodHandles;
-import java.lang.reflect.*;
 import java.net.Proxy;
 import java.nio.file.Path;
 import java.util.*;

@JsonAdapter(value = Config.Adapter.class)
-public final class Config implements Observable {
+public final class Config extends ObservableSetting {

    public static final int CURRENT_VERSION = 2;
    public static final int CURRENT_UI_VERSION = 0;
@@ -67,54 +63,15 @@ public final class Config implements Observable {
            .setObjectToNumberStrategy(ToNumberPolicy.LONG_OR_DOUBLE)
            .create();

-    private static final List<ObservableField<Config>> FIELDS;
-
-    static {
-        final MethodHandles.Lookup lookup = MethodHandles.lookup();
-        Field[] fields = Config.class.getDeclaredFields();
-
-        var configFields = new ArrayList<ObservableField<Config>>(fields.length);
-        for (Field field : fields) {
-            int modifiers = field.getModifiers();
-            if (Modifier.isTransient(modifiers) || Modifier.isStatic(modifiers))
-                continue;
-
-            configFields.add(ObservableField.of(lookup, field));
-        }
-        FIELDS = List.copyOf(configFields);
-    }
-
    @Nullable
    public static Config fromJson(String json) throws JsonParseException {
        return CONFIG_GSON.fromJson(json, Config.class);
    }

-    private transient final ObservableHelper helper = new ObservableHelper(this);
-    private transient final DirtyTracker tracker = new DirtyTracker();
-    private transient final Map<String, JsonElement> unknownFields = new HashMap<>();
-
    public Config() {
-        var shouldBeWrite = Collections.<Observable>newSetFromMap(new IdentityHashMap<>());
-        Collections.addAll(shouldBeWrite, configVersion, uiVersion);
-
-        for (var field : FIELDS) {
-            Observable observable = field.get(this);
-            if (shouldBeWrite.contains(observable))
-                tracker.markDirty(observable);
-            else
-                tracker.track(observable);
-            observable.addListener(helper);
-        }
-    }
-
-    @Override
-    public void addListener(InvalidationListener listener) {
-        helper.addListener(listener);
-    }
-
-    @Override
-    public void removeListener(InvalidationListener listener) {
-        helper.removeListener(listener);
+        tracker.markDirty(configVersion);
+        tracker.markDirty(uiVersion);
+        register();
    }

    public String toJson() {
@@ -319,19 +276,34 @@ public final class Config implements Observable {

    // 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")
@@ -521,7 +493,7 @@ public final class Config implements Observable {
    }

    @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;
@@ -551,7 +523,7 @@ public final class Config implements Observable {
    }

    @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;
@@ -775,53 +747,10 @@ public final class Config implements Observable {
        return configurations;
    }

-    public static final class Adapter implements JsonSerializer<Config>, JsonDeserializer<Config> {
-
+    public static final class Adapter extends ObservableSetting.Adapter<Config> {
        @Override
-        public JsonElement serialize(Config config, Type typeOfSrc, JsonSerializationContext context) {
-            if (config == null)
-                return JsonNull.INSTANCE;
-
-            JsonObject result = new JsonObject();
-            for (var field : FIELDS) {
-                Observable observable = field.get(config);
-                if (config.tracker.isDirty(observable)) {
-                    field.serialize(result, config, context);
-                }
-            }
-            config.unknownFields.forEach(result::add);
-            return result;
-        }
-
-        @Override
-        public Config deserialize(JsonElement json, Type typeOfT, JsonDeserializationContext context) throws JsonParseException {
-            if (json == null || json.isJsonNull())
-                return null;
-
-            if (!json.isJsonObject())
-                throw new JsonParseException("Config is not an object: " + json);
-
-            Config config = new Config();
-
-            var values = new LinkedHashMap<>(json.getAsJsonObject().asMap());
-            for (ObservableField<Config> field : FIELDS) {
-                JsonElement value = values.remove(field.getSerializedName());
-                if (value == null) {
-                    for (String alternateName : field.getAlternateNames()) {
-                        value = values.remove(alternateName);
-                        if (value != null)
-                            break;
-                    }
-                }
-
-                if (value != null) {
-                    config.tracker.markDirty(field.get(config));
-                    field.deserialize(config, value, context);
-                }
-            }
-
-            config.unknownFields.putAll(values);
-            return config;
+        protected Config createInstance() {
+            return new Config();
        }
    }
 }
@@ -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) {
@@ -22,13 +22,24 @@ 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;
+import java.nio.charset.Charset;
 import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
+import java.nio.file.Path;
 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;

 /**
 * @author Glavo
@@ -36,6 +47,7 @@ import static org.jackhuang.hmcl.setting.ConfigHolder.config;
 public final class StyleSheets {
    private static final int FONT_STYLE_SHEET_INDEX = 0;
    private static final int THEME_STYLE_SHEET_INDEX = 1;
+    private static final int BRIGHTNESS_SHEET_INDEX = 2;

    private static final ObservableList<String> stylesheets;

@@ -43,16 +55,35 @@ public final class StyleSheets {
        String[] array = new String[]{
                getFontStyleSheet(),
                getThemeStyleSheet(),
+                getBrightnessStyleSheet(),
                "/assets/css/root.css"
        };
        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());
+            stylesheets.set(BRIGHTNESS_SHEET_INDEX, getBrightnessStyleSheet());
+        });
    }

-    private static String toStyleSheetUri(String styleSheet) {
-        return "data:text/css;charset=UTF-8;base64," + Base64.getEncoder().encodeToString(styleSheet.getBytes(StandardCharsets.UTF_8));
+    private static String toStyleSheetUri(String styleSheet, String fallback) {
+        if (FXUtils.JAVAFX_MAJOR_VERSION >= 17)
+            // JavaFX 17+ support loading stylesheets from data URIs
+            // https://bugs.openjdk.org/browse/JDK-8267554
+            return "data:text/css;charset=UTF-8;base64," + Base64.getEncoder().encodeToString(styleSheet.getBytes(StandardCharsets.UTF_8));
+        else
+            try {
+                Path temp = Files.createTempFile("hmcl", ".css");
+                // For JavaFX 17 or earlier, CssParser uses the default charset
+                // https://bugs.openjdk.org/browse/JDK-8279328
+                Files.writeString(temp, styleSheet, Charset.defaultCharset());
+                temp.toFile().deleteOnExit();
+                return temp.toUri().toString();
+            } catch (IOException | NullPointerException e) {
+                LOG.error("Unable to create stylesheet, fallback to " + fallback, e);
+                return fallback;
+            }
    }

    private static String getFontStyleSheet() {
@@ -102,34 +133,58 @@ public final class StyleSheets {

        builder.append('}');

-        return toStyleSheetUri(builder.toString());
+        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 String getBrightnessStyleSheet() {
+        return Themes.getColorScheme().getBrightness() == Brightness.LIGHT
+                ? "/assets/css/brightness-light.css"
+                : "/assets/css/brightness-dark.css";
+    }
+
+    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) + ";" +
-                '}');
+        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);
+        addColor(builder, scheme, ColorRole.INVERSE_SURFACE, 0.8);
+
+        builder.append("}\n");
+        return toStyleSheetUri(builder.toString(), blueCss);
    }

    public static void init(Scene scene) {
@@ -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);
-        }
-    }
-}
@@ -459,6 +459,20 @@ public final class VersionSetting implements Cloneable, Observable {
        showLogsProperty.set(showLogs);
    }

+    private final BooleanProperty enableDebugLogOutputProperty = new SimpleBooleanProperty(this, "enableDebugLogOutput", false);
+
+    public BooleanProperty enableDebugLogOutputProperty() {
+        return enableDebugLogOutputProperty;
+    }
+
+    public boolean isEnableDebugLogOutput() {
+        return enableDebugLogOutputProperty.get();
+    }
+
+    public void setEnableDebugLogOutput(boolean u) {
+        this.enableDebugLogOutputProperty.set(u);
+    }
+
    // Minecraft settings.

    private final StringProperty serverIpProperty = new SimpleStringProperty(this, "serverIp", "");
@@ -776,6 +790,7 @@ public final class VersionSetting implements Cloneable, Observable {
            obj.addProperty("notCheckJVM", src.isNotCheckJVM());
            obj.addProperty("notPatchNatives", src.isNotPatchNatives());
            obj.addProperty("showLogs", src.isShowLogs());
+            obj.addProperty("enableDebugLogOutput", src.isEnableDebugLogOutput());
            obj.addProperty("gameDir", src.getGameDir());
            obj.addProperty("launcherVisibility", src.getLauncherVisibility().ordinal());
            obj.addProperty("processPriority", src.getProcessPriority().ordinal());
@@ -847,6 +862,7 @@ public final class VersionSetting implements Cloneable, Observable {
            vs.setNotCheckJVM(Optional.ofNullable(obj.get("notCheckJVM")).map(JsonElement::getAsBoolean).orElse(false));
            vs.setNotPatchNatives(Optional.ofNullable(obj.get("notPatchNatives")).map(JsonElement::getAsBoolean).orElse(false));
            vs.setShowLogs(Optional.ofNullable(obj.get("showLogs")).map(JsonElement::getAsBoolean).orElse(false));
+            vs.setEnableDebugLogOutput(Optional.ofNullable(obj.get("enableDebugLogOutput")).map(JsonElement::getAsBoolean).orElse(false));
            vs.setLauncherVisibility(parseJsonPrimitive(obj.getAsJsonPrimitive("launcherVisibility"), LauncherVisibility.class, LauncherVisibility.HIDE));
            vs.setProcessPriority(parseJsonPrimitive(obj.getAsJsonPrimitive("processPriority"), ProcessPriority.class, ProcessPriority.NORMAL));
            vs.setUseNativeGLFW(Optional.ofNullable(obj.get("useNativeGLFW")).map(JsonElement::getAsBoolean).orElse(false));
@@ -45,6 +45,7 @@ import java.io.IOException;
 import java.net.URI;
 import java.nio.file.Files;
 import java.nio.file.Path;
+import java.util.concurrent.CancellationException;
 import java.util.concurrent.ThreadLocalRandom;
 import java.util.concurrent.atomic.AtomicReference;
 import java.util.concurrent.locks.LockSupport;
@@ -61,22 +62,20 @@ public final class TerracottaManager {
    private static final InvocationDispatcher<TerracottaState> STATE_D = InvocationDispatcher.runOn(Platform::runLater, STATE::set);

    static {
-        Task.runAsync(() -> {
-            if (TerracottaMetadata.PROVIDER == null) {
-                setState(new TerracottaState.Fatal(TerracottaState.Fatal.Type.OS));
-                LOG.warning("Terracotta hasn't support your OS: " + org.jackhuang.hmcl.util.platform.Platform.SYSTEM_PLATFORM);
-            } else {
+        Schedulers.io().execute(() -> {
+            try {
+                if (TerracottaMetadata.PROVIDER == null)
+                    throw new IOException("Unsupported platform: " + org.jackhuang.hmcl.util.platform.Platform.CURRENT_PLATFORM);
+
                switch (TerracottaMetadata.PROVIDER.status()) {
                    case NOT_EXIST -> setState(new TerracottaState.Uninitialized(false));
                    case LEGACY_VERSION -> setState(new TerracottaState.Uninitialized(true));
                    case READY -> launch(setState(new TerracottaState.Launching()));
                }
-            }
-        }).whenComplete(exception -> {
-            if (exception != null) {
+            } catch (Exception e) {
                compareAndSet(TerracottaState.Bootstrap.INSTANCE, new TerracottaState.Fatal(TerracottaState.Fatal.Type.UNKNOWN));
            }
-        }).start();
+        });
    }

    public static ReadOnlyObjectProperty<TerracottaState> stateProperty() {
@@ -143,12 +142,7 @@ public final class TerracottaManager {
            return null;
        }

-        TerracottaState.Preparing preparing;
-        if (state instanceof TerracottaState.Preparing it) {
-            preparing = it;
-        } else {
-            preparing = new TerracottaState.Preparing(new ReadOnlyDoubleWrapper(-1));
-        }
+        TerracottaState.Preparing preparing = new TerracottaState.Preparing(new ReadOnlyDoubleWrapper(-1));

        Task.supplyAsync(Schedulers.io(), () -> {
            return file != null ? TarFileTree.open(file) : null;
@@ -173,6 +167,7 @@ public final class TerracottaManager {
                if (compareAndSet(preparing, launching)) {
                    launch(launching);
                }
+            } else if (exception instanceof CancellationException) {
            } else if (exception instanceof ITerracottaProvider.ArchiveFileMissingException) {
                LOG.warning("Cannot install terracotta from local package.", exception);
                compareAndSet(preparing, new TerracottaState.Fatal(TerracottaState.Fatal.Type.INSTALL));
@@ -183,7 +178,7 @@ public final class TerracottaManager {
            }
        }).start();

-        return setState(preparing);
+        return compareAndSet(state, preparing) ? preparing : null;
    }

    private static ITerracottaProvider getProvider() {
@@ -23,7 +23,9 @@ import org.jackhuang.hmcl.task.FileDownloadTask;
 import org.jackhuang.hmcl.terracotta.provider.GeneralProvider;
 import org.jackhuang.hmcl.terracotta.provider.ITerracottaProvider;
 import org.jackhuang.hmcl.terracotta.provider.MacOSProvider;
+import org.jackhuang.hmcl.util.Lang;
 import org.jackhuang.hmcl.util.gson.JsonUtils;
+import org.jackhuang.hmcl.util.i18n.LocaleUtils;
 import org.jackhuang.hmcl.util.i18n.LocalizedText;
 import org.jackhuang.hmcl.util.io.FileUtils;
 import org.jackhuang.hmcl.util.io.NetworkUtils;
@@ -42,7 +44,6 @@ import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
 import java.util.Map;
-import java.util.Objects;
 import java.util.regex.Pattern;

 import static org.jackhuang.hmcl.util.logging.Logger.LOG;
@@ -61,20 +62,25 @@ public final class TerracottaMetadata {

            @SerializedName("classifiers") Map<String, String> classifiers,
            @SerializedName("downloads") List<String> downloads,
+            @SerializedName("downloads_CN") List<String> downloadsCN,
            @SerializedName("links") List<Link> links
    ) {
-        private TerracottaNative of(String classifier) {
-            List<URI> links = new ArrayList<>(this.downloads.size());
-            for (String download : this.downloads) {
+        private @Nullable TerracottaNative of(String classifier) {
+            String hash = this.classifiers.get(classifier);
+            if (hash == null)
+                return null;
+
+            if (!hash.startsWith("sha256:"))
+                throw new IllegalArgumentException(String.format("Invalid hash value %s for classifier %s.", hash, classifier));
+            hash = hash.substring("sha256:".length());
+
+            List<URI> links = new ArrayList<>(this.downloads.size() + this.downloadsCN.size());
+            for (String download : LocaleUtils.IS_CHINA_MAINLAND
+                    ? Lang.merge(this.downloadsCN, this.downloads)
+                    : Lang.merge(this.downloads, this.downloadsCN)) {
                links.add(URI.create(download.replace("${version}", this.latest).replace("${classifier}", classifier)));
            }

-            String hash = Objects.requireNonNull(this.classifiers.get(classifier), String.format("Classifier %s doesn't exist.", classifier));
-            if (!hash.startsWith("sha256:")) {
-                throw new IllegalArgumentException(String.format("Invalid hash value %s for classifier %s.", hash, classifier));
-            }
-            hash = hash.substring("sha256:".length());
-
            return new TerracottaNative(
                    Collections.unmodifiableList(links),
                    Metadata.DEPENDENCIES_DIRECTORY.resolve(
@@ -138,36 +144,31 @@ public final class TerracottaMetadata {

    @Nullable
    private static ProviderContext locateProvider(Config config) {
-        String architecture = switch (Architecture.SYSTEM_ARCH) {
-            case X86_64 -> "x86_64";
-            case ARM64 -> "arm64";
-            default -> null;
-        };
-        if (architecture == null) {
-            return null;
-        }
-
+        String arch = Architecture.SYSTEM_ARCH.getCheckedName();
        return switch (OperatingSystem.CURRENT_OS) {
            case WINDOWS -> {
-                if (OperatingSystem.SYSTEM_VERSION.isAtLeast(OSVersion.WINDOWS_8_1)) {
-                    yield new ProviderContext(
-                            new GeneralProvider(config.of(String.format("windows-%s.exe", architecture))),
-                            "windows", architecture
-                    );
-                }
-                yield null;
+                if (!OperatingSystem.SYSTEM_VERSION.isAtLeast(OSVersion.WINDOWS_10))
+                    yield null;
+
+                TerracottaNative target = config.of("windows-%s.exe".formatted(arch));
+                yield target != null
+                        ? new ProviderContext(new GeneralProvider(target), "windows", arch)
+                        : null;
+            }
+            case LINUX -> {
+                TerracottaNative target = config.of("linux-%s".formatted(arch));
+                yield target != null
+                        ? new ProviderContext(new GeneralProvider(target), "linux", arch)
+                        : null;
+            }
+            case MACOS -> {
+                TerracottaNative installer = config.of("macos-%s.pkg".formatted(arch));
+                TerracottaNative binary = config.of("macos-%s".formatted(arch));
+
+                yield installer != null && binary != null
+                        ? new ProviderContext(new MacOSProvider(installer, binary), "macos", arch)
+                        : null;
            }
-            case LINUX -> new ProviderContext(
-                    new GeneralProvider(config.of(String.format("linux-%s", architecture))),
-                    "linux", architecture
-            );
-            case MACOS -> new ProviderContext(
-                    new MacOSProvider(
-                            config.of(String.format("macos-%s.pkg", architecture)),
-                            config.of(String.format("macos-%s", architecture))
-                    ),
-                    "macos", architecture
-            );
            default -> null;
        };
    }
@@ -298,7 +298,7 @@ public abstract sealed class TerracottaState {
        }

        public boolean isRecoverable() {
-            return this.type != Type.OS && this.type != Type.UNKNOWN;
+            return this.type != Type.UNKNOWN;
        }
    }
 }
@@ -17,8 +17,10 @@
 */
 package org.jackhuang.hmcl.terracotta.provider;

+import org.jackhuang.hmcl.Metadata;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.terracotta.TerracottaNative;
+import org.jackhuang.hmcl.util.io.FileUtils;
 import org.jackhuang.hmcl.util.platform.ManagedProcess;
 import org.jackhuang.hmcl.util.platform.SystemUtils;
 import org.jackhuang.hmcl.util.tree.TarFileTree;
@@ -27,11 +29,13 @@ import org.jetbrains.annotations.Nullable;
 import java.io.IOException;
 import java.nio.file.Files;
 import java.nio.file.Path;
+import java.nio.file.StandardCopyOption;
 import java.nio.file.attribute.PosixFilePermission;
 import java.util.List;
 import java.util.Set;

 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
+import static org.jackhuang.hmcl.util.logging.Logger.LOG;

 public final class MacOSProvider implements ITerracottaProvider {
    public final TerracottaNative installer, binary;
@@ -62,19 +66,39 @@ public final class MacOSProvider implements ITerracottaProvider {

        return Task.allOf(
                installerTask.thenComposeAsync(() -> {
+                    Path osascript = SystemUtils.which("osascript");
+                    if (osascript == null) {
+                        throw new IllegalStateException("Cannot locate 'osascript' system executable on MacOS for installing Terracotta.");
+                    }
+
+                    Path pkg = Files.createTempDirectory(Metadata.HMCL_GLOBAL_DIRECTORY, "terracotta-pkg")
+                            .toRealPath()
+                            .resolve(FileUtils.getName(installer.getPath()));
+                    Files.copy(installer.getPath(), pkg, StandardCopyOption.REPLACE_EXISTING);
+
                    ManagedProcess process = new ManagedProcess(new ProcessBuilder(
-                            "osascript",
-                            "-e",
-                            String.format(
-                                    "do shell script \"installer -pkg %s -target /\" with prompt \"%s\" with administrator privileges",
-                                    installer.getPath(),
-                                    i18n("terracotta.sudo_installing")
-                            )
-                    ));
+                            osascript.toString(), "-e", String.format(
+                            "do shell script \"installer -pkg '%s' -target /\" with prompt \"%s\" with administrator privileges",
+                            pkg, i18n("terracotta.sudo_installing")
+                    )));
                    process.pumpInputStream(SystemUtils::onLogLine);
                    process.pumpErrorStream(SystemUtils::onLogLine);

-                    return Task.fromCompletableFuture(process.getProcess().onExit());
+                    return Task.fromCompletableFuture(process.getProcess().onExit()).thenRunAsync(() -> {
+                        try {
+                            FileUtils.cleanDirectory(pkg.getParent());
+                        } catch (IOException e) {
+                            LOG.warning("Cannot remove temporary Terracotta package file.", e);
+                        }
+
+                        if (process.getExitCode() != 0) {
+                            throw new IllegalStateException(String.format(
+                                    "Cannot install Terracotta %s: system installer exited with code %d",
+                                    pkg,
+                                    process.getExitCode()
+                            ));
+                        }
+                    });
                }),
                binaryTask.thenRunAsync(() -> Files.setPosixFilePermissions(binary.getPath(), Set.of(
                        PosixFilePermission.OWNER_READ,
@@ -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 + ']';
+    }
+
+}
@@ -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);
+        }
+    }
+}
@@ -0,0 +1,134 @@
+/*
+ * 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();
+    }
+
+    private static final ObjectBinding<Color> titleFill = Bindings.createObjectBinding(
+            () -> config().isTitleTransparent()
+                    ? getColorScheme().getOnSurface()
+                    : getColorScheme().getOnPrimaryContainer(),
+            colorSchemeProperty(),
+            config().titleTransparentProperty()
+    );
+
+    public static ObservableValue<Color> titleFillProperty() {
+        return titleFill;
+    }
+
+    public static BooleanBinding darkModeProperty() {
+        return darkMode;
+    }
+
+    private Themes() {
+    }
+}
@@ -49,6 +49,8 @@ import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.task.TaskExecutor;
 import org.jackhuang.hmcl.ui.account.AccountListPage;
 import org.jackhuang.hmcl.ui.animation.AnimationUtils;
+import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.construct.*;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane.MessageType;
 import org.jackhuang.hmcl.ui.decorator.DecoratorController;
@@ -64,6 +66,7 @@ import org.jackhuang.hmcl.util.*;
 import org.jackhuang.hmcl.util.io.FileUtils;
 import org.jackhuang.hmcl.util.platform.Architecture;
 import org.jackhuang.hmcl.util.platform.OperatingSystem;
+import org.jetbrains.annotations.Nullable;

 import java.nio.file.Path;
 import java.util.List;
@@ -89,7 +92,7 @@ public final class Controllers {

    private static Scene scene;
    private static Stage stage;
-    private static Lazy<VersionPage> versionPage = new Lazy<>(VersionPage::new);
+    private static VersionPage versionPage;
    private static Lazy<GameListPage> gameListPage = new Lazy<>(() -> {
        GameListPage gameListPage = new GameListPage();
        gameListPage.selectedProfileProperty().bindBidirectional(Profiles.selectedProfileProperty());
@@ -102,7 +105,7 @@ public final class Controllers {
    });
    private static Lazy<RootPage> rootPage = new Lazy<>(RootPage::new);
    private static DecoratorController decorator;
-    private static Lazy<DownloadPage> downloadPage = new Lazy<>(DownloadPage::new);
+    private static DownloadPage downloadPage;
    private static Lazy<AccountListPage> accountListPage = new Lazy<>(() -> {
        AccountListPage accountListPage = new AccountListPage();
        accountListPage.selectedAccountProperty().bindBidirectional(Accounts.selectedAccountProperty());
@@ -110,7 +113,7 @@ public final class Controllers {
        accountListPage.authServersProperty().bindContentBidirectional(config().getAuthlibInjectorServers());
        return accountListPage;
    });
-    private static Lazy<LauncherSettingsPage> settingsPage = new Lazy<>(LauncherSettingsPage::new);
+    private static LauncherSettingsPage settingsPage;
    private static Lazy<TerracottaPage> terracottaPage = new Lazy<>(TerracottaPage::new);

    private Controllers() {
@@ -126,7 +129,18 @@ public final class Controllers {

    // FXThread
    public static VersionPage getVersionPage() {
-        return versionPage.get();
+        if (versionPage == null) {
+            versionPage = new VersionPage();
+        }
+        return versionPage;
+    }
+
+    @FXThread
+    public static void prepareVersionPage() {
+        if (versionPage == null) {
+            LOG.info("Prepare the version page");
+            versionPage = FXUtils.prepareNode(new VersionPage());
+        }
    }

    // FXThread
@@ -141,7 +155,18 @@ public final class Controllers {

    // FXThread
    public static LauncherSettingsPage getSettingsPage() {
-        return settingsPage.get();
+        if (settingsPage == null) {
+            settingsPage = new LauncherSettingsPage();
+        }
+        return settingsPage;
+    }
+
+    @FXThread
+    public static void prepareSettingsPage() {
+        if (settingsPage == null) {
+            LOG.info("Prepare the settings page");
+            settingsPage = FXUtils.prepareNode(new LauncherSettingsPage());
+        }
    }

    // FXThread
@@ -151,7 +176,18 @@ public final class Controllers {

    // FXThread
    public static DownloadPage getDownloadPage() {
-        return downloadPage.get();
+        if (downloadPage == null) {
+            downloadPage = new DownloadPage();
+        }
+        return downloadPage;
+    }
+
+    @FXThread
+    public static void prepareDownloadPage() {
+        if (downloadPage == null) {
+            LOG.info("Prepare the download page");
+            downloadPage = FXUtils.prepareNode(new DownloadPage());
+        }
    }

    // FXThread
@@ -305,16 +341,16 @@ public final class Controllers {
        if (AnimationUtils.playWindowAnimation()) {
            Timeline timeline = new Timeline(
                    new KeyFrame(Duration.millis(0),
-                            new KeyValue(decorator.getDecorator().opacityProperty(), 0, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleXProperty(), 0.8, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleYProperty(), 0.8, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleZProperty(), 0.8, FXUtils.EASE)
+                            new KeyValue(decorator.getDecorator().opacityProperty(), 0, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleXProperty(), 0.8, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleYProperty(), 0.8, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleZProperty(), 0.8, Motion.EASE)
                    ),
                    new KeyFrame(Duration.millis(600),
-                            new KeyValue(decorator.getDecorator().opacityProperty(), 1, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleXProperty(), 1, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleYProperty(), 1, FXUtils.EASE),
-                            new KeyValue(decorator.getDecorator().scaleZProperty(), 1, FXUtils.EASE)
+                            new KeyValue(decorator.getDecorator().opacityProperty(), 1, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleXProperty(), 1, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleYProperty(), 1, Motion.EASE),
+                            new KeyValue(decorator.getDecorator().scaleZProperty(), 1, Motion.EASE)
                    )
            );
            timeline.play();
@@ -433,26 +469,34 @@ public final class Controllers {
        dialog(new MessageDialogPane.Builder(text, title, type).actionOrCancel(actionButton, cancel).build());
    }

-    public static void confirmActionDanger(String text, String title, Runnable resolve, Runnable cancel) {
-        JFXButton btnYes = new JFXButton(i18n("button.ok"));
-        btnYes.getStyleClass().add("dialog-error");
-        btnYes.setOnAction(e -> resolve.run());
-        btnYes.setDisable(true);
+    public static void confirmWithCountdown(String text, String title, int seconds, MessageType messageType,
+                                            @Nullable Runnable ok, @Nullable Runnable cancel) {
+        if (seconds <= 0)
+            throw new IllegalArgumentException("Seconds must be greater than 0");

-        int countdown = 10;
-        KeyFrame[] keyFrames = new KeyFrame[countdown + 1];
-        for (int i = 0; i < countdown; i++) {
+        JFXButton btnOk = new JFXButton(i18n("button.ok"));
+        btnOk.getStyleClass().add(messageType == MessageType.WARNING || messageType == MessageType.ERROR
+                ? "dialog-error"
+                : "dialog-accept");
+
+        if (ok != null)
+            btnOk.setOnAction(e -> ok.run());
+        btnOk.setDisable(true);
+
+        KeyFrame[] keyFrames = new KeyFrame[seconds + 1];
+        for (int i = 0; i < seconds; i++) {
            keyFrames[i] = new KeyFrame(Duration.seconds(i),
-                    new KeyValue(btnYes.textProperty(), i18n("button.ok.countdown", countdown - i)));
+                    new KeyValue(btnOk.textProperty(), i18n("button.ok.countdown", seconds - i)));
        }
-        keyFrames[countdown] = new KeyFrame(Duration.seconds(countdown),
-                new KeyValue(btnYes.textProperty(), i18n("button.ok")),
-                new KeyValue(btnYes.disableProperty(), false));
+        keyFrames[seconds] = new KeyFrame(Duration.seconds(seconds),
+                new KeyValue(btnOk.textProperty(), i18n("button.ok")),
+                new KeyValue(btnOk.disableProperty(), false));

        Timeline timeline = new Timeline(keyFrames);
-        confirmAction(text, title, MessageType.WARNING, btnYes, () -> {
+        confirmAction(text, title, messageType, btnOk, () -> {
            timeline.stop();
-            cancel.run();
+            if (cancel != null)
+                cancel.run();
        });
        timeline.play();
    }
@@ -489,7 +533,11 @@ public final class Controllers {
    }

    public static void navigate(Node node) {
-        decorator.navigate(node);
+        decorator.navigate(node, ContainerAnimations.NAVIGATION, Motion.SHORT4, Motion.EASE);
+    }
+
+    public static void navigateForward(Node node) {
+        decorator.navigate(node, ContainerAnimations.FORWARD, Motion.SHORT4, Motion.EASE);
    }

    public static void showToast(String content) {
@@ -524,6 +572,7 @@ public final class Controllers {
        downloadPage = null;
        accountListPage = null;
        settingsPage = null;
+        terracottaPage = null;
        decorator = null;
        stage = null;
        scene = null;
@@ -30,6 +30,7 @@ import javafx.beans.value.*;
 import javafx.collections.ObservableMap;
 import javafx.event.Event;
 import javafx.event.EventDispatcher;
+import javafx.event.EventHandler;
 import javafx.event.EventType;
 import javafx.geometry.Bounds;
 import javafx.geometry.Pos;
@@ -41,6 +42,7 @@ import javafx.scene.Scene;
 import javafx.scene.control.Label;
 import javafx.scene.control.ScrollPane;
 import javafx.scene.control.*;
+import javafx.scene.control.skin.VirtualFlow;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import javafx.scene.input.*;
@@ -54,7 +56,7 @@ import javafx.stage.*;
 import javafx.util.Callback;
 import javafx.util.Duration;
 import javafx.util.StringConverter;
-import org.jackhuang.hmcl.setting.Theme;
+import org.jackhuang.hmcl.setting.StyleSheets;
 import org.jackhuang.hmcl.task.CacheFileTask;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
@@ -132,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;

@@ -148,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 {
@@ -159,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))
@@ -179,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) {
@@ -392,6 +402,11 @@ public final class FXUtils {
            ScrollUtils.addSmoothScrolling(scrollPane);
    }

+    public static void smoothScrolling(VirtualFlow<?> virtualFlow) {
+        if (AnimationUtils.isAnimationEnabled())
+            ScrollUtils.addSmoothScrolling(virtualFlow);
+    }
+
    /// If the current environment is JavaFX 23 or higher, this method returns [Labeled#textTruncatedProperty()];
    /// Otherwise, it returns `null`.
    public static @Nullable ReadOnlyBooleanProperty textTruncatedProperty(Labeled labeled) {
@@ -435,28 +450,12 @@ public final class FXUtils {
        installSlowTooltip(node, new Tooltip(tooltip));
    }

-    public static void playAnimation(Node node, String animationKey, Timeline timeline) {
-        animationKey = "FXUTILS.ANIMATION." + animationKey;
-        Object oldTimeline = node.getProperties().get(animationKey);
-//        if (oldTimeline instanceof Timeline) ((Timeline) oldTimeline).stop();
-        if (timeline != null) timeline.play();
-        node.getProperties().put(animationKey, timeline);
-    }
-
-    public static <T> Animation playAnimation(Node node, String animationKey, Duration duration, WritableValue<T> property, T from, T to, Interpolator interpolator) {
-        if (from == null) from = property.getValue();
-        if (duration == null || Objects.equals(duration, Duration.ZERO) || Objects.equals(from, to)) {
-            playAnimation(node, animationKey, null);
-            property.setValue(to);
-            return null;
-        } else {
-            Timeline timeline = new Timeline(
-                    new KeyFrame(Duration.ZERO, new KeyValue(property, from, interpolator)),
-                    new KeyFrame(duration, new KeyValue(property, to, interpolator))
-            );
-            playAnimation(node, animationKey, timeline);
-            return timeline;
-        }
+    public static void playAnimation(Node node, String animationKey, Animation animation) {
+        animationKey = "hmcl.animations." + animationKey;
+        if (node.getProperties().get(animationKey) instanceof Animation oldAnimation)
+            oldAnimation.stop();
+        animation.play();
+        node.getProperties().put(animationKey, animation);
    }

    public static void openFolder(Path file) {
@@ -1189,7 +1188,14 @@ public final class FXUtils {

    public static Task<Image> getRemoteImageTask(String url, int requestedWidth, int requestedHeight, boolean preserveRatio, boolean smooth) {
        return new CacheFileTask(url)
-                .thenApplyAsync(file -> loadImage(file, requestedWidth, requestedHeight, preserveRatio, smooth));
+                .thenApplyAsync(file -> loadImage(file, requestedWidth, requestedHeight, preserveRatio, smooth))
+                .setSignificance(Task.TaskSignificance.MINOR);
+    }
+
+    public static Task<Image> getRemoteImageTask(URI uri, int requestedWidth, int requestedHeight, boolean preserveRatio, boolean smooth) {
+        return new CacheFileTask(uri)
+                .thenApplyAsync(file -> loadImage(file, requestedWidth, requestedHeight, preserveRatio, smooth))
+                .setSignificance(Task.TaskSignificance.MINOR);
    }

    public static ObservableValue<Image> newRemoteImage(String url, int requestedWidth, int requestedHeight, boolean preserveRatio, boolean smooth) {
@@ -1222,7 +1228,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;
    }

@@ -1347,8 +1353,6 @@ public final class FXUtils {
        }
    };

-    public static final Interpolator EASE = Interpolator.SPLINE(0.25, 0.1, 0.25, 1);
-
    public static void onEscPressed(Node node, Runnable action) {
        node.addEventHandler(KeyEvent.KEY_PRESSED, e -> {
            if (e.getCode() == KeyCode.ESCAPE) {
@@ -1367,6 +1371,24 @@ public final class FXUtils {
        });
    }

+    public static <N extends Parent> N prepareNode(N node) {
+        Scene dummyScene = new Scene(node);
+        StyleSheets.init(dummyScene);
+        node.applyCss();
+        node.layout();
+        return node;
+    }
+
+    public static void prepareOnMouseEnter(Node node, Runnable action) {
+        node.addEventFilter(MouseEvent.MOUSE_ENTERED, new EventHandler<>() {
+            @Override
+            public void handle(MouseEvent e) {
+                node.removeEventFilter(MouseEvent.MOUSE_ENTERED, this);
+                action.run();
+            }
+        });
+    }
+
    public static <T> void onScroll(Node node, List<T> list,
                                    ToIntFunction<List<T>> finder,
                                    Consumer<T> updater
@@ -1411,12 +1433,16 @@ public final class FXUtils {
    }

    public static void copyText(String text) {
+        copyText(text, i18n("message.copied"));
+    }
+
+    public static void copyText(String text, @Nullable String toastMessage) {
        ClipboardContent content = new ClipboardContent();
        content.putString(text);
        Clipboard.getSystemClipboard().setContent(content);

-        if (!Controllers.isStopped()) {
-            Controllers.showToast(i18n("message.copied"));
+        if (toastMessage != null && !Controllers.isStopped()) {
+            Controllers.showToast(toastMessage);
        }
    }

@@ -1435,11 +1461,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 {
@@ -1449,7 +1475,6 @@ public final class FXUtils {
                            hyperlinkAction.accept(link);
                        });
                        text.setCursor(Cursor.HAND);
-                        text.setFill(Color.web("#0070E0"));
                        text.setUnderline(true);
                        texts.add(text);
                    } else if ("b".equals(element.getTagName())) {
@@ -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,10 +395,13 @@ 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);

+                feedbackTextFlow.getStyleClass().add("crash-reason-text-flow");
+
                gameDirPane.setPadding(new Insets(8));
                VBox.setVgrow(gameDirPane, Priority.ALWAYS);
                FXUtils.onChangeAndOperate(feedbackTextFlow.visibleProperty(), visible -> {
@@ -411,6 +414,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 +426,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");
@@ -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");
@@ -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");
@@ -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);
@@ -21,6 +21,7 @@ import com.jfoenix.controls.JFXButton;
 import com.jfoenix.controls.JFXCheckBox;
 import com.jfoenix.controls.JFXComboBox;
 import com.jfoenix.controls.JFXListView;
+import com.sun.jna.Pointer;
 import javafx.application.Platform;
 import javafx.beans.InvalidationListener;
 import javafx.beans.binding.Bindings;
@@ -28,6 +29,7 @@ import javafx.beans.property.*;
 import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.css.PseudoClass;
+import javafx.event.EventHandler;
 import javafx.geometry.Insets;
 import javafx.geometry.Pos;
 import javafx.scene.Scene;
@@ -37,17 +39,21 @@ import javafx.scene.input.KeyCode;
 import javafx.scene.input.MouseButton;
 import javafx.scene.layout.*;
 import javafx.stage.Stage;
+import javafx.stage.WindowEvent;
 import org.jackhuang.hmcl.game.GameDumpGenerator;
 import org.jackhuang.hmcl.game.Log;
 import org.jackhuang.hmcl.setting.StyleSheets;
+import org.jackhuang.hmcl.theme.Themes;
 import org.jackhuang.hmcl.ui.construct.NoneMultipleSelectionModel;
 import org.jackhuang.hmcl.ui.construct.SpinnerPane;
 import org.jackhuang.hmcl.util.Holder;
 import org.jackhuang.hmcl.util.CircularArrayList;
 import org.jackhuang.hmcl.util.Lang;
 import org.jackhuang.hmcl.util.Log4jLevel;
-import org.jackhuang.hmcl.util.platform.ManagedProcess;
-import org.jackhuang.hmcl.util.platform.SystemUtils;
+import org.jackhuang.hmcl.util.platform.*;
+import org.jackhuang.hmcl.util.platform.windows.Dwmapi;
+import org.jackhuang.hmcl.util.platform.windows.WinConstants;
+import org.jackhuang.hmcl.util.platform.windows.WinTypes;

 import java.io.IOException;
 import java.nio.file.Files;
@@ -84,6 +90,36 @@ public final class LogWindow extends Stage {
    private final LogWindowImpl impl;
    private final ManagedProcess gameProcess;

+    @SuppressWarnings("unused")
+    private Object windowsDarkModeListenerHolder;
+
+    {
+        if (OperatingSystem.SYSTEM_VERSION.isAtLeast(OSVersion.WINDOWS_11) && NativeUtils.USE_JNA && Dwmapi.INSTANCE != null) {
+            this.addEventFilter(WindowEvent.WINDOW_SHOWN, new EventHandler<>() {
+                @Override
+                public void handle(WindowEvent event) {
+                    LogWindow.this.removeEventFilter(WindowEvent.WINDOW_SHOWN, this);
+
+                    windowsDarkModeListenerHolder = FXUtils.onWeakChangeAndOperate(Themes.darkModeProperty(), darkMode -> {
+                        if (LogWindow.this.isShowing()) {
+                            WindowsNativeUtils.getWindowHandle(LogWindow.this).ifPresent(handle -> {
+                                if (handle == WinTypes.HANDLE.INVALID_VALUE)
+                                    return;
+
+                                Dwmapi.INSTANCE.DwmSetWindowAttribute(
+                                        new WinTypes.HANDLE(Pointer.createConstant(handle)),
+                                        WinConstants.DWMWA_USE_IMMERSIVE_DARK_MODE,
+                                        new WinTypes.BOOLByReference(new WinTypes.BOOL(darkMode)),
+                                        WinTypes.BOOL.SIZE
+                                );
+                            });
+                        }
+                    });
+                }
+            });
+        }
+    }
+
    public LogWindow(ManagedProcess gameProcess) {
        this(gameProcess, new CircularArrayList<>());
    }
@@ -168,6 +204,7 @@ public final class LogWindow extends Stage {
        LogWindowImpl() {
            getStyleClass().add("log-window");

+            listView.getProperties().put("no-smooth-scrolling", true);
            listView.setItems(FXCollections.observableList(new CircularArrayList<>(logs.size())));

            for (int i = 0; i < LEVELS.length; i++) {
@@ -264,7 +301,6 @@ public final class LogWindow extends Stage {

            VBox vbox = new VBox(3);
            vbox.setPadding(new Insets(3, 0, 3, 0));
-            vbox.setStyle("-fx-background-color: white");
            getChildren().setAll(vbox);

            {
@@ -286,8 +322,7 @@ public final class LogWindow extends Stage {
                    HBox hBox = new HBox(3);
                    for (int i = 0; i < LEVELS.length; i++) {
                        ToggleButton button = new ToggleButton();
-                        button.setStyle("-fx-background-color: " + FXUtils.toWeb(LEVELS[i].getColor()) + ";");
-                        button.getStyleClass().add("log-toggle");
+                        button.getStyleClass().addAll("log-toggle", LEVELS[i].name().toLowerCase(Locale.ROOT));
                        button.textProperty().bind(control.buttonText[i]);
                        button.setSelected(true);
                        control.showLevel[i].bind(button.selectedProperty());
@@ -38,6 +38,7 @@ public enum SVG {
    ADD_CIRCLE("M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM12 22Q9.925 22 8.1 21.2125T4.925 19.075Q3.575 17.725 2.7875 15.9T2 12Q2 9.925 2.7875 8.1T4.925 4.925Q6.275 3.575 8.1 2.7875T12 2Q14.075 2 15.9 2.7875T19.075 4.925Q20.425 6.275 21.2125 8.1T22 12Q22 14.075 21.2125 15.9T19.075 19.075Q17.725 20.425 15.9 21.2125T12 22ZM12 20Q15.35 20 17.675 17.675T20 12Q20 8.65 17.675 6.325T12 4Q8.65 4 6.325 6.325T4 12Q4 15.35 6.325 17.675T12 20ZM12 12Z"),
    ALPHA_CIRCLE("M11,7H13A2,2 0 0,1 15,9V17H13V13H11V17H9V9A2,2 0 0,1 11,7M11,9V11H13V9H11M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"), // Not Material
    ARCHIVE("M12 18 16 14 14.6 12.6 13 14.2V10H11V14.2L9.4 12.6 8 14 12 18ZM5 8V19H19V8H5ZM5 21Q4.175 21 3.5875 20.4125T3 19V6.525Q3 6.175 3.1125 5.85T3.45 5.25L4.7 3.725Q4.975 3.375 5.3875 3.1875T6.25 3H17.75Q18.2 3 18.6125 3.1875T19.3 3.725L20.55 5.25Q20.775 5.525 20.8875 5.85T21 6.525V19Q21 19.825 20.4125 20.4125T19 21H5ZM5.4 6H18.6L17.75 5H6.25L5.4 6ZM12 13.5Z"),
+    ARCHIVE_FILL("M12 18l4-4-1.4-1.4L13 14.2V10H11v4.2L9.4 12.6 8 14l4 4ZM5 21q-.825 0-1.4125-.5875T3 19V6.525q0-.35.1125-.675t.3375-.6L4.7 3.725q.275-.35.6875-.5375T6.25 3h11.5q.45 0 .8625.1875T19.3 3.725L20.55 5.25q.225.275.3375.6T21 6.525V19q0 .825-.5875 1.4125T19 21H5ZM5.4 6H18.6l-.85-1H6.25L5.4 6Z"),
    ARROW_BACK("M7.825 13 13.425 18.6 12 20 4 12 12 4 13.425 5.4 7.825 11H20V13H7.825Z"),
    ARROW_DROP_DOWN("M12 15 7 10H17L12 15Z"),
    ARROW_DROP_UP("M7 14 12 9 17 14H7Z"),
@@ -54,13 +55,16 @@ public enum SVG {
    DELETE("M7 21Q6.175 21 5.5875 20.4125T5 19V6H4V4H9V3H15V4H20V6H19V19Q19 19.825 18.4125 20.4125T17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17ZM7 6V19 6Z"),
    DELETE_FOREVER("M9.4 16.5 12 13.9 14.6 16.5 16 15.1 13.4 12.5 16 9.9 14.6 8.5 12 11.1 9.4 8.5 8 9.9 10.6 12.5 8 15.1 9.4 16.5ZM7 21Q6.175 21 5.5875 20.4125T5 19V6H4V4H9V3H15V4H20V6H19V19Q19 19.825 18.4125 20.4125T17 21H7ZM17 6H7V19H17V6ZM7 6V19 6Z"),
    DEPLOYED_CODE("M11 19.425V12.575L5 9.1V15.95L11 19.425ZM13 19.425 19 15.95V9.1L13 12.575V19.425ZM12 10.85 17.925 7.425 12 4 6.075 7.425 12 10.85ZM4 17.7Q3.525 17.425 3.2625 16.975T3 15.975V8.025Q3 7.475 3.2625 7.025T4 6.3L11 2.275Q11.475 2 12 2T13 2.275L20 6.3Q20.475 6.575 20.7375 7.025T21 8.025V15.975Q21 16.525 20.7375 16.975T20 17.7L13 21.725Q12.525 22 12 22T11 21.725L4 17.7ZM12 12Z"),
+    DEPLOYED_CODE_FILL("M11 21.725 4 17.7q-.475-.275-.7375-.725T3 15.975V8.025q0-.55.2625-1T4 6.3l7-4.025Q11.475 2 12 2t1 .275L20 6.3q.475.275.7375.725t.2625 1v7.95q0 .55-.2625 1T20 17.7l-7 4.025Q12.525 22 12 22t-1-.275Zm0-9.15v6.85L12 20l1-.575v-6.85L19 9.1V8.05l-1.075-.625L12 10.85 6.075 7.425 5 8.05V9.1l6 3.475Z"),
    DOWNLOAD("M12 16 7 11 8.4 9.55 11 12.15V4H13V12.15L15.6 9.55 17 11 12 16ZM6 20Q5.175 20 4.5875 19.4125T4 18V15H6V18H18V15H20V18Q20 18.825 19.4125 19.4125T18 20H6Z"),
    DRESSER("M4 21V5Q4 4.175 4.5875 3.5875T6 3H18Q18.825 3 19.4125 3.5875T20 5V21H18V19H6V21H4ZM6 11H11V5H6V11ZM13 7H18V5H13V7ZM13 11H18V9H13V11ZM10 16H14V14H10V16ZM6 13V17H18V13H6ZM6 13V17 13Z"),
    EDIT("M5 19H6.425L16.2 9.225 14.775 7.8 5 17.575V19ZM3 21V16.75L16.2 3.575Q16.5 3.3 16.8625 3.15T17.625 3Q18.025 3 18.4 3.15T19.05 3.6L20.425 5Q20.725 5.275 20.8625 5.65T21 6.4Q21 6.8 20.8625 7.1625T20.425 7.825L7.25 21H3ZM19 6.4 17.6 5 19 6.4ZM15.475 8.525 14.775 7.8 16.2 9.225 15.475 8.525Z"),
    ERROR("M12 17Q12.425 17 12.7125 16.7125T13 16Q13 15.575 12.7125 15.2875T12 15Q11.575 15 11.2875 15.2875T11 16Q11 16.425 11.2875 16.7125T12 17ZM11 13H13V7H11V13ZM12 22Q9.925 22 8.1 21.2125T4.925 19.075Q3.575 17.725 2.7875 15.9T2 12Q2 9.925 2.7875 8.1T4.925 4.925Q6.275 3.575 8.1 2.7875T12 2Q14.075 2 15.9 2.7875T19.075 4.925Q20.425 6.275 21.2125 8.1T22 12Q22 14.075 21.2125 15.9T19.075 19.075Q17.725 20.425 15.9 21.2125T12 22ZM12 20Q15.35 20 17.675 17.675T20 12Q20 8.65 17.675 6.325T12 4Q8.65 4 6.325 6.325T4 12Q4 15.35 6.325 17.675T12 20ZM12 12Z"),
    EXPLORE("M12 12Zm0 8q-3.325 0-5.6625-2.3375T4 12Q4 8.675 6.3375 6.3375T12 4q3.325-0 5.6625 2.3375T20 12q0 3.325-2.3375 5.6625T12 20Zm0 2q2.075-0 3.9-.7875t3.175-2.1375q1.35-1.35 2.1375-3.175T22 12q-0-2.075-.7875-3.9T19.075 4.925q-1.35-1.35-3.175-2.1375T12 2q-2.075 0-3.9.7875T4.925 4.925Q3.575 6.275 2.7875 8.1T2 12q0 2.075.7875 3.9T4.925 19.075q1.35 1.35 3.175 2.1375T12 22Zm0-8.5q.625 0 1.0625-.4375T13.5 12t-.4375-1.0625T12 10.5t-1.0625.4375T10.5 12t.4375 1.0625T12 13.5Zm-4.5 3 2-7 7-2-2 7-7 2Z"),
    EXTENSION("M8.8 21H5Q4.175 21 3.5875 20.4125T3 19V15.2Q4.2 15.2 5.1 14.4375T6 12.5Q6 11.325 5.1 10.5625T3 9.8V6Q3 5.175 3.5875 4.5875T5 4H9Q9 2.95 9.725 2.225T11.5 1.5Q12.55 1.5 13.275 2.225T14 4H18Q18.825 4 19.4125 4.5875T20 6V10Q21.05 10 21.775 10.725T22.5 12.5Q22.5 13.55 21.775 14.275T20 15V19Q20 19.825 19.4125 20.4125T18 21H14.2Q14.2 19.75 13.4125 18.875T11.5 18Q10.375 18 9.5875 18.875T8.8 21ZM5 19H7.125Q7.725 17.35 9.05 16.675T11.5 16Q12.625 16 13.95 16.675T15.875 19H18V13H20Q20.2 13 20.35 12.85T20.5 12.5Q20.5 12.3 20.35 12.15T20 12H18V6H12V4Q12 3.8 11.85 3.65T11.5 3.5Q11.3 3.5 11.15 3.65T11 4V6H5V8.2Q6.35 8.7 7.175 9.875T8 12.5Q8 13.925 7.175 15.1T5 16.8V19ZM11.5 12.5Z"),
+    EXTENSION_FILL("M8.8 21H5q-.825 0-1.4125-.5875T3 19V15.2q1.2 0 2.1-.7625T6 12.5q0-1.175-.9-1.9375T3 9.8V6q0-.825.5875-1.4125T5 4H9q0-1.05.725-1.775T11.5 1.5q1.05 0 1.775.725T14 4h4q.825 0 1.4125.5875T20 6v4q1.05 0 1.775.725T22.5 12.5q0 1.05-.725 1.775T20 15v4q0 .825-.5875 1.4125T18 21H14.2q0-1.25-.7875-2.125T11.5 18q-1.125 0-1.9125.875T8.8 21Z"),
    FEEDBACK("M12 15Q12.425 15 12.7125 14.7125T13 14Q13 13.575 12.7125 13.2875T12 13Q11.575 13 11.2875 13.2875T11 14Q11 14.425 11.2875 14.7125T12 15ZM11 11H13V5H11V11ZM2 22V4Q2 3.175 2.5875 2.5875T4 2H20Q20.825 2 21.4125 2.5875T22 4V16Q22 16.825 21.4125 17.4125T20 18H6L2 22ZM5.15 16H20V4H4V17.125L5.15 16ZM4 16V4 16Z"),
+    FEEDBACK_FILL("M2 22V4q0-.825.5875-1.4125T4 2H20q.825 0 1.4125.5875T22 4V16q0 .825-.5875 1.4125T20 18H6L2 22Zm10-7q.425 0 .7125-.2875T13 14t-.2875-.7125T12 13t-.7125.2875T11 14t.2875.7125T12 15Zm-1-4h2V5H11v6Z"),
    FOLDER("M4 20Q3.175 20 2.5875 19.4125T2 18V6Q2 5.175 2.5875 4.5875T4 4H10L12 6H20Q20.825 6 21.4125 6.5875T22 8V18Q22 18.825 21.4125 19.4125T20 20H4ZM4 18H20V8H11.175L9.175 6H4V18ZM4 18V6 18Z"),
    FOLDER_COPY("M3 21Q2.175 21 1.5875 20.4125T1 19V6H3V19H20V21H3ZM7 17Q6.175 17 5.5875 16.4125T5 15V4Q5 3.175 5.5875 2.5875T7 2H12L14 4H21Q21.825 4 22.4125 4.5875T23 6V15Q23 15.825 22.4125 16.4125T21 17H7ZM7 15H21V6H13.175L11.175 4H7V15ZM7 15V4 15Z"),
    FOLDER_OPEN("M4 20Q3.175 20 2.5875 19.4125T2 18V6Q2 5.175 2.5875 4.5875T4 4H10L12 6H20Q20.825 6 21.4125 6.5875T22 8H11.175L9.175 6H4V18L6.4 10H23.5L20.925 18.575Q20.725 19.225 20.1875 19.6125T19 20H4ZM6.1 18H19L20.8 12H7.9L6.1 18ZM6.1 18 7.9 12 6.1 18ZM4 8V6 8Z"),
@@ -69,16 +73,20 @@ public enum SVG {
    FOR_YOU("M12 12Q14.025 12 16.225 11.5875T20 10.5V20.5Q18.5 21.175 16.35 21.5875T12 22Q9.8 22 7.65 21.5875T4 20.5V10.5Q5.575 11.175 7.775 11.5875T12 12ZM18 19V13.25Q16.75 13.6 15.1125 13.8T12 14Q10.525 14 8.8875 13.8T6 13.25V19Q7.25 19.45 8.875 19.725T12 20Q13.5 20 15.125 19.725T18 19ZM12 2Q13.65 2 14.825 3.175T16 6Q16 7.65 14.825 8.825T12 10Q10.35 10 9.175 8.825T8 6Q8 4.35 9.175 3.175T12 2ZM12 8Q12.825 8 13.4125 7.4125T14 6Q14 5.175 13.4125 4.5875T12 4Q11.175 4 10.5875 4.5875T10 6Q10 6.825 10.5875 7.4125T12 8ZM12 6ZM12 16.625Z"),
    GAMEPAD("M12 7.65ZM16.35 12ZM7.65 12ZM12 16.35ZM12 10.5 9 7.5V2H15V7.5L12 10.5ZM16.5 15 13.5 12 16.5 9H22V15H16.5ZM2 15V9H7.5L10.5 12 7.5 15H2ZM9 22V16.5L12 13.5 15 16.5V22H9ZM12 7.65 13 6.65V4H11V6.65L12 7.65ZM4 13H6.65L7.65 12 6.65 11H4V13ZM11 20H13V17.35L12 16.35 11 17.35V20ZM17.35 13H20V11H17.35L16.35 12 17.35 13Z"),
    GLOBE_BOOK("M3.075 13Q3.05 12.75 3.0375 12.5T3.025 12Q3.025 10.125 3.725 8.4875T5.65 5.6375Q6.875 4.425 8.5 3.7125T12 3Q13.875 3 15.5125 3.7125T18.3625 5.6375Q19.575 6.85 20.2875 8.4875T21 12Q21 12.25 20.9875 12.5T20.95 13H18.925Q18.975 12.75 18.9875 12.5T19 12Q19 11.75 18.9875 11.5T18.925 11H15.975Q16 11.25 16 11.5V12.5Q16 12.75 15.975 13H14V12.175Q14 11.875 13.9875 11.575T13.95 11H10.075Q10.05 11.275 10.0375 11.575T10.025 12.175V13H8.05Q8.025 12.75 8.025 12.5V11.5Q8.025 11.25 8.05 11H5.1Q5.05 11.25 5.0375 11.5T5.025 12Q5.025 12.25 5.0375 12.5T5.1 13H3.075ZM5.7 9H8.275Q8.475 7.925 8.775 7.0625T9.425 5.5Q8.225 5.95 7.25 6.8625T5.7 9ZM10.35 9H13.65Q13.4 7.925 13.025 6.9T12 5Q11.35 5.875 10.9625 6.9T10.35 9ZM15.75 9H18.325Q17.75 7.775 16.7625 6.8625T14.575 5.5Q14.925 6.25 15.2375 7.0875T15.75 9ZM11 21V20Q11 18.75 10.125 17.875T8 17H2V15H8Q9.2 15 10.2375 15.525T12 17Q12.725 16.05 13.7625 15.525T16 15H22V17H16Q14.75 17 13.875 17.875T13 20V21H11Z"),
+    GRAPH2("M5 22q-1.25 0-2.125-.875T2 19q0-.975.5625-1.75T4 16.175V14q0-1.25.875-2.125T7 11h4V7.825q-.875-.3-1.4375-1.075T9 5q0-1.25.875-2.125T12 2t2.125.875T15 5q0 .975-.5625 1.75T13 7.825V11h4q1.25 0 2.125.875T20 14v2.175q.875.3 1.4375 1.075T22 19q0 1.25-.875 2.125T19 22t-2.125-.875T16 19q0-.975.5625-1.75T18 16.175V14q0-.425-.2875-.7125T17 13H13v3.175q.875.3 1.4375 1.075T15 19q0 1.25-.875 2.125T12 22t-2.125-.875T9 19q0-.975.5625-1.75T11 16.175V13H7q-.425 0-.7125.2875T6 14v2.175q.875.3 1.4375 1.075T8 19q0 1.25-.875 2.125T5 22Zm0-2q.425 0 .7125-.2875T6 19q0-.425-.2875-.7125T5 18q-.425 0-.7125.2875T4 19q0 .425.2875.7125T5 20Zm7 0q.425 0 .7125-.2875T13 19q0-.425-.2875-.7125T12 18q-.425 0-.7125.2875T11 19q0 .425.2875.7125T12 20Zm7 0q.425 0 .7125-.2875T20 19q0-.425-.2875-.7125T19 18q-.425 0-.7125.2875T18 19q0 .425.2875.7125T19 20ZM12 6q.425 0 .7125-.2875T13 5q0-.425-.2875-.7125T12 4q-.425 0-.7125.2875T11 5q0 .425.2875.7125T12 6Z"),
    HELP("M11.95 18Q12.475 18 12.8375 17.6375T13.2 16.75Q13.2 16.225 12.8375 15.8625T11.95 15.5Q11.425 15.5 11.0625 15.8625T10.7 16.75Q10.7 17.275 11.0625 17.6375T11.95 18ZM11.05 14.15H12.9Q12.9 13.325 13.0875 12.85T14.15 11.55Q14.8 10.9 15.175 10.3125T15.55 8.9Q15.55 7.5 14.525 6.75T12.1 6Q10.675 6 9.7875 6.75T8.55 8.55L10.2 9.2Q10.325 8.75 10.7625 8.225T12.1 7.7Q12.9 7.7 13.3 8.1375T13.7 9.1Q13.7 9.6 13.4 10.0375T12.65 10.85Q11.55 11.825 11.3 12.325T11.05 14.15ZM12 22Q9.925 22 8.1 21.2125T4.925 19.075Q3.575 17.725 2.7875 15.9T2 12Q2 9.925 2.7875 8.1T4.925 4.925Q6.275 3.575 8.1 2.7875T12 2Q14.075 2 15.9 2.7875T19.075 4.925Q20.425 6.275 21.2125 8.1T22 12Q22 14.075 21.2125 15.9T19.075 19.075Q17.725 20.425 15.9 21.2125T12 22ZM12 20Q15.35 20 17.675 17.675T20 12Q20 8.65 17.675 6.325T12 4Q8.65 4 6.325 6.325T4 12Q4 15.35 6.325 17.675T12 20ZM12 12Z"),
+    HELP_FILL("M11.95 18q.525 0 .8875-.3625T13.2 16.75q0-.525-.3625-.8875T11.95 15.5q-.525 0-.8875.3625T10.7 16.75q0 .525.3625.8875T11.95 18Zm-.9-3.85H12.9q0-.825.1875-1.3t1.0625-1.3q.65-.65 1.025-1.2375T15.55 8.9q0-1.4-1.025-2.15T12.1 6q-1.425 0-2.3125.75T8.55 8.55l1.65.65q.125-.45.5625-.975T12.1 7.7q.8 0 1.2.4375t.4.9625q0 .5-.3.9375t-.75.8125q-1.1.975-1.35 1.475t-.25 1.825ZM12 22q-2.075 0-3.9-.7875T4.925 19.075q-1.35-1.35-2.1375-3.175T2 12q0-2.075.7875-3.9T4.925 4.925Q6.275 3.575 8.1 2.7875T12 2q2.075 0 3.9.7875T19.075 4.925q1.35 1.35 2.1375 3.175T22 12q0 2.075-.7875 3.9T19.075 19.075q-1.35 1.35-3.175 2.1375T12 22Z"),
    HOME("M6 19H9V13H15V19H18V10L12 5.5 6 10V19ZM4 21V9L12 3 20 9V21H13V15H11V21H4ZM12 12.25Z"),
    HOST("M4 21Q3.175 21 2.5875 20.4125T2 19V5Q2 4.175 2.5875 3.5875T4 3H9Q9.825 3 10.4125 3.5875T11 5V19Q11 19.825 10.4125 20.4125T9 21H4ZM15 21Q14.175 21 13.5875 20.4125T13 19V5Q13 4.175 13.5875 3.5875T15 3H20Q20.825 3 21.4125 3.5875T22 5V19Q22 19.825 21.4125 20.4125T20 21H15ZM4 19H9V5H4V19ZM15 19H20V5H15V19ZM5 15H8V13H5V15ZM16 15H19V13H16V15ZM5 12H8V10H5V12ZM16 12H19V10H16V12ZM5 9H8V7H5V9ZM16 9H19V7H16V9ZM4 19H9 4ZM15 19H20 15Z"),
    INFO("M11 17H13V11H11V17ZM12 9Q12.425 9 12.7125 8.7125T13 8Q13 7.575 12.7125 7.2875T12 7Q11.575 7 11.2875 7.2875T11 8Q11 8.425 11.2875 8.7125T12 9ZM12 22Q9.925 22 8.1 21.2125T4.925 19.075Q3.575 17.725 2.7875 15.9T2 12Q2 9.925 2.7875 8.1T4.925 4.925Q6.275 3.575 8.1 2.7875T12 2Q14.075 2 15.9 2.7875T19.075 4.925Q20.425 6.275 21.2125 8.1T22 12Q22 14.075 21.2125 15.9T19.075 19.075Q17.725 20.425 15.9 21.2125T12 22ZM12 20Q15.35 20 17.675 17.675T20 12Q20 8.65 17.675 6.325T12 4Q8.65 4 6.325 6.325T4 12Q4 15.35 6.325 17.675T12 20ZM12 12Z"),
+    INFO_FILL("M12 22q2.075-0 3.9-.7875t3.175-2.1375q1.35-1.35 2.1375-3.175T22 12q-0-2.075-.7875-3.9T19.075 4.925q-1.35-1.35-3.175-2.1375T12 2q-2.075 0-3.9.7875T4.925 4.925Q3.575 6.275 2.7875 8.1T2 12q0 2.075.7875 3.9T4.925 19.075q1.35 1.35 3.175 2.1375T12 22ZM12 9q-.425 0-.7125-.2875T11 8t.2875-.7125T12 7q.425-0 .7125.2875T13 8t-.2875.7125T12 9Zm-1 8V11h2v6H11Z"),
    KEYBOARD_ARROW_DOWN("M12 15.4 6 9.4 7.4 8 12 12.6 16.6 8 18 9.4 12 15.4Z"),
    KEYBOARD_ARROW_UP("M12 10.8 7.4 15.4 6 14 12 8 18 14 16.6 15.4 12 10.8Z"),
    LANDSCAPE("M1 18l6-8 4.5 6H19L14 9.35l-2.5 3.3L10.25 11 14 6l9 12H1Zm13.025-2ZM5 16H9L7 13.325 5 16ZH9 5Z"),
    LIST("M7 9V7H21V9H7ZM7 13V11H21V13H7ZM7 17V15H21V17H7ZM4 9Q3.575 9 3.2875 8.7125T3 8Q3 7.575 3.2875 7.2875T4 7Q4.425 7 4.7125 7.2875T5 8Q5 8.425 4.7125 8.7125T4 9ZM4 13Q3.575 13 3.2875 12.7125T3 12Q3 11.575 3.2875 11.2875T4 11Q4.425 11 4.7125 11.2875T5 12Q5 12.425 4.7125 12.7125T4 13ZM4 17Q3.575 17 3.2875 16.7125T3 16Q3 15.575 3.2875 15.2875T4 15Q4.425 15 4.7125 15.2875T5 16Q5 16.425 4.7125 16.7125T4 17Z"),
    LISTS("M2 20V16H6V20H2ZM8 20V16H22V20H8ZM2 14V10H6V14H2ZM8 14V10H22V14H8ZM2 8V4H6V8H2ZM8 8V4H22V8H8Z"),
    LOCAL_CAFE("M4 21V19H20V21H4ZM8 17Q6.35 17 5.175 15.825T4 13V3H20Q20.825 3 21.4125 3.5875T22 5V8Q22 8.825 21.4125 9.4125T20 10H18V13Q18 14.65 16.825 15.825T14 17H8ZM8 15H14Q14.825 15 15.4125 14.4125T16 13V5H6V13Q6 13.825 6.5875 14.4125T8 15ZM18 8H20V5H18V8ZM8 15H6 16 8Z"),
+    LOCAL_CAFE_FILL("M4 21V19H20v2H4Zm4-4q-1.65 0-2.825-1.175T4 13V3H20q.825 0 1.4125.5875T22 5V8q0 .825-.5875 1.4125T20 10H18v3q0 1.65-1.175 2.825T14 17H8ZM18 8h2V5H18V8Z"),
    LOCATION_CITY("M3 21V7H9V5l3-3 3 3v6h6V21H3Zm2-2H7V17H5v2Zm0-4H7V13H5v2Zm0-4H7V9H5v2Zm6 8h2V17H11v2Zm0-4h2V13H11v2Zm0-4h2V9H11v2Zm0-4h2V5H11V7Zm6 12h2V17H17v2Zm0-4h2V13H17v2Z"),
    MENU("M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z"),
    MICROSOFT("M4 20H22v2H4V13H20v7h2V4H20v7H4V4h7V20h2V4h9V2H2V22H4"), // Not Material
@@ -90,6 +98,7 @@ public enum SVG {
    OUTPUT("M5 21Q4.175 21 3.5875 20.4125T3 19V5Q3 4.175 3.5875 3.5875T5 3H19Q19.825 3 20.4125 3.5875T21 5V7H19V5H5V19H19V17H21V19Q21 19.825 20.4125 20.4125T19 21H5ZM17 17 15.6 15.6 18.175 13H9V11H18.175L15.6 8.4 17 7 22 12 17 17Z"),
    PACKAGE("M10 9.75 12 8.75 14 9.75V5H10V9.75ZM7 17V15H12V17H7ZM5 21Q4.175 21 3.5875 20.4125T3 19V5Q3 4.175 3.5875 3.5875T5 3H19Q19.825 3 20.4125 3.5875T21 5V19Q21 19.825 20.4125 20.4125T19 21H5ZM5 5V19 5ZM5 19H19V5H16V13L12 11 8 13V5H5V19Z"),
    PACKAGE2("M11 19.425V12.575L5 9.1V15.95L11 19.425ZM13 19.425 19 15.95V9.1L13 12.575V19.425ZM11 21.725 4 17.7Q3.525 17.425 3.2625 16.975T3 15.975V8.025Q3 7.475 3.2625 7.025T4 6.3L11 2.275Q11.475 2 12 2T13 2.275L20 6.3Q20.475 6.575 20.7375 7.025T21 8.025V15.975Q21 16.525 20.7375 16.975T20 17.7L13 21.725Q12.525 22 12 22T11 21.725ZM16 8.525 17.925 7.425 12 4 10.05 5.125 16 8.525ZM12 10.85 13.95 9.725 8.025 6.3 6.075 7.425 12 10.85Z"),
+    PACKAGE2_FILL("M11 21.725v-9.15L3 7.95v8.025q0 .55.2625 1T4 17.7l7 4.025Zm2 0L20 17.7q.475-.275.7375-.725t.2625-1V7.95l-8 4.625v9.15Zm3.975-13.75 2.95-1.725L13 2.275Q12.525 2 12 2t-1 .275L9.025 3.4l7.95 4.575ZM12 10.85l2.975-1.7L7.05 4.55l-3 1.725L12 10.85Z"),
    PERSON("M12 12Q10.35 12 9.175 10.825T8 8Q8 6.35 9.175 5.175T12 4Q13.65 4 14.825 5.175T16 8Q16 9.65 14.825 10.825T12 12ZM4 20V17.2Q4 16.35 4.4375 15.6375T5.6 14.55Q7.15 13.775 8.75 13.3875T12 13Q13.65 13 15.25 13.3875T18.4 14.55Q19.125 14.925 19.5625 15.6375T20 17.2V20H4ZM6 18H18V17.2Q18 16.925 17.8625 16.7T17.5 16.35Q16.15 15.675 14.775 15.3375T12 15Q10.6 15 9.225 15.3375T6.5 16.35Q6.275 16.475 6.1375 16.7T6 17.2V18ZM12 10Q12.825 10 13.4125 9.4125T14 8Q14 7.175 13.4125 6.5875T12 6Q11.175 6 10.5875 6.5875T10 8Q10 8.825 10.5875 9.4125T12 10ZM12 8ZM12 18Z"),
    PUBLIC("M12 22Q9.925 22 8.1 21.2125T4.925 19.075Q3.575 17.725 2.7875 15.9T2 12Q2 9.925 2.7875 8.1T4.925 4.925Q6.275 3.575 8.1 2.7875T12 2Q14.075 2 15.9 2.7875T19.075 4.925Q20.425 6.275 21.2125 8.1T22 12Q22 14.075 21.2125 15.9T19.075 19.075Q17.725 20.425 15.9 21.2125T12 22ZM11 19.95V18Q10.175 18 9.5875 17.4125T9 16V15L4.2 10.2Q4.125 10.65 4.0625 11.1T4 12Q4 15.025 5.9875 17.3T11 19.95ZM17.9 17.4Q18.925 16.275 19.4625 14.8875T20 12Q20 9.55 18.6375 7.525T15 4.6V5Q15 5.825 14.4125 6.4125T13 7H11V9Q11 9.425 10.7125 9.7125T10 10H8V12H14Q14.425 12 14.7125 12.2875T15 13V16H16Q16.65 16 17.175 16.3875T17.9 17.4Z"),
    REFRESH("M12 20Q8.65 20 6.325 17.675T4 12Q4 8.65 6.325 6.325T12 4Q13.725 4 15.3 4.7125T18 6.75V4H20V11H13V9H17.2Q16.4 7.6 15.0125 6.8T12 6Q9.5 6 7.75 7.75T6 12Q6 14.5 7.75 16.25T12 18Q13.925 18 15.475 16.9T17.65 14H19.75Q19.05 16.65 16.9 18.325T12 20Z"),
@@ -97,13 +106,17 @@ public enum SVG {
    RESTORE("M12 21Q8.55 21 5.9875 18.7125T3.05 13H5.1Q5.45 15.6 7.4125 17.3T12 19Q14.925 19 16.9625 16.9625T19 12Q19 9.075 16.9625 7.0375T12 5Q10.275 5 8.775 5.8T6.25 8H9V10H3V4H5V6.35Q6.275 4.75 8.1125 3.875T12 3Q13.875 3 15.5125 3.7125T18.3625 5.6375Q19.575 6.85 20.2875 8.4875T21 12Q21 13.875 20.2875 15.5125T18.3625 18.3625Q17.15 19.575 15.5125 20.2875T12 21Z"), // Not Material
    ROCKET_LAUNCH("M5.65 10.025 7.6 10.85Q7.95 10.15 8.325 9.5T9.15 8.2L7.75 7.925 5.65 10.025ZM9.2 12.1 12.05 14.925Q13.1 14.525 14.3 13.7T16.55 11.825Q18.3 10.075 19.2875 7.9375T20.15 4Q18.35 3.875 16.2 4.8625T12.3 7.6Q11.25 8.65 10.425 9.85T9.2 12.1ZM13.65 10.475Q13.075 9.9 13.075 9.0625T13.65 7.65Q14.225 7.075 15.075 7.075T16.5 7.65Q17.075 8.225 17.075 9.0625T16.5 10.475Q15.925 11.05 15.075 11.05T13.65 10.475ZM14.125 18.5 16.225 16.4 15.95 15Q15.3 15.45 14.65 15.8125T13.3 16.525L14.125 18.5ZM21.95 2.175Q22.425 5.2 21.3625 8.0625T17.7 13.525L18.2 16Q18.3 16.5 18.15 16.975T17.65 17.8L13.45 22 11.35 17.075 7.075 12.8 2.15 10.7 6.325 6.5Q6.675 6.15 7.1625 6T8.15 5.95L10.625 6.45Q13.225 3.85 16.075 2.775T21.95 2.175ZM3.925 15.975Q4.8 15.1 6.0625 15.0875T8.2 15.95Q9.075 16.825 9.0625 18.0875T8.175 20.225Q7.55 20.85 6.0875 21.3T2.05 22.1Q2.4 19.525 2.85 18.0625T3.925 15.975ZM5.35 17.375Q5.1 17.625 4.85 18.2875T4.5 19.625Q5.175 19.525 5.8375 19.2875T6.75 18.8Q7.05 18.5 7.075 18.075T6.8 17.35Q6.5 17.05 6.075 17.0625T5.35 17.375Z"),
    SCHEMA("M4 23V17H6.5V15H4V9H6.5V7H4V1h7V7H8.5V9H11v2h3V9h7v6H14V13H11v2H8.5v2H11v6H4Zm2-2H9V19H6v2Zm0-8H9V11H6v2Zm10 0h3V11H16v2ZM6 5H9V3H6V5ZM7.5 4Zm0 8Zm10 0Zm-10 8Z"),
+    SCHEMA_FILL("M4 23V17H6.5V15H4V9H6.5V7H4V1h7V7H8.5V9H11v2h3V9h7v6H14V13H11v2H8.5v2H11v6H4Z"),
    SCREENSHOT_MONITOR("M15 16H19V12H17.5V14.5H15V16ZM5 10H6.5V7.5H9V6H5V10ZM8 21V19H4Q3.175 19 2.5875 18.4125T2 17V5Q2 4.175 2.5875 3.5875T4 3H20Q20.825 3 21.4125 3.5875T22 5V17Q22 17.825 21.4125 18.4125T20 19H16V21H8ZM4 17H20V5H4V17ZM4 17V5 17Z"),
    SCRIPT("M14,20A2,2 0 0,0 16,18V5H9A1,1 0 0,0 8,6V16H5V5A3,3 0 0,1 8,2H19A3,3 0 0,1 22,5V6H18V18L18,19A3,3 0 0,1 15,22H5A3,3 0 0,1 2,19V18H12A2,2 0 0,0 14,20Z"), // Not Material
    SEARCH("M19.6 21 13.3 14.7Q12.55 15.3 11.575 15.65T9.5 16Q6.775 16 4.8875 14.1125T3 9.5Q3 6.775 4.8875 4.8875T9.5 3Q12.225 3 14.1125 4.8875T16 9.5Q16 10.6 15.65 11.575T14.7 13.3L21 19.6 19.6 21ZM9.5 14Q11.375 14 12.6875 12.6875T14 9.5Q14 7.625 12.6875 6.3125T9.5 5Q7.625 5 6.3125 6.3125T5 9.5Q5 11.375 6.3125 12.6875T9.5 14Z"),
    SELECT_ALL("M7 17V7H17V17H7ZM9 15H15V9H9V15ZM5 19V21Q4.175 21 3.5875 20.4125T3 19H5ZM3 17V15H5V17H3ZM3 13V11H5V13H3ZM3 9V7H5V9H3ZM5 5H3Q3 4.175 3.5875 3.5875T5 3V5ZM7 21V19H9V21H7ZM7 5V3H9V5H7ZM11 21V19H13V21H11ZM11 5V3H13V5H11ZM15 21V19H17V21H15ZM15 5V3H17V5H15ZM19 21V19H21Q21 19.825 20.4125 20.4125T19 21ZM19 17V15H21V17H19ZM19 13V11H21V13H19ZM19 9V7H21V9H19ZM19 5V3Q19.825 3 20.4125 3.5875T21 5H19Z"),
    SETTINGS("M19.43 12.98C19.47 12.66 19.5 12.34 19.5 12 19.5 11.66 19.47 11.34 19.43 11.02L21.54 9.37C21.73 9.22 21.78 8.95 21.66 8.73L19.66 5.27C19.57 5.11 19.4 5.02 19.22 5.02 19.16 5.02 19.1 5.03 19.05 5.05L16.56 6.05C16.04 5.65 15.48 5.32 14.87 5.07L14.49 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.51 2.42L9.13 5.07C8.52 5.32 7.96 5.66 7.44 6.05L4.95 5.05C4.89 5.03 4.83 5.02 4.77 5.02 4.6 5.02 4.43 5.11 4.34 5.27L2.34 8.73C2.21 8.95 2.27 9.22 2.46 9.37L4.57 11.02C4.53 11.34 4.5 11.67 4.5 12 4.5 12.33 4.53 12.66 4.57 12.98L2.46 14.63C2.27 14.78 2.22 15.05 2.34 15.27L4.34 18.73C4.43 18.89 4.6 18.98 4.78 18.98 4.84 18.98 4.9 18.97 4.95 18.95L7.44 17.95C7.96 18.35 8.52 18.68 9.13 18.93L9.51 21.58C9.54 21.82 9.75 22 10 22H14C14.25 22 14.46 21.82 14.49 21.58L14.87 18.93C15.48 18.68 16.04 18.34 16.56 17.95L19.05 18.95C19.11 18.97 19.17 18.98 19.23 18.98 19.4 18.98 19.57 18.89 19.66 18.73L21.66 15.27C21.78 15.05 21.73 14.78 21.54 14.63L19.43 12.98ZM17.45 11.27C17.49 11.58 17.5 11.79 17.5 12 17.5 12.21 17.48 12.43 17.45 12.73L17.31 13.86 18.2 14.56 19.28 15.4 18.58 16.61 17.31 16.1 16.27 15.68 15.37 16.36C14.94 16.68 14.53 16.92 14.12 17.09L13.06 17.52 12.9 18.65 12.7 20H11.3L11.11 18.65 10.95 17.52 9.89 17.09C9.46 16.91 9.06 16.68 8.66 16.38L7.75 15.68 6.69 16.11 5.42 16.62 4.72 15.41 5.8 14.57 6.69 13.87 6.55 12.74C6.52 12.43 6.5 12.2 6.5 12S6.52 11.57 6.55 11.27L6.69 10.14 5.8 9.44 4.72 8.6 5.42 7.39 6.69 7.9 7.73 8.32 8.63 7.64C9.06 7.32 9.47 7.08 9.88 6.91L10.94 6.48 11.1 5.35 11.3 4H12.69L12.88 5.35 13.04 6.48 14.1 6.91C14.53 7.09 14.93 7.32 15.33 7.62L16.24 8.32 17.3 7.89 18.57 7.38 19.27 8.59 18.2 9.44 17.31 10.14 17.45 11.27ZM12 8C9.79 8 8 9.79 8 12S9.79 16 12 16 16 14.21 16 12 14.21 8 12 8ZM12 14C10.9 14 10 13.1 10 12S10.9 10 12 10 14 10.9 14 12 13.1 14 12 14Z"), // Material Icons
+    SETTINGS_FILL("M9.25 22l-.4-3.2q-.325-.125-.6125-.3t-.5625-.375L4.7 19.375l-2.75-4.75 2.575-1.95Q4.5 12.5 4.5 12.3375v-.675q0-.1625.025-.3375L1.95 9.375 4.7 4.625l2.975 1.25q.275-.2.575-.375t.6-.3L9.25 2h5.5l.4 3.2q.325.125.6125.3t.5625.375L19.3 4.625l2.75 4.75-2.575 1.95q.025.175.025.3375v.675q0 .1625-.05.3375l2.575 1.95-2.75 4.75-2.95-1.25q-.275.2-.575.375t-.6.3l-.4 3.2H9.25Zm2.8-6.5q1.45 0 2.475-1.025T15.55 12 14.525 9.525 12.05 8.5q-1.475 0-2.4875 1.025T8.55 12q0 1.45 1.0125 2.475T12.05 15.5Z"), // Material Icons
    STADIA_CONTROLLER("M4.725 20Q3.225 20 2.1625 18.925T1.05 16.325Q1.05 16.1 1.075 15.875T1.15 15.425L3.25 7.025Q3.6 5.675 4.675 4.8375T7.125 4H16.875Q18.25 4 19.325 4.8375T20.75 7.025L22.85 15.425Q22.9 15.65 22.9375 15.8875T22.975 16.35Q22.975 17.875 21.8875 18.9375T19.275 20Q18.225 20 17.325 19.45T15.975 17.95L15.275 16.5Q15.15 16.25 14.9 16.125T14.375 16H9.625Q9.35 16 9.1 16.125T8.725 16.5L8.025 17.95Q7.575 18.9 6.675 19.45T4.725 20ZM4.8 18Q5.275 18 5.6625 17.75T6.25 17.075L6.95 15.65Q7.325 14.875 8.05 14.4375T9.625 14H14.375Q15.225 14 15.95 14.45T17.075 15.65L17.775 17.075Q17.975 17.5 18.3625 17.75T19.225 18Q19.925 18 20.425 17.5375T20.95 16.375Q20.95 16.4 20.9 15.9L18.8 7.525Q18.625 6.85 18.1 6.425T16.875 6H7.125Q6.425 6 5.8875 6.425T5.2 7.525L3.1 15.9Q3.05 16.05 3.05 16.35 3.05 17.05 3.5625 17.525T4.8 18ZM13.5 11Q13.925 11 14.2125 10.7125T14.5 10Q14.5 9.575 14.2125 9.2875T13.5 9Q13.075 9 12.7875 9.2875T12.5 10Q12.5 10.425 12.7875 10.7125T13.5 11ZM15.5 9Q15.925 9 16.2125 8.7125T16.5 8Q16.5 7.575 16.2125 7.2875T15.5 7Q15.075 7 14.7875 7.2875T14.5 8Q14.5 8.425 14.7875 8.7125T15.5 9ZM15.5 13Q15.925 13 16.2125 12.7125T16.5 12Q16.5 11.575 16.2125 11.2875T15.5 11Q15.075 11 14.7875 11.2875T14.5 12Q14.5 12.425 14.7875 12.7125T15.5 13ZM17.5 11Q17.925 11 18.2125 10.7125T18.5 10Q18.5 9.575 18.2125 9.2875T17.5 9Q17.075 9 16.7875 9.2875T16.5 10Q16.5 10.425 16.7875 10.7125T17.5 11ZM8.5 12.5Q8.825 12.5 9.0375 12.2875T9.25 11.75V10.75H10.25Q10.575 10.75 10.7875 10.5375T11 10Q11 9.675 10.7875 9.4625T10.25 9.25H9.25V8.25Q9.25 7.925 9.0375 7.7125T8.5 7.5Q8.175 7.5 7.9625 7.7125T7.75 8.25V9.25H6.75Q6.425 9.25 6.2125 9.4625T6 10Q6 10.325 6.2125 10.5375T6.75 10.75H7.75V11.75Q7.75 12.075 7.9625 12.2875T8.5 12.5ZM12 12Z"),
+    STADIA_CONTROLLER_FILL("M4.725 20q-1.5 0-2.5625-1.075T1.05 16.325q0-.225.025-.45t.075-.45l2.1-8.4q.35-1.35 1.425-2.1875T7.125 4h9.75q1.375 0 2.45.8375T20.75 7.025l2.1 8.4q.05.225.0875.4625t.0375.4625q0 1.525-1.0875 2.5875T19.275 20q-1.05 0-1.95-.55t-1.35-1.5l-.7-1.45q-.125-.25-.375-.375T14.375 16H9.625q-.275 0-.525.125t-.375.375l-.7 1.45q-.45.95-1.35 1.5T4.725 20ZM13.5 11q.425 0 .7125-.2875T14.5 10t-.2875-.7125T13.5 9t-.7125.2875T12.5 10t.2875.7125T13.5 11Zm2-2q.425 0 .7125-.2875T16.5 8q0-.425-.2875-.7125T15.5 7q-.425 0-.7125.2875T14.5 8t.2875.7125T15.5 9Zm0 4q.425 0 .7125-.2875T16.5 12q0-.425-.2875-.7125T15.5 11q-.425 0-.7125.2875T14.5 12t.2875.7125T15.5 13Zm2-2q.425 0 .7125-.2875T18.5 10q0-.425-.2875-.7125T17.5 9q-.425 0-.7125.2875T16.5 10q0 .425.2875.7125T17.5 11Zm-9 1.5q.325 0 .5375-.2125T9.25 11.75v-1h1q.325 0 .5375-.2125T11 10t-.2125-.5375T10.25 9.25h-1v-1q0-.325-.2125-.5375T8.5 7.5q-.325 0-.5375.2125T7.75 8.25v1h-1q-.325 0-.5375.2125T6 10q0 .325.2125.5375T6.75 10.75h1v1q0 .325.2125.5375T8.5 12.5Z"),
    STYLE("M3.975 19.8 3.125 19.45Q2.35 19.125 2.0875 18.325T2.175 16.75L3.975 12.85V19.8ZM7.975 22Q7.15 22 6.5625 21.4125T5.975 20V14L8.625 21.35Q8.7 21.525 8.775 21.6875T8.975 22H7.975ZM13.125 21.9Q12.325 22.2 11.575 21.825T10.525 20.65L6.075 8.45Q5.775 7.65 6.125 6.8875T7.275 5.85L14.825 3.1Q15.625 2.8 16.375 3.175T17.425 4.35L21.875 16.55Q22.175 17.35 21.825 18.1125T20.675 19.15L13.125 21.9ZM10.975 10Q11.4 10 11.6875 9.7125T11.975 9Q11.975 8.575 11.6875 8.2875T10.975 8Q10.55 8 10.2625 8.2875T9.975 9Q9.975 9.425 10.2625 9.7125T10.975 10ZM12.425 20 19.975 17.25 15.525 5 7.975 7.75 12.425 20ZM7.975 7.75 15.525 5 7.975 7.75Z"),
+    STYLE_FILL("M3.975 19.8l-.85-.35q-.775-.325-1.0375-1.125T2.175 16.75l1.8-3.9V19.8Zm4 2.2q-.825 0-1.4125-.5875T5.975 20V14l2.65 7.35q.075.175.15.3375t.2.3125h-1Zm5.15-.1q-.8.3-1.55-.075t-1.05-1.175L6.075 8.45q-.3-.8.05-1.5625T7.275 5.85l7.55-2.75q.8-.3 1.55.075t1.05 1.175l4.45 12.2q.3.8-.05 1.5625T20.675 19.15l-7.55 2.75ZM10.975 10q.425 0 .7125-.2875T11.975 9q0-.425-.2875-.7125T10.975 8t-.7125.2875T9.975 9t.2875.7125T10.975 10Z"),
    TEXTURE("M4.4-3Q3.925-3.1 3.5125-3.5125T3-4.4L19.6-21Q20.125-20.875 20.5-20.4875T21.025-19.6L4.4-3ZM3-9.3V-12.1L11.9-21H14.7L3-9.3ZM3-17V-19Q3-19.825 3.5875-20.4125T5-21H7L3-17ZM17-3 21-7V-5Q21-4.175 20.4125-3.5875T19-3H17ZM9.3-3 21-14.7V-11.9L12.1-3H9.3Z"),
    TRIP("M4 21Q3.175 21 2.5875 20.4125T2 19V8Q2 7.175 2.5875 6.5875T4 6H8V4Q8 3.175 8.5875 2.5875T10 2H14Q14.825 2 15.4125 2.5875T16 4V6H20Q20.825 6 21.4125 6.5875T22 8V19Q22 19.825 21.4125 20.4125T20 21H4ZM10 6H14V4H10V6ZM6 8H4V19H6V8ZM16 19V8H8V19H16ZM18 8V19H20V8H18ZM12 13.5Z"),
    TUNE("M11 21V15H13V17H21V19H13V21H11ZM3 19V17H9V19H3ZM7 15V13H3V11H7V9H9V15H7ZM11 13V11H21V13H11ZM15 9V3H17V5H21V7H17V9H15ZM3 7V5H13V7H3Z"),
@@ -112,6 +125,7 @@ public enum SVG {
    VISIBILITY_OFF("M16.1 13.3l-1.45-1.45q.225-1.175-.675-2.2t-2.325-.8L10.2 7.4q.425-.2.8625-.3T12 7q1.875 0 3.1875 1.3125T16.5 11.5q0 .5-.1.9375t-.3.8625Zm3.2 3.15-1.45-1.4q.95-.725 1.6875-1.5875T20.8 11.5q-1.25-2.525-3.5875-4.0125T12 6q-.725 0-1.425.1T9.2 6.4L7.65 4.85q1.025-.425 2.1-.6375T12 4q3.775 0 6.725 2.0875T23 11.5q-.575 1.475-1.5125 2.7375T19.3 16.45Zm.5 6.15-4.2-4.15q-.875.275-1.7625.4125T12 19q-3.775 0-6.725-2.0875T1 11.5q.525-1.325 1.325-2.4625T4.15 7L1.4 4.2 2.8 2.8 21.2 21.2l-1.4 1.4ZM5.55 8.4q-.725.65-1.325 1.425T3.2 11.5q1.25 2.525 3.5875 4.0125T12 17q.5 0 .975-.0625T13.95 16.8l-.9-.95q-.275.075-.525.1125T12 16q-1.875 0-3.1875-1.3125T7.5 11.5q0-.275.0375-.525T7.65 10.45L5.55 8.4Zm7.975 2.325ZM9.75 12.6Z"),
    WARNING("M1 21 12 2 23 21H1ZM4.45 19H19.55L12 6 4.45 19ZM12 18Q12.425 18 12.7125 17.7125T13 17Q13 16.575 12.7125 16.2875T12 16Q11.575 16 11.2875 16.2875T11 17Q11 17.425 11.2875 17.7125T12 18ZM11 15H13V10H11V15ZM12 12.5Z"),
    WB_SUNNY("M11 4V1H13V4H11ZM11 23V20H13V23H11ZM20 13V11H23V13H20ZM1 13V11H4V13H1ZM18.7 6.7 17.3 5.3 19.05 3.5 20.5 4.95 18.7 6.7ZM4.95 20.5 3.5 19.05 5.3 17.3 6.7 18.7 4.95 20.5ZM19.05 20.5 17.3 18.7 18.7 17.3 20.5 19.05 19.05 20.5ZM5.3 6.7 3.5 4.95 4.95 3.5 6.7 5.3 5.3 6.7ZM12 18Q9.5 18 7.75 16.25T6 12Q6 9.5 7.75 7.75T12 6Q14.5 6 16.25 7.75T18 12Q18 14.5 16.25 16.25T12 18ZM12 16Q13.675 16 14.8375 14.8375T16 12Q16 10.325 14.8375 9.1625T12 8Q10.325 8 9.1625 9.1625T8 12Q8 13.675 9.1625 14.8375T12 16ZM12 12Z"),
+    WB_SUNNY_FILL("M11 4V1h2V4H11Zm0 19V20h2v3H11Zm9-10V11h3v2H20ZM1 13V11H4v2H1ZM18.7 6.7 17.3 5.3l1.75-1.8L20.5 4.95 18.7 6.7ZM4.95 20.5 3.5 19.05 5.3 17.3l1.4 1.4-1.75 1.8Zm14.1 0-1.75-1.8 1.4-1.4 1.8 1.75-1.45 1.45ZM5.3 6.7 3.5 4.95 4.95 3.5 6.7 5.3 5.3 6.7ZM12 18q-2.5 0-4.25-1.75T6 12 7.75 7.75 12 6t4.25 1.75T18 12t-1.75 4.25T12 18Z"),
    ;

    public static final double DEFAULT_SIZE = 24;
@@ -139,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);
+    }
 }
@@ -26,6 +26,7 @@ import javafx.animation.KeyFrame;
 import javafx.animation.Timeline;
 import javafx.event.EventHandler;
 import javafx.scene.control.ScrollPane;
+import javafx.scene.control.skin.VirtualFlow;
 import javafx.scene.input.MouseEvent;
 import javafx.scene.input.ScrollEvent;
 import javafx.util.Duration;
@@ -50,8 +51,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.
@@ -66,16 +67,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;
+        };
    }

    /**
@@ -115,7 +110,7 @@ final class ScrollUtils {
     * default speed value of 1.
     */
    public static void addSmoothScrolling(ScrollPane scrollPane) {
-        addSmoothScrolling(scrollPane, 1);
+        addSmoothScrolling(scrollPane, DEFAULT_SPEED);
    }

    /**
@@ -124,7 +119,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);
    }

    /**
@@ -139,6 +134,21 @@ final class ScrollUtils {
        smoothScroll(scrollPane, speed, trackPadAdjustment);
    }

+    /// @author Glavo
+    public static void addSmoothScrolling(VirtualFlow<?> virtualFlow) {
+        addSmoothScrolling(virtualFlow, DEFAULT_SPEED);
+    }
+
+    /// @author Glavo
+    public static void addSmoothScrolling(VirtualFlow<?> virtualFlow, double speed) {
+        addSmoothScrolling(virtualFlow, speed, DEFAULT_TRACK_PAD_ADJUSTMENT);
+    }
+
+    /// @author Glavo
+    public static void addSmoothScrolling(VirtualFlow<?> virtualFlow, double speed, double trackPadAdjustment) {
+        smoothScroll(virtualFlow, speed, trackPadAdjustment);
+    }
+
    private static final double[] FRICTIONS = {0.99, 0.1, 0.05, 0.04, 0.03, 0.02, 0.01, 0.04, 0.01, 0.008, 0.008, 0.008, 0.008, 0.0006, 0.0005, 0.00003, 0.00001};
    private static final Duration DURATION = Duration.millis(3);

@@ -163,16 +173,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);
            }
        });
@@ -207,4 +217,51 @@ final class ScrollUtils {
        timeline.setCycleCount(Animation.INDEFINITE);
    }

+    /// @author Glavo
+    private static void smoothScroll(VirtualFlow<?> virtualFlow, double speed, double trackPadAdjustment) {
+        if (!virtualFlow.isVertical())
+            return;
+
+        final double[] derivatives = new double[FRICTIONS.length];
+
+        Timeline timeline = new Timeline();
+        final EventHandler<MouseEvent> mouseHandler = event -> timeline.stop();
+        final EventHandler<ScrollEvent> scrollHandler = event -> {
+            if (event.getEventType() == ScrollEvent.SCROLL) {
+                ScrollDirection scrollDirection = determineScrollDirection(event);
+                if (scrollDirection == ScrollDirection.LEFT || scrollDirection == ScrollDirection.RIGHT) {
+                    return;
+                }
+                double currentSpeed = isTrackPad(event, scrollDirection) ? speed / trackPadAdjustment : speed;
+
+                derivatives[0] += scrollDirection.intDirection * currentSpeed;
+                if (timeline.getStatus() == Status.STOPPED) {
+                    timeline.play();
+                }
+                event.consume();
+            }
+        };
+        virtualFlow.addEventFilter(MouseEvent.MOUSE_PRESSED, mouseHandler);
+        virtualFlow.addEventFilter(ScrollEvent.ANY, scrollHandler);
+
+        timeline.getKeyFrames().add(new KeyFrame(DURATION, event -> {
+            for (int i = 0; i < derivatives.length; i++) {
+                derivatives[i] *= FRICTIONS[i];
+            }
+            for (int i = 1; i < derivatives.length; i++) {
+                derivatives[i] += derivatives[i - 1];
+            }
+
+            double dy = derivatives[derivatives.length - 1];
+            virtualFlow.scrollPixels(dy);
+
+            if (Math.abs(dy) < 0.001) {
+                timeline.stop();
+            }
+        }));
+        timeline.setCycleCount(Animation.INDEFINITE);
+    }
+
+    private ScrollUtils() {
+    }
 }
@@ -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;
@@ -19,19 +19,21 @@ package org.jackhuang.hmcl.ui;

 import com.jfoenix.controls.JFXButton;
 import com.jfoenix.controls.JFXDialogLayout;
+import com.jfoenix.controls.JFXSpinner;
 import javafx.scene.control.Label;
-import javafx.scene.control.ProgressIndicator;
 import javafx.scene.control.ScrollPane;
+import org.jackhuang.hmcl.Metadata;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.construct.DialogCloseEvent;
 import org.jackhuang.hmcl.ui.construct.JFXHyperlink;
 import org.jackhuang.hmcl.upgrade.RemoteVersion;
+import org.jackhuang.hmcl.util.StringUtils;
+import org.jackhuang.hmcl.util.versioning.VersionNumber;
 import org.jsoup.Jsoup;
 import org.jsoup.nodes.Document;
 import org.jsoup.nodes.Node;

-import java.io.IOException;
 import java.net.URL;

 import static org.jackhuang.hmcl.Metadata.CHANGELOG_URL;
@@ -40,30 +42,30 @@ import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 import static org.jackhuang.hmcl.util.logging.Logger.LOG;

 public final class UpgradeDialog extends JFXDialogLayout {
+
    public UpgradeDialog(RemoteVersion remoteVersion, Runnable updateRunnable) {
        maxWidthProperty().bind(Controllers.getScene().widthProperty().multiply(0.7));
        maxHeightProperty().bind(Controllers.getScene().heightProperty().multiply(0.7));

        setHeading(new Label(i18n("update.changelog")));
-        setBody(new ProgressIndicator());
+        setBody(new JFXSpinner());

        String url = CHANGELOG_URL + remoteVersion.getChannel().channelName + ".html";
-        boolean isPreview = remoteVersion.isPreview();
-        Task.supplyAsync(Schedulers.io(), () -> {
-            Document document = Jsoup.parse(new URL(url), 30 * 1000);
-            String id = null;
-            Node node = null;
-            if (isPreview) {
-                id = "nowpreview";
-                node = document.selectFirst("#" + id);
-            }
-            if (node == null) {
-                id = "nowchange";
-                node = document.selectFirst("#" + id);
-            }

-            if (node == null || !"h1".equals(node.nodeName()))
-                throw new IOException("Cannot find current changelog in document");
+        Task.supplyAsync(Schedulers.io(), () -> {
+            VersionNumber targetVersion = VersionNumber.asVersion(remoteVersion.getVersion());
+            VersionNumber currentVersion = VersionNumber.asVersion(Metadata.VERSION);
+            if (targetVersion.compareTo(currentVersion) <= 0)
+                // Downgrade update, no need to display changelog
+                return null;
+
+            Document document = Jsoup.parse(new URL(url), 30 * 1000);
+            Node node = document.selectFirst("h1[data-version=\"%s\"]".formatted(targetVersion));
+
+            if (node == null || !"h1".equals(node.nodeName())) {
+                LOG.warning("Changelog not found");
+                return null;
+            }

            HTMLRenderer renderer = new HTMLRenderer(uri -> {
                LOG.info("Open link: " + uri);
@@ -71,8 +73,11 @@ public final class UpgradeDialog extends JFXDialogLayout {
            });

            do {
-                if ("h1".equals(node.nodeName()) && !id.equals(node.attr("id"))) {
-                    break;
+                if ("h1".equals(node.nodeName())) {
+                    String changelogVersion = node.attr("data-version");
+                    if (StringUtils.isBlank(changelogVersion) || currentVersion.compareTo(changelogVersion) >= 0) {
+                        break;
+                    }
                }
                renderer.appendNode(node);
                node = node.nextSibling();
@@ -82,10 +87,14 @@ public final class UpgradeDialog extends JFXDialogLayout {
            return renderer.render();
        }).whenComplete(Schedulers.javafx(), (result, exception) -> {
            if (exception == null) {
-                ScrollPane scrollPane = new ScrollPane(result);
-                scrollPane.setFitToWidth(true);
-                FXUtils.smoothScrolling(scrollPane);
-                setBody(scrollPane);
+                if (result != null) {
+                    ScrollPane scrollPane = new ScrollPane(result);
+                    scrollPane.setFitToWidth(true);
+                    FXUtils.smoothScrolling(scrollPane);
+                    setBody(scrollPane);
+                } else {
+                    setBody();
+                }
            } else {
                LOG.warning("Failed to load update log, trying to open it in browser");
                FXUtils.openLink(url);
@@ -0,0 +1,60 @@
+/*
+ * 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.ui;
+
+import javafx.stage.Stage;
+import javafx.stage.Window;
+
+import java.lang.invoke.MethodHandle;
+import java.lang.invoke.MethodHandles;
+import java.lang.invoke.MethodType;
+import java.util.OptionalLong;
+
+import static org.jackhuang.hmcl.util.logging.Logger.LOG;
+
+/// @author Glavo
+public final class WindowsNativeUtils {
+
+    public static OptionalLong getWindowHandle(Stage stage) {
+        try {
+            Class<?> windowStageClass = Class.forName("com.sun.javafx.tk.quantum.WindowStage");
+            Class<?> glassWindowClass = Class.forName("com.sun.glass.ui.Window");
+            Class<?> tkStageClass = Class.forName("com.sun.javafx.tk.TKStage");
+
+            Object tkStage = MethodHandles.privateLookupIn(Window.class, MethodHandles.lookup())
+                    .findVirtual(Window.class, "getPeer", MethodType.methodType(tkStageClass))
+                    .invoke(stage);
+
+            MethodHandles.Lookup windowStageLookup = MethodHandles.privateLookupIn(windowStageClass, MethodHandles.lookup());
+            MethodHandle getPlatformWindow = windowStageLookup.findVirtual(windowStageClass, "getPlatformWindow", MethodType.methodType(glassWindowClass));
+            Object platformWindow = getPlatformWindow.invoke(tkStage);
+
+            long handle = (long) MethodHandles.privateLookupIn(glassWindowClass, MethodHandles.lookup())
+                    .findVirtual(glassWindowClass, "getNativeWindow", MethodType.methodType(long.class))
+                    .invoke(platformWindow);
+
+            return OptionalLong.of(handle);
+        } catch (Throwable ex) {
+            LOG.warning("Failed to get window handle", ex);
+            return OptionalLong.empty();
+        }
+    }
+
+    private WindowsNativeUtils() {
+    }
+}
@@ -68,6 +68,10 @@ public class AccountAdvancedListItem extends AdvancedListItem {
    };

    public AccountAdvancedListItem() {
+        this(null);
+    }
+
+    public AccountAdvancedListItem(Account account) {
        tooltip = new Tooltip();
        FXUtils.installFastTooltip(this, tooltip);

@@ -76,9 +80,13 @@ public class AccountAdvancedListItem extends AdvancedListItem {

        setActionButtonVisible(false);

-        FXUtils.onScroll(this, Accounts.getAccounts(),
-                accounts -> accounts.indexOf(account.get()),
-                Accounts::setSelectedAccount);
+        if (account != null) {
+            this.accountProperty().set(account);
+        } else {
+            FXUtils.onScroll(this, Accounts.getAccounts(),
+                    accounts -> accounts.indexOf(accountProperty().get()),
+                    Accounts::setSelectedAccount);
+        }
    }

    public ObjectProperty<Account> accountProperty() {
@@ -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);
@@ -19,7 +19,13 @@ package org.jackhuang.hmcl.ui.account;

 import com.jfoenix.controls.JFXButton;
 import javafx.beans.binding.Bindings;
-import javafx.beans.property.*;
+import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.ListProperty;
+import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.ReadOnlyObjectProperty;
+import javafx.beans.property.ReadOnlyObjectWrapper;
+import javafx.beans.property.SimpleBooleanProperty;
+import javafx.beans.property.SimpleListProperty;
 import javafx.beans.value.ChangeListener;
 import javafx.beans.value.ObservableValue;
 import javafx.collections.FXCollections;
@@ -33,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;
@@ -45,51 +50,23 @@ import org.jackhuang.hmcl.util.i18n.LocaleUtils;
 import org.jackhuang.hmcl.util.io.NetworkUtils;
 import org.jackhuang.hmcl.util.javafx.BindingMapping;
 import org.jackhuang.hmcl.util.javafx.MappedObservableList;
-import org.jackhuang.hmcl.util.platform.NativeUtils;
-import org.jackhuang.hmcl.util.platform.OperatingSystem;
-import org.jackhuang.hmcl.util.platform.windows.Kernel32;
-import org.jackhuang.hmcl.util.platform.windows.WinConstants;

-import java.time.Duration;
-import java.time.ZoneId;
-import java.time.ZonedDateTime;
 import java.util.Locale;

 import static org.jackhuang.hmcl.setting.ConfigHolder.globalConfig;
 import static org.jackhuang.hmcl.ui.versions.VersionPage.wrap;
-import static org.jackhuang.hmcl.util.logging.Logger.LOG;
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 import static org.jackhuang.hmcl.util.javafx.ExtendedProperties.createSelectedItemPropertyFor;
+import static org.jackhuang.hmcl.util.logging.Logger.LOG;

 public final class AccountListPage extends DecoratorAnimatedPage implements DecoratorPage {
    static final BooleanProperty RESTRICTED = new SimpleBooleanProperty(true);

-    private static boolean isExemptedRegion() {
-        if ("Asia/Shanghai".equals(ZoneId.systemDefault().getId()))
-            return true;
-
-        // Check if the time zone is UTC+8
-        if (ZonedDateTime.now().getOffset().getTotalSeconds() == Duration.ofHours(8).toSeconds()) {
-            if ("CN".equals(LocaleUtils.SYSTEM_DEFAULT.getCountry()))
-                return true;
-
-            if (OperatingSystem.CURRENT_OS == OperatingSystem.WINDOWS && NativeUtils.USE_JNA) {
-                Kernel32 kernel32 = Kernel32.INSTANCE;
-
-                // https://learn.microsoft.com/windows/win32/intl/table-of-geographical-locations
-                if (kernel32 != null && kernel32.GetUserGeoID(WinConstants.GEOCLASS_NATION) == 45) // China
-                    return true;
-            }
-        }
-
-        return false;
-    }
-
    static {
        String property = System.getProperty("hmcl.offline.auth.restricted", "auto");

        if ("false".equals(property)
-                || "auto".equals(property) && isExemptedRegion()
+                || "auto".equals(property) && LocaleUtils.IS_CHINA_MAINLAND
                || globalConfig().isEnableOfflineAccount())
            RESTRICTED.set(false);
        else
@@ -180,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);
@@ -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;
@@ -264,10 +263,12 @@ public class CreateAccountPane extends JFXDialogLayout implements DialogAware {
        };

        if (factory instanceof OfflineAccountFactory && username != null && (!USERNAME_CHECKER_PATTERN.matcher(username).matches() || username.length() > 16)) {
-            Controllers.confirmActionDanger(i18n("account.methods.offline.name.invalid"), i18n("message.warning"), doCreate, () -> {
-                body.setDisable(false);
-                spinner.hideSpinner();
-            });
+            Controllers.confirmWithCountdown(i18n("account.methods.offline.name.invalid"), i18n("message.warning"), 10,
+                    MessageDialogPane.MessageType.WARNING,
+                    doCreate, () -> {
+                        body.setDisable(false);
+                        spinner.hideSpinner();
+                    });
        } else {
            doCreate.run();
        }
@@ -463,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());
@@ -1,32 +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.ui.animation;
-
-import javafx.scene.Node;
-import javafx.scene.layout.Pane;
-import javafx.util.Duration;
-
-public interface AnimationHandler {
-    Duration getDuration();
-
-    Pane getCurrentRoot();
-
-    Node getPreviousNode();
-
-    Node getCurrentNode();
-}
@@ -17,6 +17,7 @@
 */
 package org.jackhuang.hmcl.ui.animation;

+import javafx.scene.Node;
 import org.jackhuang.hmcl.setting.ConfigHolder;
 import org.jackhuang.hmcl.util.platform.OperatingSystem;

@@ -46,4 +47,12 @@ public final class AnimationUtils {
    public static boolean playWindowAnimation() {
        return PLAY_WINDOW_ANIMATION;
    }
+
+    public static void reset(Node node, boolean opaque) {
+        node.setTranslateX(0);
+        node.setTranslateY(0);
+        node.setScaleX(1);
+        node.setScaleY(1);
+        node.setOpacity(opaque ? 1 : 0);
+    }
 }
@@ -17,36 +17,30 @@
 */
 package org.jackhuang.hmcl.ui.animation;

-import javafx.animation.Interpolator;
-import javafx.animation.KeyFrame;
-import javafx.animation.KeyValue;
+import javafx.animation.*;
+import javafx.scene.Node;
+import javafx.scene.layout.Pane;
 import javafx.util.Duration;
-import org.jackhuang.hmcl.ui.FXUtils;
-import org.jetbrains.annotations.Nullable;
+import org.jackhuang.hmcl.ui.decorator.DecoratorAnimatedPage;

-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
-
-public enum ContainerAnimations implements AnimationProducer {
+public enum ContainerAnimations implements TransitionPane.AnimationProducer {
    NONE {
        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setTranslateX(0);
-            c.getPreviousNode().setTranslateY(0);
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
+        public void init(TransitionPane container, Node previousNode, Node nextNode) {
+            AnimationUtils.reset(previousNode, false);
+            AnimationUtils.reset(nextNode, true);
        }

        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Collections.emptyList();
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            return new Timeline();
+        }
+
+        @Override
+        public TransitionPane.AnimationProducer opposite() {
+            return this;
        }
    },

@@ -55,151 +49,50 @@ public enum ContainerAnimations implements AnimationProducer {
     */
    FADE {
        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setTranslateX(0);
-            c.getPreviousNode().setTranslateY(0);
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(0);
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            return new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(previousNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(previousNode.opacityProperty(), 0, interpolator),
+                            new KeyValue(nextNode.opacityProperty(), 1, interpolator)));
        }

        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, Interpolator.EASE_BOTH)));
+        public TransitionPane.AnimationProducer opposite() {
+            return this;
        }
    },

-    /**
-     * A fade between the old and new view
-     */
-    FADE_IN {
-        @Override
-        public void init(AnimationHandler c) {
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(0);
-        }
-
-        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, FXUtils.SINE)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, FXUtils.SINE)));
-        }
-    },
-
-    /**
-     * A fade between the old and new view
-     */
-    FADE_OUT {
-        @Override
-        public void init(AnimationHandler c) {
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
-        }
-
-        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, FXUtils.SINE)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, FXUtils.SINE)));
-        }
-    },
-    /**
-     * A zoom effect
-     */
-    ZOOM_IN {
-        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setTranslateX(0);
-            c.getPreviousNode().setTranslateY(0);
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-        }
-
-        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getPreviousNode().scaleXProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().scaleYProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getPreviousNode().scaleXProperty(), 4, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().scaleYProperty(), 4, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH)));
-        }
-    },
-    /**
-     * A zoom effect
-     */
-    ZOOM_OUT {
-        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setTranslateX(0);
-            c.getPreviousNode().setTranslateY(0);
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(0);
-            c.getCurrentNode().setTranslateY(0);
-        }
-
-        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getPreviousNode().scaleXProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().scaleYProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getPreviousNode().scaleXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().scaleYProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH)));
-        }
-    },
    /**
     * A swipe effect
     */
    SWIPE_LEFT {
        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(0);
-            c.getPreviousNode().setTranslateX(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(c.getCurrentRoot().getWidth());
+        public void init(TransitionPane container, Node previousNode, Node nextNode) {
+            AnimationUtils.reset(previousNode, true);
+            AnimationUtils.reset(nextNode, true);
+            nextNode.setTranslateX(container.getWidth());
        }

        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().translateXProperty(), c.getCurrentRoot().getWidth(), Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 0, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), -c.getCurrentRoot().getWidth(), Interpolator.EASE_BOTH)));
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            return new Timeline(new KeyFrame(Duration.ZERO,
+                    new KeyValue(nextNode.translateXProperty(), container.getWidth(), interpolator),
+                    new KeyValue(previousNode.translateXProperty(), 0, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.translateXProperty(), 0, interpolator),
+                            new KeyValue(previousNode.translateXProperty(), -container.getWidth(), interpolator)));
+        }
+
+        @Override
+        public TransitionPane.AnimationProducer opposite() {
+            return SWIPE_RIGHT;
        }
    },

@@ -208,105 +101,154 @@ public enum ContainerAnimations implements AnimationProducer {
     */
    SWIPE_RIGHT {
        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(0);
-            c.getPreviousNode().setTranslateX(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(-c.getCurrentRoot().getWidth());
+        public void init(TransitionPane container, Node previousNode, Node nextNode) {
+            AnimationUtils.reset(previousNode, true);
+            AnimationUtils.reset(nextNode, true);
+            nextNode.setTranslateX(-container.getWidth());
        }

        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().translateXProperty(), -c.getCurrentRoot().getWidth(), Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 0, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), c.getCurrentRoot().getWidth(), Interpolator.EASE_BOTH)));
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            return new Timeline(new KeyFrame(Duration.ZERO,
+                    new KeyValue(nextNode.translateXProperty(), -container.getWidth(), interpolator),
+                    new KeyValue(previousNode.translateXProperty(), 0, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.translateXProperty(), 0, interpolator),
+                            new KeyValue(previousNode.translateXProperty(), container.getWidth(), interpolator)));
+        }
+
+        @Override
+        public TransitionPane.AnimationProducer opposite() {
+            return SWIPE_LEFT;
        }
    },

-    SWIPE_LEFT_FADE_SHORT {
+    /// @see <a href="https://m3.material.io/styles/motion/transitions/transition-patterns">Transitions - Material Design 3</a>
+    FORWARD {
        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(0);
-            c.getPreviousNode().setTranslateX(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(c.getCurrentRoot().getWidth());
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            double offset = container.getWidth() > 0 ? container.getWidth() * 0.2 : 50;
+            return new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(previousNode.translateXProperty(), 0, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator)),
+                    new KeyFrame(duration.multiply(0.5),
+                            new KeyValue(previousNode.translateXProperty(), -offset, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 0, interpolator),
+
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                            new KeyValue(nextNode.translateXProperty(), offset, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.translateXProperty(), 0, interpolator))
+            );
        }

        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 50, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), -50, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH)));
+        public TransitionPane.AnimationProducer opposite() {
+            return BACKWARD;
        }
    },

-    SWIPE_RIGHT_FADE_SHORT {
+    /// @see <a href="https://m3.material.io/styles/motion/transitions/transition-patterns">Transitions - Material Design 3</a>
+    BACKWARD {
        @Override
-        public void init(AnimationHandler c) {
-            c.getPreviousNode().setScaleX(1);
-            c.getPreviousNode().setScaleY(1);
-            c.getPreviousNode().setOpacity(0);
-            c.getPreviousNode().setTranslateX(0);
-            c.getCurrentNode().setScaleX(1);
-            c.getCurrentNode().setScaleY(1);
-            c.getCurrentNode().setOpacity(1);
-            c.getCurrentNode().setTranslateX(c.getCurrentRoot().getWidth());
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            double offset = container.getWidth() > 0 ? container.getWidth() * 0.2 : 50;
+            return new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(previousNode.translateXProperty(), 0, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator)),
+                    new KeyFrame(duration.multiply(0.5),
+                            new KeyValue(previousNode.translateXProperty(), offset, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 0, interpolator),
+
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                            new KeyValue(nextNode.translateXProperty(), -offset, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.translateXProperty(), 0, interpolator))
+            );
        }

        @Override
-        public List<KeyFrame> animate(AnimationHandler c) {
-            return Arrays.asList(new KeyFrame(Duration.ZERO,
-                            new KeyValue(c.getCurrentNode().translateXProperty(), -50, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 1, Interpolator.EASE_BOTH)),
-                    new KeyFrame(c.getDuration(),
-                            new KeyValue(c.getCurrentNode().translateXProperty(), 0, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().translateXProperty(), 50, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getCurrentNode().opacityProperty(), 1, Interpolator.EASE_BOTH),
-                            new KeyValue(c.getPreviousNode().opacityProperty(), 0, Interpolator.EASE_BOTH)));
+        public TransitionPane.AnimationProducer opposite() {
+            return FORWARD;
        }
-    };
+    },

-    private ContainerAnimations opposite;
+    /// Imitates the animation when switching tabs in the Windows 11 Settings interface
+    SLIDE_UP_FADE_IN {
+        @Override
+        public Timeline animate(
+                Pane container, Node previousNode, Node nextNode,
+                Duration duration, Interpolator interpolator) {
+            double offset = container.getHeight() > 0 ? container.getHeight() * 0.2 : 50;
+            return new Timeline(
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(previousNode.translateYProperty(), 0, interpolator),
+                            new KeyValue(previousNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                            new KeyValue(nextNode.translateYProperty(), offset, interpolator)),
+                    new KeyFrame(duration.multiply(0.5),
+                            new KeyValue(previousNode.opacityProperty(), 0, interpolator)),
+                    new KeyFrame(duration,
+                            new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                            new KeyValue(nextNode.translateYProperty(), 0, interpolator))
+            );
+        }
+    },

-    static {
-        NONE.opposite = NONE;
-        FADE.opposite = FADE;
-        SWIPE_LEFT.opposite = SWIPE_RIGHT;
-        SWIPE_RIGHT.opposite = SWIPE_LEFT;
-        FADE_IN.opposite = FADE_OUT;
-        FADE_OUT.opposite = FADE_IN;
-        ZOOM_IN.opposite = ZOOM_OUT;
-        ZOOM_OUT.opposite = ZOOM_IN;
-    }
+    NAVIGATION {
+        @Override
+        public Animation animate(Pane container, Node previousNode, Node nextNode, Duration duration, Interpolator interpolator) {
+            Timeline timeline = new Timeline();
+            Duration halfDuration = duration.divide(2);

-    @Override
-    public abstract void init(AnimationHandler handler);
+            timeline.getKeyFrames().add(new KeyFrame(Duration.ZERO,
+                    new KeyValue(previousNode.opacityProperty(), 1, interpolator)));
+            timeline.getKeyFrames().add(new KeyFrame(halfDuration,
+                    new KeyValue(previousNode.opacityProperty(), 0, interpolator)));
+            if (previousNode instanceof DecoratorAnimatedPage prevPage) {
+                Node left = prevPage.getLeft();
+                Node center = prevPage.getCenter();

-    @Override
-    public abstract List<KeyFrame> animate(AnimationHandler handler);
+                timeline.getKeyFrames().add(new KeyFrame(Duration.ZERO,
+                        new KeyValue(left.translateXProperty(), 0, interpolator),
+                        new KeyValue(center.translateXProperty(), 0, interpolator)));
+                timeline.getKeyFrames().add(new KeyFrame(halfDuration,
+                        new KeyValue(left.translateXProperty(), -30, interpolator),
+                        new KeyValue(center.translateXProperty(), 30, interpolator)));
+            }

-    @Override
-    public @Nullable ContainerAnimations opposite() {
-        return opposite;
-    }
+            timeline.getKeyFrames().add(new KeyFrame(Duration.ZERO,
+                    new KeyValue(nextNode.opacityProperty(), 0, interpolator)));
+            timeline.getKeyFrames().add(new KeyFrame(halfDuration,
+                    new KeyValue(nextNode.opacityProperty(), 0, interpolator)));
+            timeline.getKeyFrames().add(new KeyFrame(duration,
+                    new KeyValue(nextNode.opacityProperty(), 1, interpolator)));
+            if (nextNode instanceof DecoratorAnimatedPage nextPage) {
+                Node left = nextPage.getLeft();
+                Node center = nextPage.getCenter();
+
+                timeline.getKeyFrames().add(new KeyFrame(halfDuration,
+                        new KeyValue(left.translateXProperty(), -30, interpolator),
+                        new KeyValue(center.translateXProperty(), 30, interpolator)));
+                timeline.getKeyFrames().add(new KeyFrame(duration,
+                        new KeyValue(left.translateXProperty(), 0, interpolator),
+                        new KeyValue(center.translateXProperty(), 0, interpolator)));
+            }
+
+            return timeline;
+        }
+    },
+    ;
 }
@@ -0,0 +1,781 @@
+/*
+ * 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.ui.animation;
+
+import javafx.animation.Interpolator;
+import javafx.util.Duration;
+
+import java.util.Objects;
+
+/// @author Glavo
+/// @see <a href="https://api.flutter.dev/flutter/animation/Curves-class.html">Flutter Curves</a>
+public final class Motion {
+
+    //region Curves
+
+    /// A linear animation curve.
+    ///
+    /// This is the identity map over the unit interval: its [Interpolator#curve(double)]
+    /// method returns its input unmodified. This is useful as a default curve for
+    /// cases where a [Interpolator] is required but no actual curve is desired.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_linear.mp4">curve_linear.mp4</a>
+    public static final Interpolator LINEAR = Interpolator.LINEAR;
+
+    /// The emphasizedAccelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static final Interpolator EMPHASIZED_ACCELERATE = new Cubic(0.3, 0.0, 0.8, 0.15);
+
+    /// The emphasizedDecelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static final Interpolator EMPHASIZED_DECELERATE = new Cubic(0.05, 0.7, 0.1, 1.0);
+
+    /// The standard easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static final Interpolator STANDARD = new Cubic(0.2, 0.0, 0.0, 1.0);
+
+    /// The standardAccelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static final Interpolator STANDARD_ACCELERATE = new Cubic(0.3, 0.0, 1.0, 1.0);
+
+    /// The standardDecelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static Interpolator STANDARD_DECELERATE = new Cubic(0.0, 0.0, 0.0, 1.0);
+
+    /// The legacyDecelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static Interpolator LEGACY_DECELERATE = new Cubic(0.0, 0.0, 0.2, 1.0);
+
+    /// The legacyAccelerate easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static Interpolator LEGACY_ACCELERATE = new Cubic(0.4, 0.0, 1.0, 1.0);
+
+    /// The legacy easing curve in the Material specification.
+    ///
+    /// See also:
+    ///
+    /// * [M3 guidelines: Easing tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs#433b1153-2ea3-4fe2-9748-803a47bc97ee)
+    /// * [M3 guidelines: Applying easing and duration](https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration)
+    public static Interpolator LEGACY = new Cubic(0.4, 0.0, 0.2, 1.0);
+
+    /// A cubic animation curve that speeds up quickly and ends slowly.
+    ///
+    /// This is the same as the CSS easing function `ease`.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease.mp4">curve_ease.mp4</a>
+    public static final Interpolator EASE = new Cubic(0.25, 0.1, 0.25, 1.0);
+
+    /// A cubic animation curve that starts slowly and ends quickly.
+    ///
+    /// This is the same as the CSS easing function `ease-in`.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in.mp4">curve_ease_in.mp4</a>
+    public static final Interpolator EASE_IN = new Cubic(0.42, 0.0, 1.0, 1.0);
+
+    /// A cubic animation curve that starts slowly and ends linearly.
+    ///
+    /// The symmetric animation to [#LINEAR_TO_EASE_OUT].
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_to_linear.mp4">curve_ease_in_to_linear.mp4</a>
+    public static final Interpolator EASE_IN_TO_LINEAR = new Cubic(0.67, 0.03, 0.65, 0.09);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This is
+    /// similar to [#EASE_IN], but with sinusoidal easing for a slightly less
+    /// abrupt beginning and end. Nonetheless, the result is quite gentle and is
+    /// hard to distinguish from [#linear] at a glance.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_sine.mp4">curve_ease_in_sine.mp4</a>
+    public static final Interpolator EASE_IN_SINE = new Cubic(0.47, 0.0, 0.745, 0.715);
+
+    /// A cubic animation curve that starts slowly and ends quickly. Based on a
+    /// quadratic equation where `f(t) = t²`, this is effectively the inverse of
+    /// [#decelerate].
+    ///
+    /// Compared to [#EASE_IN_SINE], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_quad.mp4">curve_ease_in_quad.mp4</a>
+    public static final Interpolator EASE_IN_QUAD = new Cubic(0.55, 0.085, 0.68, 0.53);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// based on a cubic equation where `f(t) = t³`. The result is a safe sweet
+    /// spot when choosing a curve for widgets animating off the viewport.
+    ///
+    /// Compared to [#EASE_IN_QUAD], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_cubic.mp4">curve_ease_in_cubic.mp4</a>
+    public static final Interpolator EASE_IN_CUBIC = new Cubic(0.55, 0.055, 0.675, 0.19);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// based on a quartic equation where `f(t) = t⁴`.
+    ///
+    /// Animations using this curve or steeper curves will benefit from a longer
+    /// duration to avoid motion feeling unnatural.
+    ///
+    /// Compared to [#EASE_IN_CUBIC], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_quart.mp4">curve_ease_in_quart.mp4</a>
+    public static final Interpolator EASE_IN_QUART = new Cubic(0.895, 0.03, 0.685, 0.22);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// based on a quintic equation where `f(t) = t⁵`.
+    ///
+    /// Compared to [#EASE_IN_QUART], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_quint.mp4">curve_ease_in_quint.mp4</a>
+    public static final Interpolator EASE_IN_QUINT = new Cubic(0.755, 0.05, 0.855, 0.06);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// based on an exponential equation where `f(t) = 2¹⁰⁽ᵗ⁻¹⁾`.
+    ///
+    /// Using this curve can give your animations extra flare, but a longer
+    /// duration may need to be used to compensate for the steepness of the curve.
+    ///
+    /// Compared to [#EASE_IN_QUINT], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_expo.mp4">curve_ease_in_expo.mp4</a>
+    public static final Interpolator EASE_IN_EXPO = new Cubic(0.95, 0.05, 0.795, 0.035);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve is
+    /// effectively the bottom-right quarter of a circle.
+    ///
+    /// Like [#EASE_IN_EXPO], this curve is fairly dramatic and will reduce
+    /// the clarity of an animation if not given a longer duration.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_circ.mp4">curve_ease_in_circ.mp4</a>
+    public static final Interpolator EASE_IN_CIRC = new Cubic(0.6, 0.04, 0.98, 0.335);
+
+    /// A cubic animation curve that starts slowly and ends quickly. This curve
+    /// is similar to [#elasticIn] in that it overshoots its bounds before
+    /// reaching its end. Instead of repeated swinging motions before ascending,
+    /// though, this curve overshoots once, then continues to ascend.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_back.mp4">curve_ease_in_back.mp4</a>
+    public static final Interpolator EASE_IN_BACK = new Cubic(0.6, -0.28, 0.735, 0.045);
+
+    /// A cubic animation curve that starts quickly and ends slowly.
+    ///
+    /// This is the same as the CSS easing function `ease-out`.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out.mp4">curve_ease_out.mp4</a>
+    public static final Interpolator EASE_OUT = new Cubic(0.0, 0.0, 0.58, 1.0);
+
+    /// A cubic animation curve that starts linearly and ends slowly.
+    ///
+    /// A symmetric animation to [#EASE_IN_TO_LINEAR].
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_linear_to_ease_out.mp4">curve_linear_to_ease_out.mp4</a>
+    public static final Interpolator LINEAR_TO_EASE_OUT = new Cubic(0.35, 0.91, 0.33, 0.97);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This is
+    /// similar to [#EASE_OUT], but with sinusoidal easing for a slightly
+    /// less abrupt beginning and end. Nonetheless, the result is quite gentle and
+    /// is hard to distinguish from [#linear] at a glance.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_sine.mp4">curve_ease_out_sine.mp4</a>
+    public static final Interpolator EASE_OUT_SINE = new Cubic(0.39, 0.575, 0.565, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This is
+    /// effectively the same as [#decelerate], only simulated using a cubic
+    /// bezier function.
+    ///
+    /// Compared to [#EASE_OUT_SINE], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_quad.mp4">curve_ease_out_quad.mp4</a>
+    public static final Interpolator EASE_OUT_QUAD = new Cubic(0.25, 0.46, 0.45, 0.94);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// a flipped version of [#EASE_IN_CUBIC].
+    ///
+    /// The result is a safe sweet spot when choosing a curve for animating a
+    /// widget's position entering or already inside the viewport.
+    ///
+    /// Compared to [#EASE_OUT_QUAD], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_cubic.mp4">curve_ease_out_cubic.mp4</a>
+    public static final Interpolator EASE_OUT_CUBIC = new Cubic(0.215, 0.61, 0.355, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// a flipped version of [#EASE_IN_QUART].
+    ///
+    /// Animations using this curve or steeper curves will benefit from a longer
+    /// duration to avoid motion feeling unnatural.
+    ///
+    /// Compared to [#EASE_OUT_CUBIC], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_quart.mp4">curve_ease_out_quart.mp4</a>
+    public static final Interpolator EASE_OUT_QUART = new Cubic(0.165, 0.84, 0.44, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// a flipped version of [#EASE_IN_QUINT].
+    ///
+    /// Compared to [#EASE_OUT_QUART], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_quint.mp4">curve_ease_out_quint.mp4</a>
+    public static final Interpolator EASE_OUT_QUINT = new Cubic(0.23, 1.0, 0.32, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// a flipped version of [#EASE_IN_EXPO]. Using this curve can give your
+    /// animations extra flare, but a longer duration may need to be used to
+    /// compensate for the steepness of the curve.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_expo.mp4">curve_ease_out_expo.mp4</a>
+    public static final Interpolator EASE_OUT_EXPO = new Cubic(0.19, 1.0, 0.22, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// effectively the top-left quarter of a circle.
+    ///
+    /// Like [#EASE_OUT_EXPO], this curve is fairly dramatic and will reduce
+    /// the clarity of an animation if not given a longer duration.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_circ.mp4">curve_ease_out_circ.mp4</a>
+    public static final Interpolator EASE_OUT_CIRC = new Cubic(0.075, 0.82, 0.165, 1.0);
+
+    /// A cubic animation curve that starts quickly and ends slowly. This curve is
+    /// similar to [#elasticOut] in that it overshoots its bounds before
+    /// reaching its end. Instead of repeated swinging motions after ascending,
+    /// though, this curve only overshoots once.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_out_back.mp4">curve_ease_out_back.mp4</a>
+    public static final Interpolator EASE_OUT_BACK = new Cubic(0.175, 0.885, 0.32, 1.275);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly.
+    ///
+    /// This is the same as the CSS easing function `ease-in-out`.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out.mp4">curve_ease_in_out.mp4</a>
+    public static final Interpolator EASE_IN_OUT = new Cubic(0.42, 0.0, 0.58, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This is similar to [#EASE_IN_OUT], but with sinusoidal easing
+    /// for a slightly less abrupt beginning and end.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_sine.mp4">curve_ease_in_out_sine.mp4</a>
+    public static final Interpolator EASE_IN_OUT_SINE = new Cubic(0.445, 0.05, 0.55, 0.95);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_QUAD] as the first
+    /// half, and [#EASE_OUT_QUAD] as the second.
+    ///
+    /// Compared to [#EASE_IN_OUT_SINE], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_quad.mp4">curve_ease_in_out_quad.mp4</a>
+    public static final Interpolator EASE_IN_OUT_QUAD = new Cubic(0.455, 0.03, 0.515, 0.955);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_CUBIC] as the first
+    /// half, and [#EASE_OUT_CUBIC] as the second.
+    ///
+    /// The result is a safe sweet spot when choosing a curve for a widget whose
+    /// initial and final positions are both within the viewport.
+    ///
+    /// Compared to [#EASE_IN_OUT_QUAD], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_cubic.mp4">curve_ease_in_out_cubic.mp4</a>
+    public static final Interpolator EASE_IN_OUT_CUBIC = new Cubic(0.645, 0.045, 0.355, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_QUART] as the first
+    /// half, and [#EASE_OUT_QUART] as the second.
+    ///
+    /// Animations using this curve or steeper curves will benefit from a longer
+    /// duration to avoid motion feeling unnatural.
+    ///
+    /// Compared to [#EASE_IN_OUT_CUBIC], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_quart.mp4">curve_ease_in_out_quart.mp4</a>
+    public static final Interpolator EASE_IN_OUT_QUART = new Cubic(0.77, 0.0, 0.175, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_QUINT] as the first
+    /// half, and [#EASE_OUT_QUINT] as the second.
+    ///
+    /// Compared to [#EASE_IN_OUT_QUART], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_quint.mp4">curve_ease_in_out_quint.mp4</a>
+    public static final Interpolator EASE_IN_OUT_QUINT = new Cubic(0.86, 0.0, 0.07, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly.
+    ///
+    /// Since this curve is arrived at with an exponential function, the midpoint
+    /// is exceptionally steep. Extra consideration should be taken when designing
+    /// an animation using this.
+    ///
+    /// Compared to [#EASE_IN_OUT_QUINT], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_expo.mp4">curve_ease_in_out_expo.mp4</a>
+    public static final Interpolator EASE_IN_OUT_EXPO = new Cubic(1.0, 0.0, 0.0, 1.0);
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_CIRC] as the first
+    /// half, and [#EASE_OUT_CIRC] as the second.
+    ///
+    /// Like [#EASE_IN_OUT_EXPO], this curve is fairly dramatic and will reduce
+    /// the clarity of an animation if not given a longer duration.
+    ///
+    /// Compared to [#EASE_IN_OUT_EXPO], this curve is slightly steeper.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_circ.mp4">curve_ease_in_out_circ.mp4</a>
+    public static final Interpolator EASE_IN_OUT_CIRC = new Cubic(0.785, 0.135, 0.15, 0.86);
+
+    /// A cubic animation curve that starts slowly, speeds up shortly thereafter,
+    /// and then ends slowly. This curve can be imagined as a steeper version of
+    /// [#EASE_IN_OUT_CUBIC].
+    ///
+    /// The result is a more emphasized eased curve when choosing a curve for a
+    /// widget whose initial and final positions are both within the viewport.
+    ///
+    /// Compared to [#EASE_IN_OUT_CUBIC], this curve is slightly steeper.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_cubic_emphasized.mp4">curve_ease_in_out_cubic_emphasized.mp4</a>
+    public static final Interpolator EASE_IN_OUT_CUBIC_EMPHASIZED = new ThreePointCubic(
+            new Offset(0.05, 0),
+            new Offset(0.133333, 0.06),
+            new Offset(0.166666, 0.4),
+            new Offset(0.208333, 0.82),
+            new Offset(0.25, 1)
+    );
+
+    /// A cubic animation curve that starts slowly, speeds up, and then ends
+    /// slowly. This curve can be imagined as [#EASE_IN_BACK] as the first
+    /// half, and [#EASE_OUT_BACK] as the second.
+    ///
+    /// Since two curves are used as a basis for this curve, the resulting
+    /// animation will overshoot its bounds twice before reaching its end - first
+    /// by exceeding its lower bound, then exceeding its upper bound and finally
+    /// descending to its final position.
+    ///
+    /// Derived from Robert Penner’s easing functions.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_ease_in_out_back.mp4">curve_ease_in_out_back.mp4</a>
+    public static final Interpolator EASE_IN_OUT_BACK = new Cubic(0.68, -0.55, 0.265, 1.55);
+
+    /// A curve that starts quickly and eases into its final position.
+    ///
+    /// Over the course of the animation, the object spends more time near its
+    /// final destination. As a result, the user isn’t left waiting for the
+    /// animation to finish, and the negative effects of motion are minimized.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_fast_out_slow_in.mp4">curve_fast_out_slow_in.mp4</a>
+    public static final Interpolator FAST_OUT_SLOW_IN = new Cubic(0.4, 0.0, 0.2, 1.0);
+
+    /// A cubic animation curve that starts quickly, slows down, and then ends
+    /// quickly.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_slow_middle.mp4">curve_slow_middle.mp4</a>
+    public static final Interpolator SLOW_MIDDLE = new Cubic(0.15, 0.85, 0.85, 0.15);
+
+    private static double bounce(double t) {
+        if (t < 1.0 / 2.75) {
+            return 7.5625 * t * t;
+        } else if (t < 2 / 2.75) {
+            t -= 1.5 / 2.75;
+            return 7.5625 * t * t + 0.75;
+        } else if (t < 2.5 / 2.75) {
+            t -= 2.25 / 2.75;
+            return 7.5625 * t * t + 0.9375;
+        }
+        t -= 2.625 / 2.75;
+        return 7.5625 * t * t + 0.984375;
+    }
+
+    /// An oscillating curve that grows in magnitude.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in.mp4">curve_bounce_in.mp4</a>
+
+    public static final Interpolator BOUNCE_IN = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            return 1.0 - bounce(1.0 - t);
+        }
+    };
+
+    /// An oscillating curve that first grows and then shrink in magnitude.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_out.mp4">curve_bounce_out.mp4</a>
+    public static final Interpolator BOUNCE_OUT = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            return bounce(t);
+        }
+    };
+
+    /// An oscillating curve that first grows and then shrink in magnitude.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_bounce_in_out.mp4">curve_bounce_in_out.mp4</a>
+    public static final Interpolator BOUNCE_IN_OUT = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            if (t < 0.5) {
+                return (1.0 - bounce(1.0 - t * 2.0)) * 0.5;
+            } else {
+                return bounce(t * 2.0 - 1.0) * 0.5 + 0.5;
+            }
+        }
+    };
+
+    private static final double PERIOD = 0.4;
+
+    /// An oscillating curve that grows in magnitude while overshooting its bounds.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in.mp4">curve_elastic_in.mp4</a>
+    public static final Interpolator ELASTIC_IN = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            final double s = PERIOD / 4.0;
+            t = t - 1.0;
+            return -Math.pow(2.0, 10.0 * t) * Math.sin((t - s) * (Math.PI * 2.0) / PERIOD);
+        }
+    };
+
+    /// An oscillating curve that shrinks in magnitude while overshooting its bounds.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_out.mp4">curve_elastic_out.mp4</a>
+    public static Interpolator ELASTIC_OUT = new Interpolator() {
+        @Override
+        protected double curve(double t) {
+            final double s = PERIOD / 4.0;
+            return Math.pow(2.0, -10 * t) * Math.sin((t - s) * (Math.PI * 2.0) / PERIOD) + 1.0;
+        }
+    };
+
+    /// An oscillating curve that grows and then shrinks in magnitude while overshooting its bounds.
+    ///
+    /// @see <a href="https://flutter.github.io/assets-for-api-docs/assets/animation/curve_elastic_in_out.mp4">curve_elastic_in_out.mp4</a>
+    public static Interpolator ELASTIC_IN_OUT = new Interpolator() {
+        @Override
+        @SuppressWarnings("DuplicateExpressions")
+        protected double curve(double t) {
+            final double s = PERIOD / 4.0;
+            t = 2.0 * t - 1.0;
+            if (t < 0.0) {
+                return -0.5 * Math.pow(2.0, 10.0 * t) * Math.sin((t - s) * (Math.PI * 2.0) / PERIOD);
+            } else {
+                return Math.pow(2.0, -10.0 * t) * Math.sin((t - s) * (Math.PI * 2.0) / PERIOD) * 0.5 + 1.0;
+            }
+        }
+    };
+
+    /// A cubic polynomial mapping of the unit interval.
+    private static final class Cubic extends Interpolator {
+        private static final double CUBIC_ERROR_BOUND = 0.001;
+
+        /// The x coordinate of the first control point.
+        ///
+        /// The line through the point (0, 0) and the first control point is tangent
+        /// to the curve at the point (0, 0).
+        private final double a;
+
+        /// The y coordinate of the first control point.
+        ///
+        /// The line through the point (0, 0) and the first control point is tangent
+        /// to the curve at the point (0, 0).
+        private final double b;
+
+        /// The x coordinate of the second control point.
+        ///
+        /// The line through the point (1, 1) and the second control point is tangent
+        /// to the curve at the point (1, 1).
+        private final double c;
+
+        /// The y coordinate of the second control point.
+        ///
+        /// The line through the point (1, 1) and the second control point is tangent
+        /// to the curve at the point (1, 1).
+        private final double d;
+
+        private Cubic(double a, double b, double c, double d) {
+            this.a = a;
+            this.b = b;
+            this.c = c;
+            this.d = d;
+        }
+
+        double _evaluateCubic(double a, double b, double m) {
+            return 3 * a * (1 - m) * (1 - m) * m + 3 * b * (1 - m) * m * m + m * m * m;
+        }
+
+        @Override
+        protected double curve(double t) {
+            double start = 0.0;
+            double end = 1.0;
+            while (true) {
+                final double midpoint = (start + end) / 2;
+                final double estimate = _evaluateCubic(a, c, midpoint);
+                if (Math.abs(t - estimate) < CUBIC_ERROR_BOUND) {
+                    return _evaluateCubic(b, d, midpoint);
+                }
+                if (estimate < t) {
+                    start = midpoint;
+                } else {
+                    end = midpoint;
+                }
+            }
+        }
+
+        @Override
+        public boolean equals(Object o) {
+            return o instanceof Cubic cubic
+                    && this.a == cubic.a
+                    && this.b == cubic.b
+                    && this.c == cubic.c
+                    && this.d == cubic.d;
+        }
+
+        @Override
+        public int hashCode() {
+            return Objects.hash(a, b, c, d);
+        }
+
+        @Override
+        public String toString() {
+            return "Cubic[a=%s, b=%s, c=%s, d=%s]".formatted(a, b, c, d);
+        }
+    }
+
+    private record Offset(double dx, double dy) {
+    }
+
+    private static final class ThreePointCubic extends Interpolator {
+
+        /// The coordinates of the first control point of the first curve.
+        ///
+        /// The line through the point (0, 0) and this control point is tangent to the
+        /// curve at the point (0, 0).
+        private final Offset a1;
+
+        /// The coordinates of the second control point of the first curve.
+        ///
+        /// The line through the [#midpoint] and this control point is tangent to the
+        /// curve approaching the [#midpoint].
+        private final Offset b1;
+
+        /// The coordinates of the middle shared point.
+        ///
+        /// The curve will go through this point. If the control points surrounding
+        /// this middle point ([#b1], and [#a2]) are not colinear with this point, then
+        /// the curve's derivative will have a discontinuity (a cusp) at this point.
+        private final Offset midpoint;
+
+        /// The coordinates of the first control point of the second curve.
+        ///
+        /// The line through the [#midpoint] and this control point is tangent to the
+        /// curve approaching the [#midpoint].
+        private final Offset a2;
+
+        /// The coordinates of the second control point of the second curve.
+        ///
+        /// The line through the point (1, 1) and this control point is tangent to the
+        /// curve at (1, 1).
+        private final Offset b2;
+
+        /// Creates two cubic curves that share a common control point.
+        ///
+        /// Rather than creating a new instance, consider using one of the common
+        /// three-point cubic curves in [Interpolator].
+        ///
+        /// The arguments correspond to the control points for the two curves,
+        /// including the [#midpoint], but do not include the two implied end points at
+        /// (0,0) and (1,1), which are fixed.
+        private ThreePointCubic(Offset a1, Offset b1, Offset midpoint, Offset a2, Offset b2) {
+            this.a1 = a1;
+            this.b1 = b1;
+            this.midpoint = midpoint;
+            this.a2 = a2;
+            this.b2 = b2;
+        }
+
+        @Override
+        protected double curve(double t) {
+            final boolean firstCurve = t < midpoint.dx;
+            final double scaleX = firstCurve ? midpoint.dx : 1.0 - midpoint.dx;
+            final double scaleY = firstCurve ? midpoint.dy : 1.0 - midpoint.dy;
+            final double scaledT = (t - (firstCurve ? 0.0 : midpoint.dx)) / scaleX;
+            if (firstCurve) {
+                return new Cubic(
+                        a1.dx / scaleX,
+                        a1.dy / scaleY,
+                        b1.dx / scaleX,
+                        b1.dy / scaleY
+                ).curve(scaledT) *
+                        scaleY;
+            } else {
+                return new Cubic(
+                        (a2.dx - midpoint.dx) / scaleX,
+                        (a2.dy - midpoint.dy) / scaleY,
+                        (b2.dx - midpoint.dx) / scaleX,
+                        (b2.dy - midpoint.dy) / scaleY
+                ).curve(scaledT) *
+                        scaleY +
+                        midpoint.dy;
+            }
+        }
+
+        @Override
+        public boolean equals(Object o) {
+            return o instanceof ThreePointCubic that
+                    && a1.equals(that.a1)
+                    && b1.equals(that.b1)
+                    && midpoint.equals(that.midpoint)
+                    && a2.equals(that.a2)
+                    && b2.equals(that.b2);
+        }
+
+        @Override
+        public int hashCode() {
+            return Objects.hash(a1, b1, midpoint, a2, b2);
+        }
+
+        @Override
+        public String toString() {
+            return "ThreePointCubic[a1=%s, b1=%s, midpoint=%s, a2=%s, b2=%s]".formatted(a1, b1, midpoint, a2, b2);
+        }
+    }
+
+    //endregion Curves
+
+    // region Durations
+
+    /// The short1 duration (50ms) in the Material specification.
+    public static final Duration SHORT1 = Duration.millis(50);
+
+    /// The short2 duration (100ms) in the Material specification.
+    public static final Duration SHORT2 = Duration.millis(100);
+
+    /// The short3 duration (150ms) in the Material specification.
+    public static final Duration SHORT3 = Duration.millis(150);
+
+    /// The short4 duration (200ms) in the Material specification.
+    public static final Duration SHORT4 = Duration.millis(200);
+
+    /// The medium1 duration (250ms) in the Material specification.
+    public static final Duration MEDIUM1 = Duration.millis(250);
+
+    /// The medium2 duration (300ms) in the Material specification.
+    public static final Duration MEDIUM2 = Duration.millis(300);
+
+    /// The medium3 duration (350ms) in the Material specification.
+    public static final Duration MEDIUM3 = Duration.millis(350);
+
+    /// The medium4 duration (400ms) in the Material specification.
+    public static final Duration MEDIUM4 = Duration.millis(400);
+
+    /// The long1 duration (450ms) in the Material specification.
+    public static final Duration LONG1 = Duration.millis(450);
+
+    /// The long2 duration (500ms) in the Material specification.
+    public static final Duration LONG2 = Duration.millis(500);
+
+    /// The long3 duration (550ms) in the Material specification.
+    public static final Duration LONG3 = Duration.millis(550);
+
+    /// The long4 duration (600ms) in the Material specification.
+    public static final Duration LONG4 = Duration.millis(600);
+
+    /// The extralong1 duration (700ms) in the Material specification.
+    public static final Duration EXTRA_LONG1 = Duration.millis(700);
+
+    /// The extralong2 duration (800ms) in the Material specification.
+    public static final Duration EXTRA_LONG2 = Duration.millis(800);
+
+    /// The extralong3 duration (900ms) in the Material specification.
+    public static final Duration EXTRA_LONG3 = Duration.millis(900);
+
+    /// The extralong4 duration (1000ms) in the Material specification.
+    public static final Duration EXTRA_LONG4 = Duration.millis(1000);
+
+    // endregion Durations
+
+    private Motion() {
+    }
+}
@@ -17,98 +17,103 @@
 */
 package org.jackhuang.hmcl.ui.animation;

-import javafx.animation.Timeline;
+import javafx.animation.Animation;
+import javafx.animation.Interpolator;
 import javafx.application.Platform;
+import javafx.scene.CacheHint;
 import javafx.scene.Node;
+import javafx.scene.layout.Pane;
 import javafx.scene.layout.StackPane;
 import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.FXUtils;
+import org.jetbrains.annotations.Nullable;

-public class TransitionPane extends StackPane implements AnimationHandler {
-    private static final Duration DEFAULT_DURATION = Duration.millis(200);
+public class TransitionPane extends StackPane {

-    private Duration duration;
-    private Node previousNode, currentNode;
+    private Node currentNode;

    public TransitionPane() {
        FXUtils.setOverflowHidden(this);
    }

-    @Override
-    public Node getPreviousNode() {
-        return previousNode;
-    }
-
-    @Override
    public Node getCurrentNode() {
        return currentNode;
    }

-    @Override
-    public StackPane getCurrentRoot() {
-        return this;
+    public final void setContent(Node newView, AnimationProducer transition) {
+        setContent(newView, transition, Motion.SHORT4);
    }

-    @Override
-    public Duration getDuration() {
-        return duration;
+    public final void setContent(Node newView, AnimationProducer transition, Duration duration) {
+        setContent(newView, transition, duration, Motion.EASE);
    }

-    public void setContent(Node newView, AnimationProducer transition) {
-        setContent(newView, transition, DEFAULT_DURATION);
-    }
+    public void setContent(Node newView, AnimationProducer transition,
+                           Duration duration, Interpolator interpolator) {
+        Node previousNode = currentNode != newView && getWidth() > 0 && getHeight() > 0 ? currentNode : null;
+        currentNode = newView;

-    public void setContent(Node newView, AnimationProducer transition, Duration duration) {
-        this.duration = duration;
-
-        updateContent(newView);
-
-        if (previousNode == EMPTY_PANE) {
+        if (!AnimationUtils.isAnimationEnabled() || previousNode == null || transition == ContainerAnimations.NONE) {
+            AnimationUtils.reset(newView, true);
            getChildren().setAll(newView);
            return;
        }

-        if (AnimationUtils.isAnimationEnabled() && transition != ContainerAnimations.NONE) {
-            setMouseTransparent(true);
-            transition.init(this);
+        getChildren().setAll(previousNode, newView);

-            // runLater or "init" will not work
-            Platform.runLater(() -> {
-                Timeline newAnimation = new Timeline();
-                newAnimation.getKeyFrames().setAll(transition.animate(this));
-                newAnimation.setOnFinished(e -> {
-                    setMouseTransparent(false);
-                    getChildren().remove(previousNode);
-                });
-                FXUtils.playAnimation(this, "transition_pane", newAnimation);
+        setMouseTransparent(true);
+        transition.init(this, previousNode, newView);
+
+        CacheHint cacheHint = newView instanceof Cacheable cacheable
+                ? cacheable.getCacheHint(transition)
+                : null;
+
+        if (cacheHint != null) {
+            newView.setCache(true);
+            newView.setCacheHint(cacheHint);
+        }
+
+        // runLater or "init" will not work
+        Platform.runLater(() -> {
+            Animation newAnimation = transition.animate(
+                    this,
+                    previousNode,
+                    newView,
+                    duration, interpolator);
+            newAnimation.setOnFinished(e -> {
+                setMouseTransparent(false);
+                getChildren().remove(previousNode);
+
+                if (cacheHint != null) {
+                    newView.setCache(false);
+                }
            });
-        } else {
-            getChildren().remove(previousNode);
+            FXUtils.playAnimation(this, "transition_pane", newAnimation);
+        });
+
+    }
+
+    public interface AnimationProducer {
+        default void init(TransitionPane container, Node previousNode, Node nextNode) {
+            AnimationUtils.reset(previousNode, true);
+            AnimationUtils.reset(nextNode, false);
+        }
+
+        Animation animate(Pane container, Node previousNode, Node nextNode,
+                          Duration duration, Interpolator interpolator);
+
+        default @Nullable TransitionPane.AnimationProducer opposite() {
+            return null;
        }
    }

-    private void updateContent(Node newView) {
-        if (getWidth() > 0 && getHeight() > 0) {
-            previousNode = currentNode;
-            if (previousNode == null) {
-                if (getChildren().isEmpty())
-                    previousNode = EMPTY_PANE;
-                else
-                    previousNode = getChildren().get(0);
-            }
-        } else
-            previousNode = EMPTY_PANE;
-
-        if (previousNode == newView)
-            previousNode = EMPTY_PANE;
-
-        currentNode = newView;
-
-        getChildren().setAll(previousNode, currentNode);
-    }
-
-    private final EmptyPane EMPTY_PANE = new EmptyPane();
-
-    public static class EmptyPane extends StackPane {
+    /// Marks a node as cacheable as a bitmap during animation.
+    public interface Cacheable {
+        /// @return the [cache hint][CacheHint] to use when caching this node during the given animation,
+        ///         or `null` to not cache it.
+        default @Nullable CacheHint getCacheHint(AnimationProducer animationProducer) {
+            // https://github.com/HMCL-dev/HMCL/issues/4789
+            return animationProducer == ContainerAnimations.SLIDE_UP_FADE_IN ? CacheHint.SPEED : null;
+        }
    }
 }
@@ -18,6 +18,8 @@
 package org.jackhuang.hmcl.ui.construct;

 import javafx.collections.ObservableList;
+import javafx.geometry.Insets;
+import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.ScrollPane;
 import javafx.scene.input.MouseEvent;
@@ -26,6 +28,8 @@ import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
+import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
+import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.versions.VersionPage;

 import java.util.function.Consumer;
@@ -98,6 +102,28 @@ public class AdvancedListBox extends ScrollPane {
        return add(item);
    }

+    public AdvancedListBox addNavigationDrawerTab(TabHeader tabHeader, TabControl.Tab<?> tab, String title,
+                                                  SVG unselectedGraphic, SVG selectedGraphic) {
+        AdvancedListItem item = createNavigationDrawerItem(title, null);
+        item.activeProperty().bind(tabHeader.getSelectionModel().selectedItemProperty().isEqualTo(tab));
+        item.setOnAction(e -> tabHeader.select(tab));
+
+        Node unselectedIcon = unselectedGraphic.createIcon(20);
+        Node selectedIcon = selectedGraphic.createIcon(20);
+
+        TransitionPane leftGraphic = new TransitionPane();
+        leftGraphic.setAlignment(Pos.CENTER);
+        FXUtils.setLimitWidth(leftGraphic, 30);
+        FXUtils.setLimitHeight(leftGraphic, 20);
+        leftGraphic.setPadding(Insets.EMPTY);
+        leftGraphic.setContent(item.isActive() ? selectedIcon : unselectedIcon, ContainerAnimations.NONE);
+        FXUtils.onChange(item.activeProperty(), active ->
+                leftGraphic.setContent(active ? selectedIcon : unselectedIcon, ContainerAnimations.FADE));
+
+        item.setLeftGraphic(leftGraphic);
+        return add(item);
+    }
+
    public AdvancedListBox add(int index, Node child) {
        if (child instanceof Pane || child instanceof AdvancedListItem)
            container.getChildren().add(index, child);
@@ -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");
@@ -17,11 +17,7 @@
 */
 package org.jackhuang.hmcl.ui.construct;

-import com.jfoenix.controls.JFXButton;
-import javafx.animation.Animation;
-import javafx.animation.KeyFrame;
-import javafx.animation.KeyValue;
-import javafx.animation.Timeline;
+import javafx.animation.*;
 import javafx.application.Platform;
 import javafx.beans.property.BooleanProperty;
 import javafx.beans.property.SimpleBooleanProperty;
@@ -29,13 +25,16 @@ import javafx.geometry.Insets;
 import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.Label;
+import javafx.scene.input.MouseButton;
+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;
+import org.jackhuang.hmcl.ui.animation.Motion;

 /**
 * @author huangyuhui
@@ -71,7 +70,6 @@ final class ComponentListCell extends StackPane {
        }
    }

-    @SuppressWarnings("unchecked")
    private void updateLayout() {
        if (content instanceof ComponentList list) {
            content.getStyleClass().remove("options-list");
@@ -81,10 +79,9 @@ final class ComponentListCell extends StackPane {

            VBox groupNode = new VBox();

-            Node expandIcon = SVG.KEYBOARD_ARROW_DOWN.createIcon(Theme.blackFill(), 20);
-            JFXButton expandButton = new JFXButton();
-            expandButton.setGraphic(expandIcon);
-            expandButton.getStyleClass().add("options-list-item-expand-button");
+            Node expandIcon = SVG.KEYBOARD_ARROW_DOWN.createIcon(20);
+            expandIcon.setMouseTransparent(true);
+            HBox.setMargin(expandIcon, new Insets(0, 8, 0, 8));

            VBox labelVBox = new VBox();
            labelVBox.setMouseTransparent(true);
@@ -102,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);
                }
            }
@@ -123,7 +122,7 @@ final class ComponentListCell extends StackPane {
                if (rightNode != null)
                    header.getChildren().add(rightNode);
            }
-            header.getChildren().add(expandButton);
+            header.getChildren().add(expandIcon);

            RipplerContainer headerRippler = new RipplerContainer(header);
            groupNode.getChildren().add(headerRippler);
@@ -138,7 +137,12 @@ final class ComponentListCell extends StackPane {
            container.getChildren().setAll(content);
            groupNode.getChildren().add(container);

-            Runnable onExpand = () -> {
+            headerRippler.addEventHandler(MouseEvent.MOUSE_CLICKED, event -> {
+                if (event.getButton() != MouseButton.PRIMARY)
+                    return;
+
+                event.consume();
+
                if (expandAnimation != null && expandAnimation.getStatus() == Animation.Status.RUNNING) {
                    expandAnimation.stop();
                }
@@ -155,16 +159,23 @@ final class ComponentListCell extends StackPane {
                    double newAnimatedHeight = (list.prefHeight(list.getWidth()) + (hasPadding ? 8 + 10 : 4)) * (expanded ? 1 : -1);
                    double newHeight = expanded ? getHeight() + newAnimatedHeight : prefHeight(list.getWidth());
                    double contentHeight = expanded ? newAnimatedHeight : 0;
+                    double targetRotate = expanded ? -180 : 0;

                    if (expanded) {
                        updateClip(newHeight);
                    }

                    if (AnimationUtils.isAnimationEnabled()) {
-                        expandAnimation = new Timeline(new KeyFrame(new Duration(320.0),
-                                new KeyValue(container.minHeightProperty(), contentHeight, FXUtils.SINE),
-                                new KeyValue(container.maxHeightProperty(), contentHeight, FXUtils.SINE)
-                        ));
+                        double currentRotate = expandIcon.getRotate();
+                        Duration duration = Motion.LONG2.multiply(Math.abs(currentRotate - targetRotate) / 180.0);
+                        Interpolator interpolator = Motion.EASE_IN_OUT_CUBIC_EMPHASIZED;
+
+                        expandAnimation = new Timeline(
+                                new KeyFrame(duration,
+                                        new KeyValue(container.minHeightProperty(), contentHeight, interpolator),
+                                        new KeyValue(container.maxHeightProperty(), contentHeight, interpolator),
+                                        new KeyValue(expandIcon.rotateProperty(), targetRotate, interpolator))
+                        );

                        if (!expanded) {
                            expandAnimation.setOnFinished(e2 -> updateClip(newHeight));
@@ -174,18 +185,14 @@ final class ComponentListCell extends StackPane {
                    } else {
                        container.setMinHeight(contentHeight);
                        container.setMaxHeight(contentHeight);
+                        expandIcon.setRotate(targetRotate);

                        if (!expanded) {
                            updateClip(newHeight);
                        }
                    }
                });
-            };
-
-            FXUtils.onClicked(headerRippler, onExpand);
-            expandButton.setOnAction(e -> onExpand.run());
-
-            expandedProperty().addListener((a, b, newValue) -> expandIcon.setRotate(newValue ? 180 : 0));
+            });

            getChildren().setAll(groupNode);
        } else {
@@ -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"));
@@ -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();
@@ -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;
@@ -26,10 +26,8 @@ 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;

 import java.util.Locale;

@@ -46,29 +44,9 @@ public class HintPane extends VBox {
        setFillWidth(true);
        getStyleClass().addAll("hint", type.name().toLowerCase(Locale.ROOT));

-        SVG svg;
-        switch (type) {
-            case INFO:
-                svg = SVG.INFO;
-                break;
-            case ERROR:
-                svg = SVG.ERROR;
-                break;
-            case SUCCESS:
-                svg = SVG.CHECK_CIRCLE;
-                break;
-            case WARNING:
-                svg = SVG.WARNING;
-                break;
-            case QUESTION:
-                svg = SVG.HELP;
-                break;
-            default:
-                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(type.getIcon().createIcon(16), new Text(type.getDisplayName()));
        hbox.setAlignment(Pos.CENTER_LEFT);
+        hbox.setSpacing(2);
        flow.getChildren().setAll(label);
        getChildren().setAll(hbox, flow);
        label.textProperty().bind(text);
@@ -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 ? FXUtils.limitingSize(icon.createIcon(14), 14, 14) : null, text);

        getStyleClass().setAll("iconed-menu-item");

@@ -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;
@@ -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");

@@ -0,0 +1,68 @@
+/*
+ * 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.ui.construct;
+
+import com.jfoenix.controls.JFXCheckBox;
+import javafx.beans.binding.Bindings;
+import javafx.beans.property.BooleanProperty;
+import javafx.scene.control.TableCell;
+import javafx.scene.control.TableColumn;
+import javafx.util.Callback;
+
+/// @author Glavo
+public final class JFXCheckBoxTableCell<S, T> extends TableCell<S, T> {
+    public static <S> Callback<TableColumn<S, Boolean>, TableCell<S, Boolean>> forTableColumn(
+            final TableColumn<S, Boolean> column) {
+        return list -> new JFXCheckBoxTableCell<>();
+    }
+
+    private final JFXCheckBox checkBox = new JFXCheckBox();
+    private BooleanProperty booleanProperty;
+
+    public JFXCheckBoxTableCell() {
+        this.getStyleClass().add("jfx-checkbox-table-cell");
+    }
+
+    @Override
+    protected void updateItem(T item, boolean empty) {
+        super.updateItem(item, empty);
+
+        if (empty) {
+            setText(null);
+            setGraphic(null);
+            checkBox.disableProperty().unbind();
+        } else {
+            setGraphic(checkBox);
+
+            if (booleanProperty != null) {
+                checkBox.selectedProperty().unbindBidirectional(booleanProperty);
+            }
+            if (getTableColumn().getCellObservableValue(getIndex()) instanceof BooleanProperty obsValue) {
+                booleanProperty = obsValue;
+                checkBox.selectedProperty().bindBidirectional(booleanProperty);
+            }
+
+            checkBox.disableProperty().bind(Bindings.not(
+                    getTableView().editableProperty().and(
+                            getTableColumn().editableProperty()).and(
+                            editableProperty())
+            ));
+        }
+    }
+
+}
@@ -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) {
@@ -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);
@@ -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;
@@ -47,11 +46,21 @@ import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 public final class MessageDialogPane extends HBox {

    public enum MessageType {
-        ERROR,
-        INFO,
-        WARNING,
-        QUESTION,
-        SUCCESS;
+        ERROR(SVG.ERROR),
+        INFO(SVG.INFO),
+        WARNING(SVG.WARNING),
+        QUESTION(SVG.HELP),
+        SUCCESS(SVG.CHECK_CIRCLE);
+
+        private final SVG icon;
+
+        MessageType(SVG icon) {
+            this.icon = icon;
+        }
+
+        public SVG getIcon() {
+            return icon;
+        }

        public String getDisplayName() {
            return i18n("message." + name().toLowerCase(Locale.ROOT));
@@ -71,27 +80,7 @@ public final class MessageDialogPane extends HBox {
        graphic.setTranslateY(10);
        graphic.setMinSize(40, 40);
        graphic.setMaxSize(40, 40);
-        SVG svg;
-        switch (type) {
-            case INFO:
-                svg = SVG.INFO;
-                break;
-            case ERROR:
-                svg = SVG.ERROR;
-                break;
-            case SUCCESS:
-                svg = SVG.CHECK_CIRCLE;
-                break;
-            case WARNING:
-                svg = SVG.WARNING;
-                break;
-            case QUESTION:
-                svg = SVG.HELP;
-                break;
-            default:
-                throw new IllegalArgumentException("Unrecognized message box message type " + type);
-        }
-        graphic.setGraphic(svg.createIcon(Theme.blackFill(), 40));
+        graphic.setGraphic(type.getIcon().createIcon(40));

        VBox vbox = new VBox();
        HBox.setHgrow(vbox, Priority.ALWAYS);
@@ -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();
@@ -17,6 +17,7 @@
 */
 package org.jackhuang.hmcl.ui.construct;

+import javafx.animation.Interpolator;
 import javafx.beans.property.BooleanProperty;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleBooleanProperty;
@@ -26,12 +27,14 @@ import javafx.event.EventHandler;
 import javafx.event.EventType;
 import javafx.scene.Node;
 import javafx.scene.layout.Region;
+import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.FXUtils;
-import org.jackhuang.hmcl.ui.animation.AnimationProducer;
 import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.wizard.Navigation;

+import java.util.Objects;
 import java.util.Optional;
 import java.util.Stack;

@@ -47,7 +50,7 @@ public class Navigator extends TransitionPane {
    public void init(Node init) {
        stack.push(init);
        backable.set(canGoBack());
-        getChildren().setAll(init);
+        setContent(init, ContainerAnimations.NONE);

        fireEvent(new NavigationEvent(this, init, Navigation.NavigationDirection.START, NavigationEvent.NAVIGATED));
        if (init instanceof PageAware) ((PageAware) init).onPageShown();
@@ -56,6 +59,10 @@ public class Navigator extends TransitionPane {
    }

    public void navigate(Node node, AnimationProducer animationProducer) {
+        navigate(node, animationProducer, Motion.SHORT4, Motion.EASE);
+    }
+
+    public void navigate(Node node, AnimationProducer animationProducer, Duration duration, Interpolator interpolator) {
        FXUtils.checkFxUserThread();

        if (!initialized)
@@ -75,7 +82,7 @@ public class Navigator extends TransitionPane {
        node.fireEvent(navigating);

        node.getProperties().put("hmcl.navigator.animation", animationProducer);
-        setContent(node, animationProducer);
+        setContent(node, animationProducer, duration, interpolator);

        NavigationEvent navigated = new NavigationEvent(this, node, Navigation.NavigationDirection.NEXT, NavigationEvent.NAVIGATED);
        node.fireEvent(navigated);
@@ -113,7 +120,7 @@ public class Navigator extends TransitionPane {
        Node poppedNode = stack.pop();
        NavigationEvent exited = new NavigationEvent(this, poppedNode, Navigation.NavigationDirection.PREVIOUS, NavigationEvent.EXITED);
        poppedNode.fireEvent(exited);
-        if (poppedNode instanceof PageAware) ((PageAware) poppedNode).onPageHidden();
+        if (poppedNode instanceof PageAware pageAware) pageAware.onPageHidden();

        backable.set(canGoBack());
        Node node = stack.peek();
@@ -123,8 +130,8 @@ public class Navigator extends TransitionPane {
        node.fireEvent(navigating);

        Object obj = from.getProperties().get("hmcl.navigator.animation");
-        if (obj instanceof AnimationProducer) {
-            setContent(node, (AnimationProducer) obj);
+        if (obj instanceof AnimationProducer animationProducer) {
+            setContent(node, Objects.requireNonNullElse(animationProducer.opposite(), animationProducer));
        } else {
            setContent(node, ContainerAnimations.NONE);
        }
@@ -160,12 +167,13 @@ public class Navigator extends TransitionPane {
        return stack.size();
    }

-    public void setContent(Node content, AnimationProducer animationProducer) {
-        super.setContent(content, animationProducer);
+    @Override
+    public void setContent(Node newView, AnimationProducer transition, Duration duration, Interpolator interpolator) {
+        super.setContent(newView, transition, duration, interpolator);

-        if (content instanceof Region) {
-            ((Region) content).setMinSize(0, 0);
-            FXUtils.setOverflowHidden((Region) content);
+        if (newView instanceof Region region) {
+            region.setMinSize(0, 0);
+            FXUtils.setOverflowHidden(region);
        }
    }

@@ -181,7 +189,7 @@ public class Navigator extends TransitionPane {
        this.onNavigated.set(onNavigated);
    }

-    private ObjectProperty<EventHandler<NavigationEvent>> onNavigated = new SimpleObjectProperty<EventHandler<NavigationEvent>>(this, "onNavigated") {
+    private final ObjectProperty<EventHandler<NavigationEvent>> onNavigated = new SimpleObjectProperty<EventHandler<NavigationEvent>>(this, "onNavigated") {
        @Override
        protected void invalidated() {
            setEventHandler(NavigationEvent.NAVIGATED, get());
@@ -200,14 +208,14 @@ public class Navigator extends TransitionPane {
        this.onNavigating.set(onNavigating);
    }

-    private ObjectProperty<EventHandler<NavigationEvent>> onNavigating = new SimpleObjectProperty<EventHandler<NavigationEvent>>(this, "onNavigating") {
+    private final ObjectProperty<EventHandler<NavigationEvent>> onNavigating = new SimpleObjectProperty<EventHandler<NavigationEvent>>(this, "onNavigating") {
        @Override
        protected void invalidated() {
            setEventHandler(NavigationEvent.NAVIGATING, get());
        }
    };

-    public static class NavigationEvent extends Event {
+    public static final class NavigationEvent extends Event {
        public static final EventType<NavigationEvent> EXITED = new EventType<>("EXITED");
        public static final EventType<NavigationEvent> NAVIGATED = new EventType<>("NAVIGATED");
        public static final EventType<NavigationEvent> NAVIGATING = new EventType<>("NAVIGATING");
@@ -51,8 +51,9 @@ public class OptionToggleButton extends StackPane {
        Label titleLabel = new Label();
        titleLabel.textProperty().bind(title);
        Label subtitleLabel = new Label();
-        subtitleLabel.setMouseTransparent(true);
        subtitleLabel.setWrapText(true);
+        subtitleLabel.setMouseTransparent(true);
+        subtitleLabel.getStyleClass().add("subtitle");
        subtitleLabel.textProperty().bind(subtitle);
        pane.setCenter(left);
        left.setAlignment(Pos.CENTER_LEFT);
@@ -18,7 +18,6 @@
 package org.jackhuang.hmcl.ui.construct;

 import com.jfoenix.controls.JFXRippler;
-import javafx.animation.Interpolator;
 import javafx.animation.Transition;
 import javafx.beans.DefaultProperty;
 import javafx.beans.InvalidationListener;
@@ -39,7 +38,9 @@ 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;

 import java.util.List;
@@ -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();
@@ -109,7 +110,7 @@ public class RipplerContainer extends StackPane {
            setOnMouseEntered(e -> new Transition() {
                {
                    setCycleDuration(DURATION);
-                    setInterpolator(Interpolator.EASE_IN);
+                    setInterpolator(Motion.EASE_IN);
                }

                @Override
@@ -121,7 +122,7 @@ public class RipplerContainer extends StackPane {
            setOnMouseExited(e -> new Transition() {
                {
                    setCycleDuration(DURATION);
-                    setInterpolator(Interpolator.EASE_OUT);
+                    setInterpolator(Motion.EASE_OUT);
                }

                @Override
@@ -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() {
@@ -174,7 +174,7 @@ public interface TabControl {
        }
    }

-    class Tab<T extends Node> {
+    final class Tab<T extends Node> {
        private final StringProperty id = new SimpleStringProperty(this, "id");
        private final StringProperty text = new SimpleStringProperty(this, "text");
        private final ReadOnlyBooleanWrapper selected = new ReadOnlyBooleanWrapper(this, "selected");
@@ -36,54 +36,73 @@ import javafx.scene.transform.Rotate;
 import javafx.scene.transform.Scale;
 import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.FXUtils;
+import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
+import org.jackhuang.hmcl.ui.animation.Motion;
+import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.util.javafx.MappedObservableList;
+import org.jetbrains.annotations.Nullable;

@SuppressWarnings("deprecation")
 public class TabHeader extends Control implements TabControl, PageAware {

+    private final TransitionPane contentPane;
+
    public TabHeader(Tab<?>... tabs) {
+        this(null, tabs);
+    }
+
+    public TabHeader(@Nullable TransitionPane contentPane, Tab<?>... tabs) {
+        this.contentPane = contentPane;
+
        getStyleClass().setAll("tab-header");
        if (tabs != null) {
            getTabs().addAll(tabs);
        }
    }

-    private ObservableList<Tab<?>> tabs = FXCollections.observableArrayList();
-    private ObjectProperty<Side> side = new SimpleObjectProperty<>(Side.TOP);
+    private final ObservableList<Tab<?>> tabs = FXCollections.observableArrayList();

    @Override
    public ObservableList<Tab<?>> getTabs() {
        return tabs;
    }

-    private final ObjectProperty<SingleSelectionModel<Tab<?>>> selectionModel = new SimpleObjectProperty<>(this, "selectionModel", new TabControlSelectionModel(this));
+    private final SingleSelectionModel<Tab<?>> selectionModel = new TabControlSelectionModel(this);

    public SingleSelectionModel<Tab<?>> getSelectionModel() {
-        return selectionModel.get();
-    }
-
-    public ObjectProperty<SingleSelectionModel<Tab<?>>> selectionModelProperty() {
        return selectionModel;
    }

-    public void setSelectionModel(SingleSelectionModel<Tab<?>> selectionModel) {
-        this.selectionModel.set(selectionModel);
+    public void select(Tab<?> tab) {
+        select(tab, true);
    }

-    public void select(Tab<?> tab) {
+    public void select(Tab<?> tab, boolean playAnimation) {
        Tab<?> oldTab = getSelectionModel().getSelectedItem();
        if (oldTab != null) {
-            if (oldTab.getNode() instanceof PageAware) {
-                ((PageAware) oldTab.getNode()).onPageHidden();
+            if (oldTab.getNode() instanceof PageAware pageAware) {
+                pageAware.onPageHidden();
            }
        }

        tab.initializeIfNeeded();
-        if (tab.getNode() instanceof PageAware) {
-            ((PageAware) tab.getNode()).onPageShown();
+        if (tab.getNode() instanceof PageAware pageAware) {
+            pageAware.onPageShown();
        }

        getSelectionModel().select(tab);
+
+        if (contentPane != null) {
+            if (playAnimation && contentPane.getCurrentNode() != null) {
+                contentPane.setContent(tab.getNode(),
+                        ContainerAnimations.SLIDE_UP_FADE_IN,
+                        Motion.MEDIUM4,
+                        Motion.EASE_IN_OUT_CUBIC_EMPHASIZED
+                );
+            } else {
+                contentPane.setContent(tab.getNode(), ContainerAnimations.NONE);
+            }
+        }
    }

    @Override
@@ -106,12 +125,7 @@ public class TabHeader extends Control implements TabControl, PageAware {
        }
    }

-    /**
-     * The position to place the tabs.
-     */
-    public Side getSide() {
-        return side.get();
-    }
+    private final ObjectProperty<Side> side = new SimpleObjectProperty<>(Side.TOP);

    /**
     * The position of the tabs.
@@ -120,6 +134,13 @@ public class TabHeader extends Control implements TabControl, PageAware {
        return side;
    }

+    /**
+     * The position to place the tabs.
+     */
+    public Side getSide() {
+        return side.get();
+    }
+
    /**
     * The position the place the tabs in this TabHeader.
     */
@@ -170,14 +191,14 @@ public class TabHeader extends Control implements TabControl, PageAware {
            this.selectedTab = control.getSelectionModel().getSelectedItem();
        }

-        protected class HeaderContainer extends StackPane {
+        protected final class HeaderContainer extends StackPane {
            private Timeline timeline;
-            private StackPane selectedTabLine;
-            private HeadersRegion headersRegion;
-            private Scale scale = new Scale(1, 1, 0, 0);
-            private Rotate rotate = new Rotate(0, 0, 1);
-            private double selectedTabLineOffset;
-            private ObservableList<Node> binding;
+            private final StackPane selectedTabLine;
+            private final HeadersRegion headersRegion;
+            private final Scale scale = new Scale(1, 1, 0, 0);
+            private final Rotate rotate = new Rotate(0, 0, 1);
+            @SuppressWarnings({"FieldCanBeLocal", "unused"})
+            private final ObservableList<Node> binding;

            public HeaderContainer() {
                getStyleClass().add("tab-header-area");
@@ -232,13 +253,12 @@ public class TabHeader extends Control implements TabControl, PageAware {
                    protected void invalidated() {
                        super.invalidated();

-                        switch (get()) {
-                            case TOP: action = new Top(); break;
-                            case BOTTOM: action = new Bottom(); break;
-                            case LEFT: action = new Left(); break;
-                            case RIGHT: action = new Right(); break;
-                            default: throw new InternalError();
-                        }
+                        action = switch (get()) {
+                            case TOP -> new Top();
+                            case BOTTOM -> new Bottom();
+                            case LEFT -> new Left();
+                            case RIGHT -> new Right();
+                        };
                    }
                };

@@ -269,7 +289,7 @@ public class TabHeader extends Control implements TabControl, PageAware {
                    action.layoutChildren();
                }

-                protected void animateSelectionLine() {
+                private void animateSelectionLine() {
                    action.animateSelectionLine();
                }

@@ -325,7 +345,6 @@ public class TabHeader extends Control implements TabControl, PageAware {
                        double oldWidth = lineWidth * oldScaleX;
                        double oldTransX = selectedTabLine.getTranslateX();
                        double newScaleX = newWidth * oldScaleX / oldWidth;
-                        selectedTabLineOffset = newTransX;
                        // newTransX += offsetStart * (double)this.direction;
                        double transDiff = newTransX - oldTransX;
                        if (transDiff < 0.0D) {
@@ -465,7 +484,6 @@ public class TabHeader extends Control implements TabControl, PageAware {
                        double oldHeight = lineHeight * oldScaleY;
                        double oldTransY = selectedTabLine.getTranslateY();
                        double newScaleY = newHeight * oldScaleY / oldHeight;
-                        selectedTabLineOffset = newTransY;
                        // newTransY += offsetStart * (double)this.direction;
                        double transDiff = newTransY - oldTransY;
                        if (transDiff < 0.0D) {
@@ -28,6 +28,7 @@ import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.task.*;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.util.TaskCancellationAction;
+import org.jackhuang.hmcl.util.i18n.I18n;
 import org.jetbrains.annotations.NotNull;

 import java.util.Optional;
@@ -49,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);

@@ -73,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);
        }

@@ -86,18 +90,7 @@ public class TaskExecutorDialogPane extends BorderPane {
        });

        speedEventHandler = FetchTask.SPEED_EVENT.registerWeak(speedEvent -> {
-            String unit = "B/s";
-            double speed = speedEvent.getSpeed();
-            if (speed > 1024) {
-                speed /= 1024;
-                unit = "KiB/s";
-            }
-            if (speed > 1024) {
-                speed /= 1024;
-                unit = "MiB/s";
-            }
-
-            String message = String.format("%.1f %s", speed, unit);
+            String message = I18n.formatSpeed(speedEvent.getSpeed());
            Platform.runLater(() -> lblProgress.setText(message));
        });

@@ -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
@@ -41,7 +41,9 @@ import javafx.stage.StageStyle;
 import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.animation.AnimationUtils;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.wizard.Navigation;
+import org.jackhuang.hmcl.util.platform.OperatingSystem;

 public class Decorator extends Control {
    private final ListProperty<Node> drawer = new SimpleListProperty<>(FXCollections.observableArrayList());
@@ -81,19 +83,19 @@ public class Decorator extends Control {
                if (playRestoreMinimizeAnimation && !iconified) {
                    playRestoreMinimizeAnimation = false;
                    Timeline timeline = new Timeline(
-                            new KeyFrame(Duration.millis(0),
-                                    new KeyValue(this.opacityProperty(), 0, FXUtils.EASE),
-                                    new KeyValue(this.translateYProperty(), 200, FXUtils.EASE),
-                                    new KeyValue(this.scaleXProperty(), 0.4, FXUtils.EASE),
-                                    new KeyValue(this.scaleYProperty(), 0.4, FXUtils.EASE),
-                                    new KeyValue(this.scaleZProperty(), 0.4, FXUtils.EASE)
+                            new KeyFrame(Duration.ZERO,
+                                    new KeyValue(this.opacityProperty(), 0, Motion.EASE),
+                                    new KeyValue(this.translateYProperty(), 200, Motion.EASE),
+                                    new KeyValue(this.scaleXProperty(), 0.4, Motion.EASE),
+                                    new KeyValue(this.scaleYProperty(), 0.4, Motion.EASE),
+                                    new KeyValue(this.scaleZProperty(), 0.4, Motion.EASE)
                            ),
-                            new KeyFrame(Duration.millis(200),
-                                    new KeyValue(this.opacityProperty(), 1, FXUtils.EASE),
-                                    new KeyValue(this.translateYProperty(), 0, FXUtils.EASE),
-                                    new KeyValue(this.scaleXProperty(), 1, FXUtils.EASE),
-                                    new KeyValue(this.scaleYProperty(), 1, FXUtils.EASE),
-                                    new KeyValue(this.scaleZProperty(), 1, FXUtils.EASE)
+                            new KeyFrame(Motion.SHORT4,
+                                    new KeyValue(this.opacityProperty(), 1, Motion.EASE),
+                                    new KeyValue(this.translateYProperty(), 0, Motion.EASE),
+                                    new KeyValue(this.scaleXProperty(), 1, Motion.EASE),
+                                    new KeyValue(this.scaleYProperty(), 1, Motion.EASE),
+                                    new KeyValue(this.scaleZProperty(), 1, Motion.EASE)
                            )
                    );
                    timeline.play();
@@ -273,22 +275,22 @@ public class Decorator extends Control {
    }

    public void minimize() {
-        if (AnimationUtils.playWindowAnimation()) {
+        if (AnimationUtils.playWindowAnimation() && OperatingSystem.CURRENT_OS != OperatingSystem.MACOS) {
            playRestoreMinimizeAnimation = true;
            Timeline timeline = new Timeline(
-                    new KeyFrame(Duration.millis(0),
-                            new KeyValue(this.opacityProperty(), 1, FXUtils.EASE),
-                            new KeyValue(this.translateYProperty(), 0, FXUtils.EASE),
-                            new KeyValue(this.scaleXProperty(), 1, FXUtils.EASE),
-                            new KeyValue(this.scaleYProperty(), 1, FXUtils.EASE),
-                            new KeyValue(this.scaleZProperty(), 1, FXUtils.EASE)
+                    new KeyFrame(Duration.ZERO,
+                            new KeyValue(this.opacityProperty(), 1, Motion.EASE),
+                            new KeyValue(this.translateYProperty(), 0, Motion.EASE),
+                            new KeyValue(this.scaleXProperty(), 1, Motion.EASE),
+                            new KeyValue(this.scaleYProperty(), 1, Motion.EASE),
+                            new KeyValue(this.scaleZProperty(), 1, Motion.EASE)
                    ),
-                    new KeyFrame(Duration.millis(200),
-                            new KeyValue(this.opacityProperty(), 0, FXUtils.EASE),
-                            new KeyValue(this.translateYProperty(), 200, FXUtils.EASE),
-                            new KeyValue(this.scaleXProperty(), 0.4, FXUtils.EASE),
-                            new KeyValue(this.scaleYProperty(), 0.4, FXUtils.EASE),
-                            new KeyValue(this.scaleZProperty(), 0.4, FXUtils.EASE)
+                    new KeyFrame(Motion.SHORT4,
+                            new KeyValue(this.opacityProperty(), 0, Motion.EASE),
+                            new KeyValue(this.translateYProperty(), 200, Motion.EASE),
+                            new KeyValue(this.scaleXProperty(), 0.4, Motion.EASE),
+                            new KeyValue(this.scaleYProperty(), 0.4, Motion.EASE),
+                            new KeyValue(this.scaleZProperty(), 0.4, Motion.EASE)
                    )
            );
            timeline.setOnFinished(event -> primaryStage.setIconified(true));
@@ -1,90 +0,0 @@
-/*
- * Hello Minecraft! Launcher
- * Copyright (C) 2021  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.ui.decorator;
-
-import javafx.animation.Interpolator;
-import javafx.animation.KeyFrame;
-import javafx.animation.KeyValue;
-import javafx.scene.Node;
-import javafx.util.Duration;
-import org.jackhuang.hmcl.ui.animation.AnimationHandler;
-import org.jackhuang.hmcl.ui.animation.AnimationProducer;
-import org.jackhuang.hmcl.ui.animation.TransitionPane;
-import org.jetbrains.annotations.Nullable;
-
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
-
-public final class DecoratorAnimationProducer implements AnimationProducer {
-    @Override
-    public void init(AnimationHandler handler) {
-    }
-
-    @Override
-    public List<KeyFrame> animate(AnimationHandler handler) {
-        Node prev = handler.getPreviousNode();
-        Node next = handler.getCurrentNode();
-        if (prev instanceof TransitionPane.EmptyPane) {
-            return Collections.emptyList();
-        }
-
-        Duration halfDuration = handler.getDuration().divide(2);
-
-        List<KeyFrame> keyFrames = new ArrayList<>();
-
-        keyFrames.add(new KeyFrame(Duration.ZERO,
-                new KeyValue(prev.opacityProperty(), 1, Interpolator.EASE_BOTH)));
-        keyFrames.add(new KeyFrame(halfDuration,
-                new KeyValue(prev.opacityProperty(), 0, Interpolator.EASE_BOTH)));
-        if (prev instanceof DecoratorAnimatedPage) {
-            Node left = ((DecoratorAnimatedPage) prev).getLeft();
-            Node center = ((DecoratorAnimatedPage) prev).getCenter();
-
-            keyFrames.add(new KeyFrame(Duration.ZERO,
-                    new KeyValue(left.translateXProperty(), 0, Interpolator.EASE_BOTH),
-                    new KeyValue(center.translateXProperty(), 0, Interpolator.EASE_BOTH)));
-            keyFrames.add(new KeyFrame(halfDuration,
-                    new KeyValue(left.translateXProperty(), -30, Interpolator.EASE_BOTH),
-                    new KeyValue(center.translateXProperty(), 30, Interpolator.EASE_BOTH)));
-        }
-
-        keyFrames.add(new KeyFrame(halfDuration,
-                new KeyValue(next.opacityProperty(), 0, Interpolator.EASE_BOTH)));
-        keyFrames.add(new KeyFrame(handler.getDuration(),
-                new KeyValue(next.opacityProperty(), 1, Interpolator.EASE_BOTH)));
-        if (next instanceof DecoratorAnimatedPage) {
-            Node left = ((DecoratorAnimatedPage) next).getLeft();
-            Node center = ((DecoratorAnimatedPage) next).getCenter();
-
-            keyFrames.add(new KeyFrame(halfDuration,
-                    new KeyValue(left.translateXProperty(), -30, Interpolator.EASE_BOTH),
-                    new KeyValue(center.translateXProperty(), 30, Interpolator.EASE_BOTH)));
-            keyFrames.add(new KeyFrame(handler.getDuration(),
-                    new KeyValue(left.translateXProperty(), 0, Interpolator.EASE_BOTH),
-                    new KeyValue(center.translateXProperty(), 0, Interpolator.EASE_BOTH)));
-        }
-
-        return keyFrames;
-    }
-
-    @Override
-    public @Nullable AnimationProducer opposite() {
-        return null;
-    }
-}
@@ -19,6 +19,7 @@ package org.jackhuang.hmcl.ui.decorator;

 import com.jfoenix.controls.JFXDialog;
 import com.jfoenix.controls.JFXSnackbar;
+import javafx.animation.Interpolator;
 import javafx.animation.KeyFrame;
 import javafx.animation.KeyValue;
 import javafx.animation.Timeline;
@@ -49,8 +50,8 @@ import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.account.AddAuthlibInjectorServerPane;
-import org.jackhuang.hmcl.ui.animation.AnimationUtils;
-import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
+import org.jackhuang.hmcl.ui.animation.*;
+import org.jackhuang.hmcl.ui.animation.TransitionPane.AnimationProducer;
 import org.jackhuang.hmcl.ui.construct.DialogAware;
 import org.jackhuang.hmcl.ui.construct.DialogCloseEvent;
 import org.jackhuang.hmcl.ui.construct.Navigator;
@@ -90,16 +91,16 @@ public class DecoratorController {
            if (AnimationUtils.playWindowAnimation()) {
                Timeline timeline = new Timeline(
                        new KeyFrame(Duration.millis(0),
-                                new KeyValue(decorator.opacityProperty(), 1, FXUtils.EASE),
-                                new KeyValue(decorator.scaleXProperty(), 1, FXUtils.EASE),
-                                new KeyValue(decorator.scaleYProperty(), 1, FXUtils.EASE),
-                                new KeyValue(decorator.scaleZProperty(), 0.3, FXUtils.EASE)
+                                new KeyValue(decorator.opacityProperty(), 1, Motion.EASE),
+                                new KeyValue(decorator.scaleXProperty(), 1, Motion.EASE),
+                                new KeyValue(decorator.scaleYProperty(), 1, Motion.EASE),
+                                new KeyValue(decorator.scaleZProperty(), 0.3, Motion.EASE)
                        ),
                        new KeyFrame(Duration.millis(200),
-                                new KeyValue(decorator.opacityProperty(), 0, FXUtils.EASE),
-                                new KeyValue(decorator.scaleXProperty(), 0.8, FXUtils.EASE),
-                                new KeyValue(decorator.scaleYProperty(), 0.8, FXUtils.EASE),
-                                new KeyValue(decorator.scaleZProperty(), 0.8, FXUtils.EASE)
+                                new KeyValue(decorator.opacityProperty(), 0, Motion.EASE),
+                                new KeyValue(decorator.scaleXProperty(), 0.8, Motion.EASE),
+                                new KeyValue(decorator.scaleYProperty(), 0.8, Motion.EASE),
+                                new KeyValue(decorator.scaleZProperty(), 0.8, Motion.EASE)
                        )
                );
                timeline.setOnFinished(event -> Launcher.stopApplication());
@@ -364,19 +365,16 @@ public class DecoratorController {

    // ==== Navigation ====

-    private static final DecoratorAnimationProducer animation = new DecoratorAnimationProducer();
-
-    public void navigate(Node node) {
-        navigator.navigate(node, animation);
+    public void navigate(Node node, AnimationProducer animationProducer, Duration duration, Interpolator interpolator) {
+        navigator.navigate(node, animationProducer, duration, interpolator);
    }

    private void close() {
        if (navigator.getCurrentPage() instanceof DecoratorPage) {
            DecoratorPage page = (DecoratorPage) navigator.getCurrentPage();

-            // FIXME: Get WorldPage working first, and revisit this later
-            page.closePage();
            if (page.isPageCloseable()) {
+                page.closePage();
                return;
            }
        }
@@ -458,7 +456,9 @@ public class DecoratorController {
                Platform.runLater(() -> showDialog(node));
                return;
            }
-            dialog = new JFXDialog();
+            dialog = new JFXDialog(AnimationUtils.isAnimationEnabled()
+                    ? JFXDialog.DialogTransition.CENTER
+                    : JFXDialog.DialogTransition.NONE);
            dialogPane = new JFXDialogPane();

            dialog.setContent(dialogPane);
@@ -537,7 +537,8 @@ public class DecoratorController {
    public void startWizard(WizardProvider wizardProvider, String category) {
        FXUtils.checkFxUserThread();

-        navigator.navigate(new DecoratorWizardDisplayer(wizardProvider, category), ContainerAnimations.FADE);
+        navigator.navigate(new DecoratorWizardDisplayer(wizardProvider, category),
+                ContainerAnimations.FORWARD, Motion.SHORT4, Motion.EASE);
    }

    // ==== Authlib Injector DnD ====
@@ -1,57 +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.ui.decorator;
-
-import javafx.scene.Node;
-import org.jackhuang.hmcl.ui.animation.AnimationProducer;
-import org.jackhuang.hmcl.ui.construct.Navigator;
-
-public abstract class DecoratorNavigatorPage extends DecoratorTransitionPage {
-    protected final Navigator navigator = new Navigator();
-
-    {
-        this.navigator.setOnNavigating(this::onNavigating);
-        this.navigator.setOnNavigated(this::onNavigated);
-        backableProperty().bind(navigator.backableProperty());
-    }
-
-    @Override
-    protected void navigate(Node page, AnimationProducer animationProducer) {
-        navigator.navigate(page, animationProducer);
-    }
-
-    @Override
-    public boolean back() {
-        if (navigator.canGoBack()) {
-            navigator.close();
-            return false;
-        } else {
-            return true;
-        }
-    }
-
-    private void onNavigating(Navigator.NavigationEvent event) {
-        if (event.getSource() != this.navigator) return;
-        onNavigating(event.getNode());
-    }
-
-    private void onNavigated(Navigator.NavigationEvent event) {
-        if (event.getSource() != this.navigator) return;
-        onNavigated(event.getNode());
-    }
-}
@@ -18,6 +18,10 @@
 package org.jackhuang.hmcl.ui.decorator;

 import com.jfoenix.controls.JFXButton;
+import javafx.animation.Interpolator;
+import javafx.animation.KeyFrame;
+import javafx.animation.KeyValue;
+import javafx.animation.Timeline;
 import javafx.beans.InvalidationListener;
 import javafx.beans.WeakInvalidationListener;
 import javafx.beans.binding.Bindings;
@@ -39,12 +43,13 @@ import javafx.scene.paint.Color;
 import javafx.scene.shape.Rectangle;
 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.AnimationProducer;
 import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.wizard.Navigation;
 import org.jackhuang.hmcl.util.platform.OperatingSystem;
@@ -205,16 +210,13 @@ public class DecoratorSkin extends SkinBase<Decorator> {
                if (s == null) return;
                Node node = createNavBar(skinnable, s.getLeftPaneWidth(), s.isBackable(), skinnable.canCloseProperty().get(), skinnable.showCloseAsHomeProperty().get(), s.isRefreshable(), s.getTitle(), s.getTitleNode());
                if (s.isAnimate()) {
-                    AnimationProducer animation;
-                    if (skinnable.getNavigationDirection() == Navigation.NavigationDirection.NEXT) {
-                        animation = ContainerAnimations.SWIPE_LEFT_FADE_SHORT;
-                    } else if (skinnable.getNavigationDirection() == Navigation.NavigationDirection.PREVIOUS) {
-                        animation = ContainerAnimations.SWIPE_RIGHT_FADE_SHORT;
-                    } else {
-                        animation = ContainerAnimations.FADE;
-                    }
+                    TransitionPane.AnimationProducer animation = switch (skinnable.getNavigationDirection()) {
+                        case NEXT -> NavBarAnimations.NEXT;
+                        case PREVIOUS -> NavBarAnimations.PREVIOUS;
+                        default -> ContainerAnimations.FADE;
+                    };
                    skinnable.setNavigationDirection(Navigation.NavigationDirection.START);
-                    navBarPane.setContent(node, animation);
+                    navBarPane.setContent(node, animation, Motion.SHORT4);
                } else {
                    navBarPane.getChildren().setAll(node);
                }
@@ -231,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());

@@ -263,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);
@@ -271,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);

@@ -283,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);
            }
@@ -302,6 +304,7 @@ public class DecoratorSkin extends SkinBase<Decorator> {
            BorderPane center = new BorderPane();
            if (title != null) {
                Label titleLabel = new Label();
+                titleLabel.textFillProperty().bind(Themes.titleFillProperty());
                BorderPane.setAlignment(titleLabel, Pos.CENTER_LEFT);
                titleLabel.getStyleClass().add("jfx-decorator-title");
                if (titleNode == null) {
@@ -331,9 +334,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();
@@ -500,4 +502,66 @@ public class DecoratorSkin extends SkinBase<Decorator> {
            }
        }
    }
+
+    enum NavBarAnimations implements TransitionPane.AnimationProducer {
+        NEXT {
+            @Override
+            public void init(TransitionPane container, Node previousNode, Node nextNode) {
+                super.init(container, previousNode, nextNode);
+                nextNode.setTranslateX(container.getWidth());
+            }
+
+            @Override
+            public Timeline animate(
+                    Pane container, Node previousNode, Node nextNode,
+                    Duration duration, Interpolator interpolator) {
+                return new Timeline(
+                        new KeyFrame(Duration.ZERO,
+                                new KeyValue(nextNode.translateXProperty(), 50, interpolator),
+                                new KeyValue(previousNode.translateXProperty(), 0, interpolator),
+                                new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                                new KeyValue(previousNode.opacityProperty(), 1, interpolator)),
+                        new KeyFrame(duration,
+                                new KeyValue(nextNode.translateXProperty(), 0, interpolator),
+                                new KeyValue(previousNode.translateXProperty(), -50, interpolator),
+                                new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                                new KeyValue(previousNode.opacityProperty(), 0, interpolator))
+                );
+            }
+
+            @Override
+            public TransitionPane.AnimationProducer opposite() {
+                return NEXT;
+            }
+        },
+
+        PREVIOUS {
+            @Override
+            public void init(TransitionPane container, Node previousNode, Node nextNode) {
+                super.init(container, previousNode, nextNode);
+                nextNode.setTranslateX(container.getWidth());
+            }
+
+            @Override
+            public Timeline animate(Pane container, Node previousNode, Node nextNode, Duration duration, Interpolator interpolator) {
+                return new Timeline(
+                        new KeyFrame(Duration.ZERO,
+                                new KeyValue(nextNode.translateXProperty(), -50, interpolator),
+                                new KeyValue(previousNode.translateXProperty(), 0, interpolator),
+                                new KeyValue(nextNode.opacityProperty(), 0, interpolator),
+                                new KeyValue(previousNode.opacityProperty(), 1, interpolator)),
+                        new KeyFrame(duration,
+                                new KeyValue(nextNode.translateXProperty(), 0, interpolator),
+                                new KeyValue(previousNode.translateXProperty(), 50, interpolator),
+                                new KeyValue(nextNode.opacityProperty(), 1, interpolator),
+                                new KeyValue(previousNode.opacityProperty(), 0, interpolator))
+                );
+            }
+
+            @Override
+            public TransitionPane.AnimationProducer opposite() {
+                return PREVIOUS;
+            }
+        };
+    }
 }
@@ -1,73 +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.ui.decorator;
-
-import javafx.beans.property.ObjectProperty;
-import javafx.beans.property.SimpleObjectProperty;
-import javafx.collections.FXCollections;
-import javafx.collections.ObservableList;
-import javafx.scene.control.SingleSelectionModel;
-import org.jackhuang.hmcl.ui.animation.ContainerAnimations;
-import org.jackhuang.hmcl.ui.construct.Navigator;
-import org.jackhuang.hmcl.ui.construct.TabControl;
-import org.jackhuang.hmcl.ui.construct.TabHeader;
-import org.jackhuang.hmcl.ui.wizard.Navigation;
-
-public abstract class DecoratorTabPage extends DecoratorTransitionPage implements TabControl {
-
-    public DecoratorTabPage() {
-        getSelectionModel().selectedItemProperty().addListener((a, b, newValue) -> {
-            newValue.initializeIfNeeded();
-            if (newValue.getNode() != null) {
-                onNavigating(getCurrentPage());
-                if (getCurrentPage() != null) getCurrentPage().fireEvent(new Navigator.NavigationEvent(null, getCurrentPage(), Navigation.NavigationDirection.NEXT, Navigator.NavigationEvent.NAVIGATING));
-                navigate(newValue.getNode(), ContainerAnimations.FADE);
-                onNavigated(getCurrentPage());
-                if (getCurrentPage() != null) getCurrentPage().fireEvent(new Navigator.NavigationEvent(null, getCurrentPage(), Navigation.NavigationDirection.NEXT, Navigator.NavigationEvent.NAVIGATED));
-            }
-        });
-    }
-
-    public DecoratorTabPage(TabHeader.Tab<?>... tabs) {
-        this();
-        if (tabs != null) {
-            getTabs().addAll(tabs);
-        }
-    }
-
-    private ObservableList<TabHeader.Tab<?>> tabs = FXCollections.observableArrayList();
-
-    @Override
-    public ObservableList<TabHeader.Tab<?>> getTabs() {
-        return tabs;
-    }
-
-    private final ObjectProperty<SingleSelectionModel<TabHeader.Tab<?>>> selectionModel = new SimpleObjectProperty<>(this, "selectionModel", new TabControl.TabControlSelectionModel(this));
-
-    public SingleSelectionModel<TabHeader.Tab<?>> getSelectionModel() {
-        return selectionModel.get();
-    }
-
-    public ObjectProperty<SingleSelectionModel<TabHeader.Tab<?>>> selectionModelProperty() {
-        return selectionModel;
-    }
-
-    public void setSelectionModel(SingleSelectionModel<TabHeader.Tab<?>> selectionModel) {
-        this.selectionModel.set(selectionModel);
-    }
-}
@@ -17,6 +17,7 @@
 */
 package org.jackhuang.hmcl.ui.decorator;

+import javafx.animation.Interpolator;
 import javafx.beans.binding.Bindings;
 import javafx.beans.property.*;
 import javafx.scene.Node;
@@ -24,7 +25,7 @@ import javafx.scene.control.Control;
 import javafx.scene.control.Skin;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
-import org.jackhuang.hmcl.ui.animation.AnimationProducer;
+import javafx.util.Duration;
 import org.jackhuang.hmcl.ui.animation.TransitionPane;
 import org.jackhuang.hmcl.ui.wizard.Refreshable;

@@ -36,8 +37,8 @@ public abstract class DecoratorTransitionPage extends Control implements Decorat
    private Node currentPage;
    protected final TransitionPane transitionPane = new TransitionPane();

-    protected void navigate(Node page, AnimationProducer animation) {
-        transitionPane.setContent(currentPage = page, animation);
+    protected void navigate(Node page, TransitionPane.AnimationProducer animation, Duration duration, Interpolator interpolator) {
+        transitionPane.setContent(currentPage = page, animation, duration, interpolator);
    }

    protected void onNavigating(Node from) {
@@ -20,6 +20,7 @@ package org.jackhuang.hmcl.ui.decorator;
 import javafx.scene.Node;
 import javafx.scene.control.SkinBase;
 import org.jackhuang.hmcl.task.Task;
+import org.jackhuang.hmcl.ui.animation.Motion;
 import org.jackhuang.hmcl.ui.construct.Navigator;
 import org.jackhuang.hmcl.ui.construct.PageCloseEvent;
 import org.jackhuang.hmcl.ui.wizard.*;
@@ -74,7 +75,7 @@ public class DecoratorWizardDisplayer extends DecoratorTransitionPage implements
    @Override
    public void navigateTo(Node page, Navigation.NavigationDirection nav) {
        displayer.navigateTo(page, nav);
-        navigate(page, nav.getAnimation());
+        navigate(page, nav.getAnimation(), Motion.SHORT4, Motion.EASE);

        String prefix = category == null ? "" : category + " - ";

@@ -33,6 +33,7 @@ import javafx.scene.layout.BorderPane;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.InstallerItem;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane;
+import org.jackhuang.hmcl.ui.wizard.Navigation;
 import org.jackhuang.hmcl.ui.wizard.WizardController;
 import org.jackhuang.hmcl.ui.wizard.WizardPage;
 import org.jackhuang.hmcl.util.SettingsMap;
@@ -60,7 +61,16 @@ public abstract class AbstractInstallersPage extends Control implements WizardPa
                }

                if (!(library.resolvedStateProperty().get() instanceof InstallerItem.IncompatibleState))
-                    controller.onNext(new VersionsPage(controller, i18n("install.installer.choose", i18n("install.installer." + libraryId)), gameVersion, downloadProvider, libraryId, () -> controller.onPrev(false)));
+                    controller.onNext(
+                            new VersionsPage(
+                                    controller,
+                                    i18n("install.installer.choose", i18n("install.installer." + libraryId)),
+                                    gameVersion,
+                                    downloadProvider,
+                                    libraryId,
+                                    () -> controller.onPrev(false, Navigation.NavigationDirection.NEXT)
+                            ), Navigation.NavigationDirection.NEXT
+                    );
            });
            library.setOnRemove(() -> {
                controller.getSettings().remove(libraryId);
@@ -36,11 +36,9 @@ import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 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.AdvancedListBox;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane;
-import org.jackhuang.hmcl.ui.construct.TabControl;
 import org.jackhuang.hmcl.ui.construct.TabHeader;
 import org.jackhuang.hmcl.ui.decorator.DecoratorAnimatedPage;
 import org.jackhuang.hmcl.ui.decorator.DecoratorPage;
@@ -100,23 +98,20 @@ public class DownloadPage extends DecoratorAnimatedPage implements DecoratorPage
        resourcePackTab.setNodeSupplier(loadVersionFor(() -> HMCLLocalizedDownloadListPage.ofResourcePack((profile, version, file) -> download(profile, version, file, "resourcepacks"), true)));
        shaderTab.setNodeSupplier(loadVersionFor(() -> new DownloadListPage(ModrinthRemoteModRepository.SHADER_PACKS, (profile, version, file) -> download(profile, version, file, "shaderpacks"), true)));
        worldTab.setNodeSupplier(loadVersionFor(() -> new DownloadListPage(CurseForgeRemoteModRepository.WORLDS)));
-        tab = new TabHeader(newGameTab, modpackTab, modTab, resourcePackTab, shaderTab, worldTab);
+        tab = new TabHeader(transitionPane, newGameTab, modpackTab, modTab, resourcePackTab, shaderTab, worldTab);

        Profiles.registerVersionsListener(this::loadVersions);

        tab.select(newGameTab);
-        FXUtils.onChangeAndOperate(tab.getSelectionModel().selectedItemProperty(), newValue -> {
-            transitionPane.setContent(newValue.getNode(), ContainerAnimations.FADE);
-        });

        AdvancedListBox sideBar = new AdvancedListBox()
                .startCategory(i18n("download.game").toUpperCase(Locale.ROOT))
-                .addNavigationDrawerTab(tab, newGameTab, i18n("game"), SVG.STADIA_CONTROLLER)
-                .addNavigationDrawerTab(tab, modpackTab, i18n("modpack"), SVG.PACKAGE2)
+                .addNavigationDrawerTab(tab, newGameTab, i18n("game"), SVG.STADIA_CONTROLLER, SVG.STADIA_CONTROLLER_FILL)
+                .addNavigationDrawerTab(tab, modpackTab, i18n("modpack"), SVG.PACKAGE2, SVG.PACKAGE2_FILL)
                .startCategory(i18n("download.content").toUpperCase(Locale.ROOT))
-                .addNavigationDrawerTab(tab, modTab, i18n("mods"), SVG.EXTENSION)
+                .addNavigationDrawerTab(tab, modTab, i18n("mods"), SVG.EXTENSION, SVG.EXTENSION_FILL)
                .addNavigationDrawerTab(tab, resourcePackTab, i18n("resourcepack"), SVG.TEXTURE)
-                .addNavigationDrawerTab(tab, shaderTab, i18n("download.shader"), SVG.WB_SUNNY)
+                .addNavigationDrawerTab(tab, shaderTab, i18n("download.shader"), SVG.WB_SUNNY, SVG.WB_SUNNY_FILL)
                .addNavigationDrawerTab(tab, worldTab, i18n("world"), SVG.PUBLIC);
        FXUtils.setLimitWidth(sideBar, 200);
        setLeft(sideBar);
@@ -124,13 +119,6 @@ public class DownloadPage extends DecoratorAnimatedPage implements DecoratorPage
        setCenter(transitionPane);
    }

-    private void selectTabIfCurseForgeAvailable(TabControl.Tab<?> newTab) {
-        if (CurseForgeRemoteModRepository.isAvailable())
-            tab.select(newTab);
-        else
-            Controllers.dialog(i18n("download.curseforge.unavailable"));
-    }
-
    private static <T extends Node> Supplier<T> loadVersionFor(Supplier<T> nodeSupplier) {
        return () -> {
            T node = nodeSupplier.get();
@@ -205,20 +193,24 @@ public class DownloadPage extends DecoratorAnimatedPage implements DecoratorPage
    }

    public void showGameDownloads() {
-        tab.select(newGameTab);
+        tab.select(newGameTab, false);
    }

    public void showModpackDownloads() {
-        tab.select(modpackTab);
+        tab.select(modpackTab, false);
+    }
+
+    public void showResourcepackDownloads() {
+        tab.select(resourcePackTab, false);
    }

    public DownloadListPage showModDownloads() {
-        tab.select(modTab);
+        tab.select(modTab, false);
        return modTab.getNode();
    }

    public void showWorldDownloads() {
-        tab.select(worldTab);
+        tab.select(worldTab, false);
    }

    private static final class DownloadNavigator implements Navigation {
Author	SHA1	Message	Date
Glavo	0d9e2d92e0	[release/3.9] 修复 CurseForge 源无法搜索到内容的问题 (#5232 ) https://github.com/HMCL-dev/HMCL/pull/5220	2026-01-14 20:49:09 +08:00
Glavoand辞庐	9f754e78e8	[release/3.9] Fix #5121 : NeoForge alpha 版本未正确归类的问题 (#5231 ) https://github.com/HMCL-dev/HMCL/pull/5125 Co-authored-by: 辞庐 <109708109+CiiLu@users.noreply.github.com>	2026-01-14 20:48:26 +08:00
GlavoandWulian233	cecd28791b	[release/3.9] Fix #5126 : BMCLAPI 选择 Liteloader 不支持的版本时报错 (#5230 ) https://github.com/HMCL-dev/HMCL/pull/5128 Co-authored-by: Wulian233 <1055917385@qq.com>	2026-01-14 20:47:09 +08:00
Glavoand辞庐	5e42652e75	[release/3.9] 更新 NeoForge 版本号规则 (#5229 ) https://github.com/HMCL-dev/HMCL/pull/5110 Co-authored-by: 辞庐 <109708109+CiiLu@users.noreply.github.com>	2026-01-14 20:46:32 +08:00
Glavo	9f682e0c39	[release/3.9] 优化 JFXListView 的平滑滚动效果 (#5228 ) https://github.com/HMCL-dev/HMCL/pull/5052	2026-01-14 20:36:57 +08:00
Glavo	eac12efafb	[release/3.9] 禁用 LogWindow 的平滑滚动效果 (#5227 ) https://github.com/HMCL-dev/HMCL/pull/5046	2026-01-14 20:36:11 +08:00
Glavo	d3d46f6a29	Fix #5039 : 修复陶瓦联机页面部分文本在深色模式下颜色异常的问题 (#5040 )	2025-12-21 15:13:58 +08:00
Glavo	6f1db67e9a	优化反馈页面 (#5008 ) 1. 将主页左下角“官方群组”按钮调整为跳转到“反馈”页面； 2. 将反馈页面分为“官方群组”和“提交反馈”两部分	2025-12-20 20:35:41 +08:00
mineDiamond	0d7ece819d	feat: 添加快速进入世界功能 (#4872 ) close #2563	2025-12-20 20:33:52 +08:00
Damon Lu	7f852080cd	在 macOS 上添加启动脚本的后缀 `.command` (#4927 )	2025-12-20 20:32:34 +08:00
neveler	e0360c2b38	使用 subtitle 显示预览更新提示 (#5019 )	2025-12-20 16:04:20 +08:00
Glavo	3bf0eb2a16	Fix #5014 : 修复 GameCrashWindow 中 feedbackTextFlow 样式错误的问题 (#5020 )	2025-12-20 16:00:42 +08:00
Glavo	84b428b57c	在 JFXCustomColorPickerDialog 中使用 HEX 作为默认 Tab (#5011 )	2025-12-20 15:33:03 +08:00
neveler	41895e97e1	修复 subtitle 颜色丢失的问题 (#5018 ) fix #5017	2025-12-20 15:32:34 +08:00
zimzaza4	f839dc192c	修改AccountAdvancedListItem 控件, 在 RootPage 中添加快速选择账户 (#4932 )	2025-12-19 22:18:10 +08:00
Glavo	24250a6239	更新 CNB Issue 模板 (#5010 )	2025-12-19 22:03:43 +08:00
Glavo	a3ab2b52b6	添加 CNB Issue 模板 (#5009 )	2025-12-19 21:39:00 +08:00
Glavo	c4d4c6fcf3	优化镜像仓库同步功能 (#5006 )	2025-12-19 16:47:12 +08:00
Glavo	f77f005f88	mirror.yml 中直接传递用户名 (#5005 )	2025-12-19 16:10:02 +08:00
Glavo	9ec494664c	简化镜像仓库同步 workflow (#5004 )	2025-12-19 16:02:02 +08:00
Glavo	dc7c883962	在低于 JavaFX 23 的情况下隐藏主题模式跟随系统选项 (#4985 )	2025-12-18 21:25:07 +08:00
Glavo	567bd15997	在陶瓦联机界面启动游戏时禁用离线皮肤功能 (#4916 )	2025-12-18 21:18:03 +08:00
Glavo	25c9ef0f27	修复无法解析类似 "26.1 Snapshot 1" 的版本号的问题 (#5002 )	2025-12-18 21:09:07 +08:00
Glavo	d45d994307	将 Release 同步至 CNB (#5000 )	2025-12-18 21:08:30 +08:00
Glavo	01b7a6b95a	Revert "修复 TransitionPane 动画被打断时节点状态异常的问题" (#4986 ) Reverts HMCL-dev/HMCL#4957	2025-12-18 20:47:48 +08:00
神奇的赵二 (OrzMiku)	a0593c03c6	支持下载 Java25 (#4990 )	2025-12-18 20:46:52 +08:00
Glavo	91f05315aa	Add CNB badge (#4999 )	2025-12-18 20:11:06 +08:00
Burning_TNT	84b8fff37b	Bump authlib-injector to 1.2.7: fix compatibility with 26.1-snapshot-1 (#4992 ) Fix #4989	2025-12-17 17:05:07 -05:00
Glavo	3a9cc2b9bb	修复 CNB 同步功能 (#4995 )	2025-12-18 05:57:14 +08:00
Glavo	056f30f6f5	将代码同步至 CNB (#4994 )	2025-12-18 05:47:29 +08:00
辞庐	2d6e01fcf9	添加输出游戏调试日志选项 (#4144 )	2025-12-14 20:49:23 +08:00
Calboot	b6d95c3ebb	[Enhancement] 给 TableView 添加样式 (#4854 )	2025-12-12 22:00:55 +08:00
Glavo	29e40ec1a5	在 DownloadListPage 中添加图标缓存 (#4866 )	2025-12-12 21:12:51 +08:00
Glavo	497789603a	在日志中记录显示器信息 (#4581 )	2025-12-11 20:47:10 +08:00
Glavo	8d3cb66d17	将 TableView 中的 CheckBox 替换为 JFXCheckBox (#4964 )	2025-12-11 20:41:26 +08:00
mineDiamond	0613b342f0	feat: 添加1.21.11_unobfuscated支持 (#4963 )	2025-12-11 20:29:55 +08:00
Glavo	18000fae30	修复 TransitionPane 动画被打断时节点状态异常的问题 (#4957 )	2025-12-09 15:32:17 +08:00
Glavo	d2c985491a	合并 SettingsPage 与 SettingsView (#4955 )	2025-12-08 16:45:29 +08:00
Glavo	f7f0d55504	更新 RipplerContainer 的涟漪颜色 (#4953 )	2025-12-08 15:17:10 +08:00
Glavo	210e127ac7	Fix #4950 : 修复部分按钮波纹颜色错误的问题 (#4952 )	2025-12-07 21:46:42 +08:00
Glavo	36748a3a07	Fix #4941 : 更新 JFXComboBox 下拉菜单滚动条样式 (#4951 )	2025-12-07 21:43:47 +08:00
Burning_TNT	cf667b2b8d	Fix #4759 : 部分 LF/NF 模组无法正确识别 (#4945 )	2025-12-07 21:13:49 +08:00
Burning_TNT	a3f7a230e7	Fix #4597 : 绕过 OptiFine HD U G6 pre1 与其他模组 Fingerprint 冲突的问题 (#4946 )	2025-12-07 21:12:08 +08:00
辞庐	9dd8084be2	修复本地安装新版本 Forge 时未移除版本号中 forge- 前缀的问题 (#4935 )	2025-12-07 21:04:18 +08:00
Glavo	9cf5a5e5db	修复从 BMCLAPI 下载部分旧文件时校验失败的问题 (#4949 )	2025-12-07 20:45:02 +08:00
Glavo	8efa54dd11	更新超链接被聚焦时的边框样式 (#4948 )	2025-12-07 20:44:32 +08:00
Wulian233	7902020300	Fix #4939 : 修复深色模式超链接的已访问样式配色问题 (#4943 )	2025-12-07 16:35:46 +08:00
Glavo	e72c0bbb50	修复部分控件 Tooltip 文字颜色异常的问题 (#4947 )	2025-12-07 16:15:22 +08:00
辞庐 3gf8jv4dv Glavo	ef3df92592	feat: 资源包管理 (#4475 ) Co-authored-by: 3gf8jv4dv <3gf8jv4dv@gmail.com> Co-authored-by: Glavo <zjx001202@gmail.com>	2025-12-06 22:17:04 +08:00
Glavo	04b300f453	简化 MessageDialogPane (#4918 )	2025-12-06 21:18:58 +08:00
mineDiamondandGlavo	e455ce4c84	feat: 支持1.21.11-pre4/5/rc1/2_unobfuscated (#4911 ) Co-authored-by: Glavo <zjx001202@gmail.com>	2025-12-06 21:03:27 +08:00
Glavo	456d13959e	更新 GameVersionNumber 解析规则 (#4917 ) 1. 支持 [Minecraft 新版本号方案](https://www.minecraft.net/en-us/article/minecraft-new-version-numbering-system) 2. 支持对版本号进行归一化处理。	2025-12-06 20:55:11 +08:00
Glavo	7ac22ad567	Windows 11 上日志窗口标题栏颜色应当跟随主题模式设置 (#4910 )	2025-12-04 01:24:36 +08:00
neveler	ed4fec6c42	在 HintPane 提示框中为图标和文本添加间距 (#4915 )	2025-12-03 16:45:44 +08:00
Glavo	c321453399	Fix #4900 : 修复 ManagedProcess#getLines 完成后不会解除锁定的问题 (#4913 )	2025-12-03 16:19:17 +08:00
Calboot	aae02bef50	[Bugfix] 修复模组更新列表界面按 esc 无法正确退出的问题 (#4895 ) Fixes #4894	2025-12-03 16:17:46 +08:00
Glavo	89c9a93aab	优化深色模式下日志窗口筛选按钮的颜色 (#4912 )	2025-12-03 16:04:10 +08:00
neveler	74ec4aaae8	优化检查更新工作流 (#4879 )	2025-12-02 21:15:43 +08:00
Glavo	669a9dfc57	优化更新弹窗的颜色 (#4903 )	2025-12-02 21:14:10 +08:00
Glavo	a1e75e48da	修复部分控件在深色模式下颜色异常的问题 (#4899 )	2025-12-02 20:29:46 +08:00
Glavo	75292d2a52	在陶瓦联机页面向非中国内地用户添加提示框 (#4869 )	2025-11-30 21:47:26 +08:00
mineDiamond	6b6dee6cfa	feat: 添加对 1.21.11-pre3_unobfuscated 的支持 (#4870 )	2025-11-30 21:41:36 +08:00
Calboot	6558b3b2f9	[Bugfix] #4863 : macOS 上错误的 Modrinth 整合包默认文件名称 (#4864 ) Fixes #4863	2025-11-30 21:27:59 +08:00
Glavo	68fc2d7cd9	修复部分控件颜色错误的问题 (#4887 )	2025-11-30 21:23:39 +08:00
Glavo	cda45db222	优化对 Linux MIPS64el 平台的支持 (#4886 )	2025-11-30 21:23:23 +08:00
3gf8jv4dv	7325b36e8c	fix(i18n): improve mod update dialog text (#4788 ) fix #4773	2025-11-30 16:13:19 +08:00
Glavo	6fa6f23ad4	在 Manifest 文件中添加 Enable-Final-Field-Mutation 条目 (#4561 )	2025-11-30 15:40:06 +08:00
Glavo	8351ee4094	重构下载源选择逻辑 (#4856 )	2025-11-30 15:27:33 +08:00
Glavo	310a344f96	更新至 Material Design 3 颜色系统 (#4835 )	2025-11-30 15:25:27 +08:00
Glavo	3b78ec9664	修复 JFXRadioButton 在 Windows 平台上中心圆点偏移的问题 (#4874 )	2025-11-28 21:09:58 +08:00
Glavo	cfcbe6e962	修复修改主题色后 JFXCheckBox 颜色不会及时变化的问题 (#4871 )	2025-11-27 21:25:27 +08:00
Glavo	fe809ad397	Fix #4860 : 播放动画时将 ListPageBase 缓存为位图 (#4862 )	2025-11-26 15:53:39 +08:00
Glavo	78a78f4fe7	使用 JFXColorPicker 代替 ColorPicker (#4865 )	2025-11-25 21:39:39 +08:00
Glavo	6ca6429114	修复惯性滚动可能导致弹出菜单错位的问题 (#4857 )	2025-11-25 15:55:12 +08:00
Glavo	4a3d330f12	Bump JUnit to 6.0.1 (#4858 )	2025-11-25 15:36:31 +08:00
Glavo	ac71e66fe1	修复 FetchTask 未设置 User-Agent 的问题 (#4850 )	2025-11-24 20:33:24 +08:00
Glavo	3c5e4f15d9	支持自动切换游戏语言至阿拉伯语 (#4853 )	2025-11-23 21:51:30 +08:00
Hommam-Prom	1c37fbc97a	Arabic translation file (#4837 )	2025-11-23 21:36:33 +08:00
Glavo	8823ae8ee4	将阿拉伯语列为实验性支持语言 (#4851 )	2025-11-23 21:33:01 +08:00
ZZZank	a7b952fc4d	add `@PropertyKey` to i18n methods for easier translation<->key navigation (#4831 )	2025-11-23 20:32:32 +08:00
Glavo	63ceb3c6c8	Bump version root to 3.9 (#4849 )	2025-11-23 15:44:54 +08:00
Glavo	ab6e8692ad	修复缓存异常时 FetchTask 无限循环的问题 (#4844 )	2025-11-23 15:20:14 +08:00
辞庐	97ada51489	更新 amdgpu.ids (#4845 )	2025-11-23 15:15:37 +08:00
Burning_TNT	8e9c2f27a1	Bump Terracotta to 0.3.14 (#4838 ) * 更新 MacOS 元数据以增强本地化支持 by @burningtnt in https://github.com/burningtnt/Terracotta/pull/69 * 重构 EasyTier 参数拼接逻辑 by @burningtnt in https://github.com/burningtnt/Terracotta/pull/81 * 为 ET 添加 tcp://0.0.0.0:0 监听器 by @burningtnt in https://github.com/burningtnt/Terracotta/pull/90 * 强制 ET 以 p2p_only 模式运行 by @burningtnt in https://github.com/burningtnt/Terracotta/pull/97 * 支持联机房间码持久化 by @burningtnt in https://github.com/burningtnt/Terracotta/pull/94 * 修复 'API c:player_profiles_list invocation failed: Host Profile is consumed or invalid, machine_id may have conflict.' 的问题 by @burningtnt in https://github.com/burningtnt/Terracotta/pull/98	2025-11-22 15:28:36 +08:00
mineDiamondandGlavo	8563db3654	添加对 1.21.11-pre1/2_unobfuscated 的支持 (#4829 ) Co-authored-by: Glavo <zjx001202@gmail.com>	2025-11-21 22:06:51 +08:00
Glavo	2695b5c42f	使用 EdgeOne 分发 HMCL 元数据 (#4830 )	2025-11-21 22:02:04 +08:00
Glavo	bed87425e7	从首页打开子页面时应当打开默认标签页 (#4826 )	2025-11-20 17:40:51 +08:00
Glavo	d6ad1cbdf7	修复 TabHeader 相关动画问题 (#4822 )	2025-11-19 15:32:18 +08:00
Glavo	da5bbd2b22	播放过渡动画时缓存节点至位图 (#4815 )	2025-11-18 16:35:02 +08:00
Glavo	5c726913e4	更新陶瓦联机用户须知 (#4816 )	2025-11-18 16:27:00 +08:00
Glavo	02bd9e9d2d	使用低版本 Java 启动且带有 --apply-to 参数时提醒用户手动下载最新版本 HMCL (#4793 )	2025-11-17 20:23:40 +08:00
辞庐	458793f0c0	fix: 修复 Windows 下全局设置中本地库路径路径分隔符显示错误的问题 (#4808 )	2025-11-17 16:37:34 +08:00
Haowei Wen	0543da31cc	Fix #4802 : 修复复制实例时使用非法实例 ID 启动器行为异常的问题 (#4805 )	2025-11-17 16:27:04 +08:00
Glavo	a74dc98ce6	修复下载安装整合包时启动器崩溃的问题 (#4813 )	2025-11-17 15:43:20 +08:00
Glavo	9dfc6155c4	在 JFXListView 上启用平滑滚动 (#4809 )	2025-11-17 15:42:55 +08:00
Glavo	e4f10d7cd8	添加更多动画效果 (#4803 )	2025-11-16 21:26:38 +08:00
Glavo	a21a8d5045	Bump JNA to 5.18.1 (#4799 )	2025-11-15 23:22:02 +08:00
Glavo	59994bdeed	Bump jsoup to 1.21.2 (#4798 )	2025-11-15 23:09:33 +08:00
Glavo	a95e4c65ee	Bump Gradle to 9.2.0 (#4796 )	2025-11-15 23:05:56 +08:00
Glavo	df7783c568	修复进入世界管理页面时动画错误的问题 (#4797 )	2025-11-15 23:00:09 +08:00
Glavo	e5df2034fd	修复初次打开部分页面时页面闪烁的问题 (#4795 )	2025-11-15 22:48:30 +08:00
mineDiamond	f13d53d6da	feat: 增强对数据包/资源包`mcmeta`的解析能力 (#4612 ) close #3952	2025-11-15 21:25:48 +08:00
Glavo	75c4fb6550	优化更多界面的动画 (#4790 )	2025-11-15 21:22:18 +08:00
Glavo	44869da20e	更新界面动画效果 (#4780 )	2025-11-14 17:42:28 +08:00
Glavo	756dce0d6f	添加对 25w46a_unobfuscated 的支持 (#4782 )	2025-11-14 17:42:20 +08:00
mineDiamond	4a4fa07db4	fix: 修复模组列表点击搜索按钮无法正确聚焦到搜索栏的问题 (#4783 )	2025-11-13 21:44:00 +08:00
mineDiamondand3gf8jv4dv	17bc003698	feat: 优化数据包管理功能 (#4672 ) close #4661 Co-authored-by: 3gf8jv4dv <3gf8jv4dv@gmail.com>	2025-11-13 16:43:17 +08:00
Damon Lu	80b2242e4d	在 macOS 下禁用最小化动画 (#4762 )	2025-11-13 16:32:31 +08:00
Glavo	47ccda048c	优化游戏实例默认图标 (#4776 )	2025-11-13 15:40:36 +08:00
Glavo	ae144aa7b8	预加载页面以减少动画卡顿 (#4779 )	2025-11-12 21:21:02 +08:00
Glavo	343c09b6ff	修复无法获取部分远古版本版本号的问题 (#4775 )	2025-11-11 20:58:56 +08:00
Glavo	1bbc6ef777	更新模组数据 (2025-11-07) (#4770 )	2025-11-09 20:57:10 +08:00
辞庐	f4c6a4f891	优化 Github Actions 构建速度 (#4745 )	2025-11-08 21:54:15 +08:00
Glavo	733b2c90c4	Fix #4538 : 删除实例失败时弹出对话框 (#4540 )	2025-11-08 21:52:01 +08:00
Glavo	81b61523df	使 NetworkUtils.doGet 支持更多 URI scheme (#4768 )	2025-11-08 21:51:28 +08:00
Glavo	d93f4d6bbb	添加对 25w45a_unobfuscated 的支持 (#4767 )	2025-11-08 21:50:16 +08:00
neveler	f0a16b0cd9	使用矩阵简化更新工作流 (#4725 )	2025-11-08 21:20:01 +08:00
Glavo	783cadcf77	从注册表中读取 Windows 版本信息 (#4760 )	2025-11-08 20:13:38 +08:00
Glavo	cbb4b0c51b	创建 ObservableSetting 辅助类 (#4719 )	2025-11-02 21:33:54 +08:00
Glavo	c4d9803177	更新 PLATFORM.md (#4750 )	2025-11-02 20:52:47 +08:00
Glavo	2ce4fcabcb	Revert #4453 : 恢复对 JavaFX 14 的兼容性 (#4749 )	2025-11-02 20:52:12 +08:00
Burning_TNT Glavo Copilot	3a30e5b048	修复 Terracotta 在 macOS 上的兼容性问题 (#4723 ) Co-authored-by: Glavo <zjx001202@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>	2025-11-02 20:29:41 +08:00
Glavo	49b0a99ced	优化检查更新日志的方式 (#4743 )	2025-11-02 20:27:25 +08:00
Wulian233	8f2c860242	更新 Chunkbase 种子版本 (#4742 )	2025-11-01 22:32:50 +08:00
Glavo	8c10775de9	在 PLATFORM.md 中记录启动器对平台的支持状态 (#4737 )	2025-11-01 16:46:38 +08:00
3gf8jv4dv	b5bf7ce4d0	fix(i18n): update i18n for open dir button on instance `mods` tab (#4734 )	2025-11-01 16:46:13 +08:00
Glavo	bd6a6fa9b6	在不支持的平台上打开陶瓦联机页面时弹出提示 (#4735 )	2025-10-31 21:07:25 +08:00
Glavo	1c0ae3918d	修复 Platform.FREEBSD_X86_64 架构错误的问题 (#4736 )	2025-10-31 21:05:37 +08:00
Glavo	c6ce2df731	将官方群组入口重新移动到主界面 (#4727 )	2025-10-28 20:05:59 +08:00
Burning_TNT	18985c0b63	Bump Terracotta to 0.3.12 (#4724 )	2025-10-27 22:09:28 +08:00
Minecraft-温迪andGlavo	322e29642d	只在未被打包为 App 时设置 macOS Dock 栏图标 (#4698 ) Co-authored-by: Glavo <zjx001202@gmail.com>	2025-10-27 21:45:13 +08:00
Glavo	a86e5d7bf5	Update PLATFORM.md (#4717 )	2025-10-27 21:23:29 +08:00
Glavo	c90eaa2937	Fix #4720 : 修复 JFXListViewSkin 创建大量平台线程的问题 (#4721 )	2025-10-27 21:20:32 +08:00
Glavo	defacb3554	限制 ./gradlew run 运行时的默认内存占用 (#4722 )	2025-10-27 20:51:51 +08:00
Glavo	0a66863272	重构 TerracottaMetadata (#4718 )	2025-10-26 20:21:29 +08:00
Glavo	d90df221bc	添加详细构建指南 (#4524 )	2025-10-26 15:53:15 +08:00
Glavo	fd7f909561	将 Localization.md 翻译至英语 (#4669 )	2025-10-24 11:55:14 +08:00
neveler	a921a11be6	Add tooltip to external link button (#4696 )	2025-10-22 21:53:17 +08:00
Glavoand3gf8jv4dv	7fbc99f3eb	优化没有可启动的游戏时的提示 (#4697 ) Co-authored-by: 3gf8jv4dv <3gf8jv4dv@gmail.com>	2025-10-22 20:45:56 +08:00
3gf8jv4dv	7e40c799e5	style(l10n): simplify update button text in mod management header (#4712 )	2025-10-22 20:40:59 +08:00
Glavo	f2032ab7a8	使用 Translator 格式化下载速度 (#4709 )	2025-10-22 20:35:42 +08:00
GlavoandCopilot	d7c6a23dbe	通过解析 IANA 语言子标签注册表增强本地化功能 (#4675 ) Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>	2025-10-21 15:37:32 +08:00
Glavo	27e1e021d7	优化更新日志展示功能 (#4703 ) 1. 如果检测到是降级更新，则不展示更新日志； 2. 如果检测到最新更新日志和最新版本不匹配，则不显示更新日志； 3. 展示当前版本与 `nowchange`/`nowpreview` 之间的所有更新日志，而不只展示一个版本的日志。	2025-10-20 20:21:13 +08:00
Glavo	2516fb5d69	在陶瓦联机界面的启动游戏按钮中显示实例名称 (#4705 )	2025-10-20 20:08:31 +08:00
Burning_TNTandGlavo	d66c080dea	Feature: Download Terracotta binary from Gitee, CNB, alist (sponsored by 8mi) first in China mainland. (#4700 ) Co-authored-by: Glavo <zjx001202@gmail.com>	2025-10-19 21:03:32 +08:00
Glavo	94ca81035b	优化陶瓦联机的复制邀请码功能 (#4687 )	2025-10-18 22:18:14 +08:00
Glavo	1ab414e702	优化 Task 的资源占用 (#4694 )	2025-10-18 21:50:23 +08:00
Glavo	16f6e89e45	删除 CompletableFutureTask.resolveException (#4690 )	2025-10-18 21:47:39 +08:00
Glavo	22f6bfd845	删除 VersionPage.Skin 中未使用的 BorderPane (#4695 )	2025-10-18 21:21:41 +08:00
Glavo	c4823b3e55	优化陶瓦联机用户须知对话框 (#4686 )	2025-10-18 20:25:00 +08:00
Glavo	e34ec9f801	调整陶瓦联机界面左侧按钮 (#4688 )	2025-10-18 20:20:17 +08:00
Burning_TNT	d2e87ba024	Bump Terracotta to 0.3.10. (#4682 )	2025-10-17 20:59:10 +08:00
Glavo	ffb50423af	Bump version root to 3.8 (#4676 )	2025-10-16 20:43:16 +08:00