프론트 개발자에게 눈은 생명이다.

올해와서야 깨달은 사실인데 왜 다크모드가 중요한지 알게 되었다.

현재 작업하고 있는 페이지는

Alice Blue라고 하는 모양인데,

저걸 하루종일 쳐다보면서 작업을 하다보니 퇴근하면 그냥 눈이 아파서 아무것도 못하는 지경에 이르렀다.

전처리를 하자.

번들링할 때 임시로라도 다크 테마를 만들기로 했다.

웹펙 기반 리액트를 만질 때에는, webpack.config.js에 webpack-preprocess-loader를 넣어서 특정 값을 바꿀수 있었는데, 바이트 기반인 지금은 어떤가??

아주 쉽게 찾을 수 있었는데,

export default defineConfig({
	plugins: [
		sveltekit(),
		{
			async transform(code, id) {
				if (id.endsWith('styles.css')) {
					const transformed =
						process.env.NODE_ENV === 'development' ? code.replace(/#F4F6FE/g, '#121212') : code;

						// textToWhite .replace(/#383D53/g, '#ffffff')
					return {
						code: transformed,
						map: null
					};
				}
			}
		}
	],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});

이런식으로 간단하게 할 수 있었다.