Chỉnh màu dấu tích trong <checkbox>

Q&A/Help/Bug Reports
,
#1

có cách nào chỉnh dấu tích thành màu đen không ạ, mặc định nó màu trằng
image

#2

hi @hieu_nguyen
Phần này tụi mình đang update, khi release tụi mình sẽ thông báo cho bạn trong thread này.
Trước mắt bạn có thể custom một checkbox như sau:

index.txml

<view
  class="custom-checkbox {{checked ? 'custom-checkbox--checked' : ''}} {{disabled ? 'custom-checkbox--disabled' : ''}}"
  catchTap="onChange">
  <view tiki:if="{{checked}}" class="t-icon">
    <icon type="success" color="#000" size="{{16}}" />
  </view>
</view>

index.js

Component({
  props: {
    checked: false,
    disabled: false,
    onChange: () => {},
  },
  didMount() {
    this._updateDataSet();
  },
  didUpdate() {
    this._updateDataSet();
  },
  methods: {
    _updateDataSet() {
      this.dataset = {};
      for (const key in this.props) {
        if (/data-/gi.test(key)) {
          this.dataset[key.replace(/data-/gi, '')] = this.props[key];
        }
      }
    },
    onChange(event) {
      const { checked, disabled } = this.props;
      if (disabled) return;

      const value = checked ? false : true;
      event.detail = { value };
      const _onChange = this.props.onChange;
      if (typeof _onChange === 'function') {
        event.target = { ...event.target, dataset: this.dataset };
        _onChange(event);
      }
    },
  },
});

index.tcss

/* Custom checkbox */

.custom-checkbox {
  --tf-checkbox-custom-color: #1a94ff;
  --background-selection-default: #f5f5fa;
  --border-selection-default: #dddde3;
  --background-selection-disable: #c4c4cf;
  --border-selection-disable: #ebebf0;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background-color: var(--background-selection-default);
  border: 1px solid;
  border-color: var(--border-selection-default);
  border-radius: 4px;
}

.custom-checkbox.custom-checkbox--checked {
  background-color: var(--tf-checkbox-custom-color);
  border-color: var(--tf-checkbox-custom-color);
}

.custom-checkbox.custom-checkbox--checked.custom-checkbox--disabled {
  background-color: var(--background-selection-disable);
}

.custom-checkbox.custom-checkbox--disabled {
  background-color: var(--background-selection-default);
  border-color: var(--border-selection-disable);
}

.custom-checkbox.custom-checkbox--disabled:hover {
  border-color: none;
}

.custom-checkbox .t-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.custom-checkbox .t-icon .success-icon {
  width: 16px;
  height: 16px;
}

index.json

{
  "component": true,
  "componentLifeCycleV2": "YES"
}