Customize default colour palette

[marcodafonseca]

Version

3.10.0

Development Environment

Chrome, IE, Mozilla, etc...

Current Behavior

Presently the default colour palette in the colour chooser cannot be changed

const PICKER_COLOR = [
    '#000000',
    '#2a2a2a',
    '#545454',
    '#7e7e7e',
    '#a8a8a8',
    '#d2d2d2',
    '#ffffff',
    '',
    '#ff4040',
    '#ff6518',
    '#ffbb3b',
    '#03bd9e',
    '#00a9ff',
    '#515ce6',
    '#9e5fff',
    '#ff5583'
];

Expected Behavior

There needs to be a way for for developers to pass through their own colour palette to replace this preset

var imageEditor = new tui.ImageEditor(
    "#tui-image-editor-container",
    {
        includeUI: {
            loadImage: {
                path: "img/sampleImage2.png",
                name: "SampleImage",
            },
            theme: blackTheme, // or whiteTheme
            initMenu: "filter",
            menuBarPosition: "bottom",
            colorPalette: ["#ffffff", "#3c3c3c", "#234252"]
        },
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        usageStatistics: false,
    }
);

[alma3rifa]

Please, when this coulour palette will be available, is there any solution to change the default color? how can i use to this code? strokeColorpicker: new _colorpicker2.default(_this.selector('#tie-color-stroke'), '#ffbb3b', _this.toggleDirection)

[marcodafonseca]

I created a PR for this long ago #482 but so far it's gone ignored by the library owners

[appdeveloperhw]

In React i changed the default color as /////////////////////////////////////////////// IMPORT ////////////////////////////////////////// import ImageEditor from '@toast-ui/react-image-editor'; ////////////////////////////////////////////// THEME OBJECT /////////////////////////////

const myTheme = {
    'common.bi.image': '',
    'common.bisize.width': '0',
    'common.bisize.height': '0',
    'common.backgroundImage': 'none',
    'common.backgroundColor': '#ffffff',
    'common.border': '0px',

    // header
    'header.backgroundImage': 'none',
    'header.backgroundColor': 'transparent',
    'header.border': '0px',

    // load button
    'loadButton.backgroundColor': '#fff',
    'loadButton.border': '1px solid #ddd',
    'loadButton.color': '#222',
    'loadButton.fontFamily': 'NotoSans, sans-serif',
    'loadButton.fontSize': '12px',

    // download button
    'downloadButton.backgroundColor': '#3ba26e',
    'downloadButton.border': '1px solid #3ba26e',
    'downloadButton.color': '#fff',
    'downloadButton.fontFamily': 'NotoSans, sans-serif',
    'downloadButton.fontSize': '12px',

    // icons default
    'menu.normalIcon.color': '#8a8a8a',
    'menu.activeIcon.color': '#555555',
    'menu.disabledIcon.color': '#434343',
    'menu.hoverIcon.color': '#e9e9e9',
    'submenu.normalIcon.color': '#8a8a8a',
    'submenu.activeIcon.color': '#e9e9e9',

    'menu.iconSize.width': '24px',
    'menu.iconSize.height': '24px',
    'submenu.iconSize.width': '32px',
    'submenu.iconSize.height': '32px',

    // submenu primary color
    'submenu.backgroundColor': '#ffffff',
    'submenu.partition.color': '#858585',

    // submenu labels
    'submenu.normalLabel.color': '#000',
    'submenu.normalLabel.fontWeight': 'bold',
    'submenu.activeLabel.color': '#000',
    'submenu.activeLabel.fontWeight': 'bold',

    // checkbox style
    'checkbox.border': '1px solid #ccc',
    'checkbox.backgroundColor': '#fff',

    // rango style
    'range.pointer.color': '#3ba26e',
    'range.bar.color': '#666',
    'range.subbar.color': '#d1d1d1',

    'range.disabledPointer.color': '#ddd',
    'range.disabledBar.color': '#ddd',
    'range.disabledSubbar.color': '#ddd',

    'range.value.color': '#fff',
    'range.value.fontWeight': 'lighter',
    'range.value.fontSize': '11px',
    'range.value.border': '1px solid #353535',
    'range.value.backgroundColor': '#151515',
    'range.title.color': '#fff',
    'range.title.fontWeight': 'lighter',

    // colorpicker style
    'colorpicker.button.border': '1px solid #1e1e1e',
    'colorpicker.title.color': '#fff'
};

////////////////////////////////////////////// COMPONENT /////////////////////////////

<ImageEditor
      includeUI={{
          theme: myTheme,
          uiSize: {
              width: '100%',
              height: '700px',
          }
      }}
  />

[devhemmy]

a workaround this, is to make use of the startDrawingMode method

so you can create your own color picker or use the tui color picker and then invoke the StartDrawingMode method using your own function, here is how I do it in Vue (Nuxt.js)

<MyColorPicker @colorPicked="startDrawing" />

<tui-image-editor ref="imageEditor">
</tui-image-editor>

startDrawing({ color, drawStyle, size }) {
      this.$refs.imageEditor.invoke('stopDrawingMode')
      this.$refs.imageEditor.invoke('startDrawingMode', drawStyle, {
        width: size,
        color,
      })
    }

drawStyle can be 'FREE_DRAWING' or 'LINE_DRAWING'

this code is in Vue (Nuxt.js) but I believe it is fairly similar it React