JavaFXطريقة تغيير تصميم الـColorPicker الإفتراضي

/* بشكل إفتراضي لجعله يظهر بشكل أفضل ColorPicker هنا قمنا بتعديل خصائص كلاسات التصميم التي يستخدمها الكلاس */
.color-picker {
    -fx-background-color: #669999; 
    -fx-background-radius: 0 15 15 0; 
}
.color-picker .color-picker-label .text {
    -fx-fill: #ccffcc;
}

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage stage) {

        // يمثل قائمة الألوان التي نريد إضافتها في النافذة ColorPicker هنا قمنا بإنشاء كائن من الكلاس
        ColorPicker colorPicker = new ColorPicker();
 
        // في النافذة colorPicker هنا قمنا بتحديد مكان ظهور الكائن
        colorPicker.setTranslateX(150);
        colorPicker.setTranslateY(110);
 
        // في النافذة colorPicker هنا قمنا بتحديد حجم الـ
        colorPicker.setPrefSize(100, 30);
 
        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();
 
        // root في الكائن colorPicker هنا قمنا بإضافة الكائن
        root.getChildren().add(colorPicker);
 
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 250);
        
        // لتطبيق الخصائص التي يحتويها على الأشياء الموجودة فيه scene بالكائن my-style.css هنا قمنا بربط ملف التصميم
        scene.getStylesheets().add("css/my-style.css");
        
        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX ColorPicker");
 
        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);
 
        // هنا قمنا بإظهار النافذة
        stage.show();

    }
 
    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }
 
}