How to change the default theme of toast ui image editor?

naveenkumarmark commented 4 years ago

Version

"@toast-ui/vue-image-editor": "^1.0.2"

Development Environment

Chrome Version 76.0, Windows 10

Current Behavior

The Default theme is in black color

<div id="app" class="imageEditorApp ml-5">
    <image-editor ref="tuiImageEditor" id="tuiImageEditorUI"
          v-if="options.includeUI.loadImage.path"
          :include-ui="useDefaultUI"
          :options="options"
      ></image-editor>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.3/tui-color-picker.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script>
import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '@toast-ui/vue-image-editor/src/ImageEditor.vue'
export default {
  name: 'ToastUI',
  components: {
    'image-editor': ImageEditor
  },
  data () {
    const icona = require('tui-image-editor/dist/svg/icon-a.svg')
    const iconb = require('tui-image-editor/dist/svg/icon-b.svg')
    const iconc = require('tui-image-editor/dist/svg/icon-c.svg')
    const icond = require('tui-image-editor/dist/svg/icon-d.svg')
    var whiteTheme = {
      'menu.normalIcon.path': icond,
      'menu.activeIcon.path': iconb,
      'menu.disabledIcon.path': icona,
      'menu.hoverIcon.path': iconc,
      'submenu.normalIcon.path': icond,
      'submenu.activeIcon.path': iconb
    }
    return {
      useDefaultUI: true,
      options: {
        includeUI: {
          loadImage: {
            path: '', 
            name: ''
         },
          theme: whiteTheme,
          initMenu: '',
          menuBarPosition: 'bottom',
          menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask'], //, 'filter',
        },
        cssMaxWidth: document.documentElement.clientWidth,
        cssMaxHeight: document.documentElement.clientHeight,
        selectionStyle: {
          cornerSize: 20,
          rotatingPointOffset: 70
        }
      }
    }
  },

Expected Behavior

How to change the default theme to white theme?

naveenkumarmark commented 4 years ago

This worked like a charm!

 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
 'common.bisize.width': '251px',
 'Common. bisize. height': '21px',
 'common.backgroundImage': './img/bg.png',
 'common.backgroundColor': '#fff',
  'common.border': '1px solid #c1c1c1',

ilyaskarim commented 4 years ago

This worked like a charm!

 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
 'common.bisize.width': '251px',
 'Common. bisize. height': '21px',
 'common.backgroundImage': './img/bg.png',
 'common.backgroundColor': '#fff',
  'common.border': '1px solid #c1c1c1',

Can you fix your spaces, While using spaces it shows error, Correct one:

'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', 'common.bisize.width': '251px', 'Common.bisize.height': '21px', 'common.backgroundImage': './img/bg.png', 'common.backgroundColor': '#fff', 'common.border': '1px solid #c1c1c1',

UlloaDP commented 3 years ago

Where do you put those configurations?

swtalk commented 3 years ago

Dooray! 메일 발송 실패 안내

메일 발송 실패 안내

박시우(viewrain@nhn.com) 님께 보낸 메일이 전송되지 못하였습니다.

      실패 사유를 확인해보세요.

        * 받는 사람 :

박시우(viewrain@nhn.com)

        * 발송 시간 :

2020-09-30T00:23:35

        * 메일 제목 :

Re: [nhn/toast-ui.vue-image-editor] How to change the default theme of toast ui image editor? (#24)

            * 실패 사유 :

받는 사람이 회원님의 메일을 수신차단 하였습니다.

      이 메일은 발신전용으로 회신되지 않습니다.
      더 궁금하신 사항은
      dooray@nhn.com
      으로 문의해 주시기 바랍니다.

    © Dooray!.

nhn / toast-ui.vue-image-editor