We have declared :root in spk-editor you can use your required color by replacing the value in root or if you want to change the primary value for only specific class(ex: spk-editor{--primary-color:#FF0000;})

:root {
	--spk-gapping: 0.5rem;
    --spk-lighttransparent: rgb(226, 226, 226, 0.2);
    --spk-borderColor: rgb(238, 238, 238);
    --spk-radius: 0.25rem;
    --spk-buttonHeight: 1.5rem;
    --spk-buttonWidth: 1.5rem;
    --spk-buttonMaxHeight: 3rem;
    --spk-buttonMaxWidth: 3rem;
    --spk-hoverColor: #ccc;
    --spk-activeColor: #fff;
    --spk-scrollbar-thumb-hover: #616161;
    --spk-scrollbar-track: #e0e0e0;
    --spk-scrollbar-thumb: #b1b1b1;
    --spk-scrollbar-width: 0.25rem;
    --spk-white: #fff;
    --spk-modal-color: rgb(255, 255, 255);
    --spk-modal-backdrop-color: rgb(0, 0, 0, 0.2);
    --spk-border-color: rgb(238, 238, 238);
    --spk-primary-color: rgb(71 66 243);
    --spk-theme-color: #fff;
    --spk-placeholdercolor: gray;
    --spk-default-color: #363636;
    --spk-primary-transparent: rgb(71, 66, 243, 0.1);
    --spk-text-color : #181818;
}

// To add the Styles for Dark theme

.dark.spk-editor{
    --spk-lighttransparent: rgb(226, 226, 226, 0.2);
	...
}

// Options of config
let editor = new Spk(document.querySelector('.spk-editor'), {
	apikey: 'Your API Key',
	exclude: {
		'texttype': ['strong', 'em', 'del', 'u', 'sub', 'sup', 'code', 'mark'],
		'textstyle': ['background-color', 'color'],
		'fontfamily': false,
		'fontsize': false,
		'headings' : false,
		'lineheight' : false,
		'alignment' : false,
		'list' : false,
		'link' : false,
		'hr' : false,
		'table' : false,
		'inc_indent' : false,
		'dec_indent' : false,
		'images' : false,
		'videos' : false,
		'reset' : false,
		'undo' : false,
		'redo' : false,
		'fullscreen' : false,
		'copyToClipboard' : false,
		'print': false,
		'export': false,
		'pre' : false
	},
	icons: {
		'texttype': [
			{ 'type': 'strong', 'icon': 'Bold' },
			{ 'type': 'em', 'icon': 'Italic' },
			{ 'type': 'del', 'icon': 'Strike' },
			{ 'type': 'u', 'icon': 'Underline' },
			{ 'type': 'code', 'icon': 'Code' },
			{ 'type': 'sub', 'icon': 'Sub' },
			{ 'type': 'sup', 'icon': 'Sup' },
			{ 'type': 'mark', 'icon': 'Mark' },
		],
		'fontfamily': { 'icon': 'Fontfamily' },
		'fontsize': { 'icon': 'Fontsize' },
		'headings': { 'icon': 'check' },
		'lineheight': { 'icon': 'Lineheight' },
		'images': { 'icon': 'Img' },
		'table': { 'icon': 'Table' },
		'inc_indent': { 'icon': 'inc' },
		'dec_indent': { 'icon': 'dec' },
		'link': { 'icon': 'A' },
		'videos': { 'icon': 'Video' },
		'hr': { 'icon': 'Hr' },
		'alignment': { 'icon': 'Alignment' },
		'list': [
			{ 'type': 'ol', 'icon': 'Ol' }, 
			{ 'type': 'ul', 'icon': 'UL' }, 
		],
		'undo': { 'icon': 'undo' },
		'redo': { 'icon': 'redo' },
		'reset': { 'icon': 'Reset' },
		'fullscreen': { 'icon': 'fullscreen' },
		'copyToClipboard': { 'icon': 'copyToClipboard' },
		'print':  { 'icon': 'print' },
		'export':  { 'icon': 'export' },
		'pre': { 'icon': 'Pre' }
	},
	dropdown: {
		'headings': ['p', 'h1'],
		'lineheight': [
			{ 'value': '4', 'buttonclass': '4' },
			{ 'value': '5', 'buttonclass': '5' },
			{ 'value': '6', 'buttonclass': '6' }
		],
		'fontfamily': [
			{ 'name': 'hh', 'value': "'hh', sans-serif", 'buttonclass': 'Poppins' },
			{ 'name': 'gg', 'value': "'gg', sans-serif", 'buttonclass': 'Agdasima' },
			{ 'name': 'Fasthand', 'value': "'Fasthand', cursive", 'buttonclass': 'Fasthand' },
		],
		'fontsize': [1, 2, 3, 4, 5],
		'alignment': ['left', 'right'],
		'list':['ul']
	},
	placeholderText : 'Hi hel',
	customClass : 'Custom',
	dark : true,
	rtl : "ltr",
});

editor.updateValue("test");
editor.sanitizeHTML("test sanitizeHTML"); // Used to extract this tags ['script', 'link', 'eval']
editor.haveCursorAtStart();
editor.haveCursorAtEnd();

You can simply include the array by excluding that option

	let editor2 = new Spk(document.querySelector('.spk-editor'), {
		apikey: 'Your API Key',
		exclude: {
			'texttype': ['strong', 'em'],
			'textstyle': ['background-color', 'color'],
			'export': false,
			'pre' : false
		},
		icons: {
				'texttype': [
					{ 'type': 'strong', 'icon': 'Bold' },
					{ 'type': 'em', 'icon': 'Italic' },
				],
				'fontfamily': { 'icon': 'Fontfamily' },
				'fontsize': { 'icon': 'Fontsize' },
				'headings': { 'icon': 'check' },
		},
		dropdown: {
			'alignment': ['left', 'right'],
			'list':['ul']
		},
		placeholderText : 'Hi hel',
		customClass : 'Custom',
		dark : true,
		rtl : "ltr",
	});
	

By using this above code for tools you will have only BOLD, ITALIC, UNDERLINE, STRIKE. align contains LEFT, RIGHT, CENTER. typo contains HEADING, HR, P, Quotes. Attachment contains IMG, VIDEO, Ref cntains nothing.

We can create Spk ediotr by using below command

	//TS
    <textarea class="spk-editor"></textarea>
	// JS
let editor = new Spk(document.querySelector('tagName/classeName/ID'))

We can destroy Spk ediotr by using below command

	let editor = new Spk(document.querySelector('tagName/classeName/ID'))
	we can destroy and recreate the editor by using editor variable.
	// To Destory
	editor.destroyEditor();
	// To Re-create
	editor.createEditor();

To change Placeholder text

	let editor = new Spk(document.querySelector('tagName/classeName/ID'), {
		apikey: 'Your API Key',
		placeholderText : "New Placeholder"
	});

let editor = new Spk(document.querySelector('tagName/classeName/ID'), {
	rtl : "rtl"
});

Just simply add dir="rtl" in html tag to change the direction of editor.

let editor2 = new Spk(document.querySelector('.spk-editor')
const handleCustomEvent = function(...arg) {
	console.log("new button clicked", arg);
};
editor2.addButton('Trigger Custom Event1', 'customEvent1', ()=>handleCustomEvent("test", "test2"), 'className');
editor2.addButton('Trigger Custom Event2', 'customEvent2', ()=>handleCustomEvent("1test", "1test2"), 'className');

let editor2 = new Spk(document.querySelector('.spk-editor')
	//Pre Defined methods debounce and throttleFunction
editor2.on('keyup', editor2.debounce(function(){console.log('debouce okay')}, 1000))
editor2.on('keyup', editor2.throttleFunction(function(){console.log('throttle okay')}, 1000))
	// Can also add the custom functions to the editor
editor2.on('blur', function() {console.log('blur the editor!');})

Instead of using bold(b) we used strong tag

Instead of using italic(i) we used em tag

Instead of using strike(strike) we used s tag