Можно попробовать так :)

const theme = document.querySelector(':root');
const btns = document.querySelectorAll('.colors');

setColor('color', '#fff');

	function setColor(color, value) {
		if (localStorage.getItem(color)) {
			theme.style.setProperty("--color", `${localStorage.getItem(color)}`);
		} else {
			theme.style.setProperty("--color", value);
			localStorage.setItem('color', value);
		}
	}

	function getColor(color) {
		theme.style.setProperty("--color", color);
		localStorage.setItem('color', color);
	}
	
	btns.forEach(function(btn){
	
		btn.addEventListener("click", function(e){
	
			const color = e.currentTarget.classList;
	
			if(color.contains("green")){
				getColor('#47A846');
			}

			else if(color.contains("grey")){
				getColor('#6C757D');
			}
			else{
				getColor('#F26B38');
			}
		});
	});

Вот пример с цветом на body:

В твоем случае, JS просто передает строку в CSS "33%". Для JS - это просто текст, не иначе.
При сложении, ты просто получишь "33%33%", т.к. сложил две строки.

Уверен, что это можно решить как-то еще правильнее, но вот так можно реализовать увеличение при клике, на 33% от ширины родителя.