Open marcodafonseca opened 3 years ago
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)
I created a PR for this long ago #482 but so far it's gone ignored by the library owners
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',
}
}}
/>
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
Version
3.10.0
Development Environment
Chrome, IE, Mozilla, etc...
Current Behavior
Presently the default colour palette in the colour chooser cannot be changed
Expected Behavior
There needs to be a way for for developers to pass through their own colour palette to replace this preset