<commit_before>import Vue from 'vue';
import Axios from 'axios';
import { Component, Prop, Watch } from 'vue-property-decorator';

import { ThemeState, ThemeStore } from '../theme.store';
import { CreateElement } from 'vue/types/vue';
import { parseToHsl, lighten, darken } from 'polished';

@Component({})
export class AppThemeSvg extends Vue {
	@Prop(String) src: string;

	@ThemeState theme: ThemeStore['theme'];

	rawSvg = '';
	request: Promise<any>;

	get processedSvg() {
		let svgData = this.rawSvg;

		if (this.theme) {
			let highlight = '#' + this.theme.highlight;
			let backlight = '#' + this.theme.backlight;
			let notice = '#' + this.theme.notice;

			if (this.theme.custom) {
				const highlight_ = '#' + this.theme.highlight_;
				const hsl = parseToHsl(highlight_);
				if (hsl.lightness < 0.4) {
					highlight = lighten(0.3, highlight_);
					backlight = highlight_;
				} else {
					highlight = highlight_;
					backlight = darken(0.3, highlight_);
				}
			}

			svgData = svgData
				.replace('#ccff00', highlight)
				.replace('#cf0', highlight)
				.replace('#2f7f6f', backlight)
				.replace('#ff3fac', notice);
		}

		return 'data:image/svg+xml;utf8,' + encodeURIComponent(svgData);
	}

	@Watch('src', { immediate: true })
	onSrcChange() {
		const request = Axios.get(this.src).then(response => {
			// If we have multiple requests in process, only handle the latest one.
			if (this.request !== request) {
				return;
			}

			if (response.status === 200) {
				this.rawSvg = response.data;
			}
		});

		this.request = request;
	}

	render(h: CreateElement) {
		return h('img', { domProps: { src: this.processedSvg } });
	}
}
<commit_msg>Fix up theme-svg component to replace globally. Also better support for pink/blue color replacement.<commit_after>import Vue from 'vue';
import Axios from 'axios';
import { Component, Prop, Watch } from 'vue-property-decorator';

import { ThemeState, ThemeStore } from '../theme.store';
import { CreateElement } from 'vue/types/vue';
import { parseToHsl, lighten, darken } from 'polished';

@Component({})
export class AppThemeSvg extends Vue {
	@Prop(String) src: string;

	@ThemeState theme: ThemeStore['theme'];

	rawSvg = '';
	request: Promise<any>;

	get processedSvg() {
		let svgData = this.rawSvg;

		if (this.theme) {
			let highlight = '#' + this.theme.highlight;
			let backlight = '#' + this.theme.backlight;
			let notice = '#' + this.theme.notice;

			if (this.theme.custom) {
				const highlight_ = '#' + this.theme.highlight_;
				const hsl = parseToHsl(highlight_);
				if (hsl.lightness < 0.4) {
					highlight = lighten(0.3, highlight_);
					backlight = highlight_;
				} else {
					highlight = highlight_;
					backlight = darken(0.3, highlight_);
				}
				notice = highlight;
			}

			svgData = svgData
				.replace(/\#ccff00/gi, highlight)
				.replace(/\#cf0/gi, highlight)
				.replace(/\#2f7f6f/gi, backlight)
				.replace(/\#ff3fac/gi, notice)
				.replace(/\#31d6ff/gi, backlight);
		}

		return 'data:image/svg+xml;utf8,' + encodeURIComponent(svgData);
	}

	@Watch('src', { immediate: true })
	onSrcChange() {
		const request = Axios.get(this.src).then(response => {
			// If we have multiple requests in process, only handle the latest one.
			if (this.request !== request) {
				return;
			}

			if (response.status === 200) {
				this.rawSvg = response.data;
			}
		});

		this.request = request;
	}

	render(h: CreateElement) {
		return h('img', { domProps: { src: this.processedSvg } });
	}
}

{'fraction_non_alphanumeric': 0.154418072633686, 'fraction_numerical': 0.010580497569345154, 'mean_word_length': 3.3779724655819776, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6408586', 'n_tokens_mistral': 1386, 'n_tokens_neox': 1183, 'n_words': 281}