styling opt out?

[arnemileswinter]

Hello! Thanks for the lib, it works like a charm.

I'm trying to integrate the sketch-picker into a tailwind css project so the styling is so much different and it should support dark and light theme.

So what I did was fight against the styles that are already assigned styles like this:

@layer components {
    sketch-picker {
        @apply bg-neutral !important;
    }

    sketch-picker input {
        @apply input input-xs text-neutral-content !important;
    }
}

but that's obviously working against the library. so i am wondering if maybe one could somehow opt-out of the styling you provided? I am thinking perhaps a css class name that can be overwritten via an input, and the scss only applies to components of that class?

Something like:

// component.ts
SketchPickerComponent {
@Input('theme') theme = 'default'
}

// component.scss
sketch-picker-component.default {
...
}

And one could overwrite like this

<sketch-picker-component theme='myTheme'></sketch-picker-component>

and then have their custom sketch-picker-component.myTheme css rules

This should obviously not apply to the color-swatches and widgets, those should stay default. But rather the inputs and css-tables and such.

Then again, I am fairly new to angular and perhaps it is somehow possible to disable imported styles?
Let me know what you think!

[pIvan]

Hi @arnemileswinter,

It is recommended that Angular components be encapsulated and that ViewEncapsulation.Emulated is used as the default.
What I can suggest is that you may create your component using SketchPickerComponent as a base class, and implement @input binding in the same way as SketchPickerComponent, copy and edit the HTML and SCSS as you like.

@Component({
    selector: `my-sketch-picker`,
    template: `
<saturation-component [(color)]="control.value" />

<div class="controls">
    <div class="controls-row hue-alpha">
        <div class="column">
            <hue-component [(color)]="control.value" />
            @if (control.alphaChannelVisibilityChanges | async) {
                <alpha-component [(color)]="control.value" />
            }
        </div>
        <div class="column indicator-column">
            <indicator-component colorType="rgba" [color]="control.value" />
        </div>
    </div>
    <div class="controls-row presentation">
        <div class="column">
            <hex-input-component label [(color)]="control.value" />
        </div>
        <div class="column">
            <rgba-input-component [alpha]="control.alphaChannelVisibilityChanges | async" label [(color)]="control.value" />
        </div>
    </div>
</div>

@if (control.presetsVisibilityChanges | async) {
    <color-presets-component [(color)]="control.value" [colorPresets]="control.presets" />
}

`,
    style: `
       :host,
       :host ::ng-deep * {
           padding: 0;
           margin: 0;
           box-sizing: border-box;
       }

       ...
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [
        SaturationComponent,
        IndicatorComponent,
        HueComponent,
        AlphaComponent,
        HexComponent,
        RgbaComponent,
        ColorPresetsComponent,
        AsyncPipe
    ]
})
export class MySketchPickerComponent extends SketchPickerComponent {

    @Input()
    public color: string;

    @Input()
    public control: ColorPickerControl;

    @Output()
    public colorChange: EventEmitter<ColorString> = new EventEmitter(false);

    constructor(cdr: ChangeDetectorRef) {
       super(cdr);
    }

}

If you have any other ideas that don't involve @input binding, I'd like to keep the number of attributes in the HTML for certain components to a minimum.