How to use the tinycolor2.random function in tinycolor2
To help you get started, we’ve selected a few tinycolor2 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
thingsboard / thingsboard / ui / src / app / components / datasource-device.directive.js View on Github 
scope.showColorPicker = function (event, dataKey) {
$mdColorPicker.show({
value: dataKey.color,
defaultValue: '#fff',
random: tinycolor.random(),
clickOutsideToClose: false,
hasBackdrop: false,
skipHide: true,
preserveScope: false,
mdColorAlphaChannel: true,
mdColorSpectrum: true,
mdColorSliders: true,
mdColorGenericPalette: false,
mdColorMaterialPalette: true,
mdColorHistory: false,
mdColorDefaultTab: 2,
$event: event
}).then(function (color) {scope.showColorPicker = function (event, dataKey) {
$mdColorPicker.show({
value: dataKey.color,
defaultValue: '#fff',
random: tinycolor.random(),
clickOutsideToClose: false,
hasBackdrop: false,
multiple: true,
preserveScope: false,
mdColorAlphaChannel: true,
mdColorSpectrum: true,
mdColorSliders: true,
mdColorGenericPalette: false,
mdColorMaterialPalette: true,
mdColorHistory: false,
mdColorDefaultTab: 2,
$event: event
}).then(function (color) {export const generateComplementaryTheme = (color = null) => {
const newTheme = cloneDefault();
const seed = color === null ? tinycolor.random() : tinycolor(color);
const baseColor = seed.toRgb();
const lightColor = seed.lighten(5).toRgb();
const complementColor = createA11yColor(seed.complement().toRgb(), baseColor);
newTheme.colors.toolbar = baseColor;
newTheme.colors.toolbar_text = complementColor;
newTheme.colors.frame = lightColor;
newTheme.colors.tab_background_text = complementColor;
newTheme.colors.toolbar_field = lightColor;
newTheme.colors.toolbar_field_text = complementColor;
newTheme.colors.tab_line = complementColor;
newTheme.colors.popup = lightColor;
newTheme.colors.popup_text = complementColor;
return normalizeTheme(newTheme);
};export function getRandomColorHex() {
return formatHex(tinycolor.random());
}scope.showColorPicker = function (event, color) {
$mdColorPicker.show({
value: tinycolor(color).toRgbString(),
defaultValue: '#fff',
random: tinycolor.random(),
clickOutsideToClose: false,
hasBackdrop: false,
multiple: true,
preserveScope: false,
mdColorAlphaChannel: true,
mdColorSpectrum: true,
mdColorSliders: true,
mdColorGenericPalette: false,
mdColorMaterialPalette: true,
mdColorHistory: false,
mdColorDefaultTab: 2,
$event: event
}).then(function (color) {async createLabel(name: string, label: ILabelDefinition) {
this.logger.verbose.info(`Creating "${name}" label :\n${label.name}`);
const color = label.color
? tinyColor(label.color).toString('hex6')
: tinyColor.random().toString('hex6');
const result = await this.github.issues.createLabel({
name: label.name,
owner: this.options.owner,
repo: this.options.repo,
color: color.replace('#', ''),
description: label.description
});
this.logger.veryVerbose.info('Got response from createLabel\n', result);
this.logger.verbose.info('Created label on GitHub.');
return result;
}Object.keys(newTheme.colors).map(key => {
newTheme.colors[key] = tinycolor.random().toRgb();
});scope.showColorPicker = function (event, dataKey) {
$mdColorPicker.show({
value: dataKey.color,
defaultValue: '#fff',
random: tinycolor.random(),
clickOutsideToClose: false,
hasBackdrop: false,
multiple: true,
preserveScope: false,
mdColorAlphaChannel: true,
mdColorSpectrum: true,
mdColorSliders: true,
mdColorGenericPalette: false,
mdColorMaterialPalette: true,
mdColorHistory: false,
mdColorDefaultTab: 2,
$event: event
}).then(function (color) {async updateLabel(name: string, label: ILabelDefinition) {
this.logger.verbose.info(`Updating "${name}" label :\n${label.name}`);
const color = label.color
? tinyColor(label.color).toString('hex6')
: tinyColor.random().toString('hex6');
const result = await this.github.issues.updateLabel({
current_name: label.name,
name: label.name,
owner: this.options.owner,
repo: this.options.repo,
color: color.replace('#', ''),
description: label.description
});
this.logger.veryVerbose.info('Got response from updateLabel\n', result);
this.logger.verbose.info('Updated label on GitHub.');
return result;
}
