Customization of ai2

Ruben_Baena_Perez · September 20, 2020, 11:25am

Hello

I am customizing the colours of the ai2 interface, but there are elements such as hoovers that do not appear within the appengine Ya.css or gwt.css file. Where can I modify these colours?

Salman_Dev · September 20, 2020, 11:42am

do you want to change the color so that it looks dark?.

maybe this can help you for other things besides making it dark :

Ruben_Baena_Perez · September 20, 2020, 3:07pm

Thanks for your answer, but I don't want to put it in dark mode, but change the colors

The only color I can't change is the one that appears when you select a component, it's still green

docker_captura_2

vishwas · September 20, 2020, 3:54pm

Hi
Some colours are hardcoded in the java source files.

This one in particular can be found here:

github.com

mit-cml/appinventor-sources/blob/2e8515552f1a433596a4398694b27084dc577aec/appinventor/appengine/src/com/google/appinventor/client/editor/simple/palette/SimplePaletteItem.java#L101


/**
 * Selects (sets the background to green of) a palette item when it is clicked.
 *
 * @param paletteItemWidget the Widget of the panel item to be selected
 */
private static void select(Widget paletteItemWidget) {
  if (selectedPaletteItemWidget != null) {
    selectedPaletteItemWidget.getElement().getStyle().setProperty("backgroundColor", "white");
  }
  selectedPaletteItemWidget = paletteItemWidget;
  selectedPaletteItemWidget.getElement().getStyle().setProperty("backgroundColor", "#d2e0a6");
}


private void addHandlers() {
  addMouseDownHandler(new MouseDownHandler() {
    @Override
    public void onMouseDown(MouseDownEvent arg0) {
      select(getWidget());
    }
  });
  addTouchStartHandler(new TouchStartHandler() {

Salman_Dev · September 21, 2020, 2:08am

I mean have you got some ideas from here?

Ruben_Baena_Perez · September 21, 2020, 7:42am

Thank you very much!