.excalidraw-cn-app {
	--color-gray-10: #f5f5f5;
    --color-gray-20: #ebebeb;
    --color-gray-30: #d6d6d6;
    --color-gray-40: #b8b8b8;
    --color-gray-50: #999999;
    --color-gray-60: #7a7a7a;
    --color-gray-70: #5c5c5c;
    --color-gray-80: #3d3d3d;
    --color-gray-85: #242424;
    --color-gray-90: #1e1e1e;
    --color-gray-100: #121212;

	&.theme-light {
		color-scheme: light;
		--highlight-mix-blend-mode: darken;
		--mono-rgb-0: 255, 255, 255;
		--mono-rgb-100: 0, 0, 0;
		--color-red-rgb: 233, 49, 71;
		--color-red: #e93147;
		--color-orange-rgb: 236, 117, 0;
		--color-orange: #ec7500;
		--color-yellow-rgb: 224, 172, 0;
		--color-yellow: #e0ac00;
		--color-green-rgb: 8, 185, 78;
		--color-green: #08b94e;
		--color-cyan-rgb: 0, 191, 188;
		--color-cyan: #00bfbc;
		--color-blue-rgb: 8, 109, 221;
		--color-blue: #086ddd;
		--color-purple-rgb: 120, 82, 238;
		--color-purple: #7852ee;
		--color-pink-rgb: 213, 57, 132;
		--color-pink: #d53984;
        --color-blue-light: #a5d8ff;
		--color-base-00: #ffffff;
		--color-base-05: #fcfcfc;
		--color-base-10: #fafafa;
		--color-base-20: #f6f6f6;
		--color-base-25: #e3e3e3;
		--color-base-30: #e0e0e0;
		--color-base-35: #d4d4d4;
		--color-base-40: #bdbdbd;
		--color-base-50: #ababab;
		--color-base-60: #707070;
		--color-base-70: #5a5a5a;
		--color-base-100: #222222;
		--color-accent-hsl: var(--accent-h),
			var(--accent-s),
			var(--accent-l);
		--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
		--color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%));
		--color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%));
		--background-secondary-alt: var(--color-base-05);
		--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
		--background-modifier-cover: rgba(220, 220, 220, 0.4);
		--input-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12),
			0 2px 3px 0 rgba(0, 0, 0, .05),
			0 1px 1.5px 0 rgba(0, 0, 0, .03),
			0 1px 2px 0 rgba(0, 0, 0, .04),
			0 0 0 0 transparent;
		--input-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.17),
			0 2px 3px 0 rgba(0, 0, 0, .1),
			0 1px 1.5px 0 rgba(0, 0, 0, .03),
			0 1px 2px 0 rgba(0, 0, 0, .04),
			0 0 0 0 transparent;
		--shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028),
			0px 3.4px 6.7px rgba(0, 0, 0, .042),
			0px 15px 30px rgba(0, 0, 0, .07);
		--shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071),
			0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
			0px 30px 90px rgba(0, 0, 0, 0.2);
		--interactive-normal: var(--color-base-00);
		--interactive-hover: var(--color-base-05);
        --text-normal: #333;
        --background-modifier-border-focus: var(--color-blue-light);
        --background: #fff;
	}

	&.theme-dark {
		color-scheme: dark;
		--highlight-mix-blend-mode: lighten;
		--mono-rgb-0: 0, 0, 0;
		--mono-rgb-100: 255, 255, 255;
		--color-red-rgb: 251, 70, 76;
		--color-red: #fb464c;
		--color-orange-rgb: 233, 151, 63;
		--color-orange: #e9973f;
		--color-yellow-rgb: 224, 222, 113;
		--color-yellow: #e0de71;
		--color-green-rgb: 68, 207, 110;
		--color-green: #44cf6e;
		--color-cyan-rgb: 83, 223, 221;
		--color-cyan: #53dfdd;
		--color-blue-rgb: 2, 122, 255;
		--color-blue: #027aff;
		--color-purple-rgb: 168, 130, 255;
		--color-purple: #a882ff;
		--color-pink-rgb: 250, 153, 205;
		--color-pink: #fa99cd;
		--color-base-00: #1e1e1e;
		--color-base-05: #212121;
		--color-base-10: #242424;
		--color-base-20: #262626;
		--color-base-25: #2a2a2a;
		--color-base-30: #363636;
		--color-base-35: #3f3f3f;
		--color-base-40: #555555;
		--color-base-50: #666666;
		--color-base-60: #999999;
		--color-base-70: #bababa;
		--color-base-100: #dadada;
		--color-accent-hsl: var(--accent-h),
			var(--accent-s),
			var(--accent-l);
		--color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
		--color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%));
		--color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%));
		--background-modifier-form-field: var(--color-base-25);
		--background-secondary-alt: var(--color-base-30);
		--interactive-normal: var(--color-base-30);
		--interactive-hover: var(--color-base-35);
		--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
		--background-modifier-cover: rgba(10, 10, 10, 0.4);
		--text-selection: hsla(var(--interactive-accent-hsl), 0.25);
		--input-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09),
			0 2px 4px 0 rgba(0, 0, 0, .15),
			0 1px 1.5px 0 rgba(0, 0, 0, .1),
			0 1px 2px 0 rgba(0, 0, 0, .2),
			0 0 0 0 transparent;
		--input-shadow-hover: inset 0 0.5px 1px 0.5px rgba(255, 255, 255, 0.16),
			0 2px 3px 0 rgba(0, 0, 0, .3),
			0 1px 1.5px 0 rgba(0, 0, 0, .2),
			0 1px 2px 0 rgba(0, 0, 0, .4),
			0 0 0 0 transparent;
		--shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121),
			0px 3.4px 6.7px rgba(0, 0, 0, 0.179),
			0px 15px 30px rgba(0, 0, 0, 0.3);
		--shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071),
			0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
			0px 30px 90px rgba(0, 0, 0, 0.2);
		--pdf-shadow: 0 0 0 1px var(--background-modifier-border);
		--pdf-thumbnail-shadow: 0 0 0 1px var(--background-modifier-border);
        --button-gray-1: #000;
        --background: #1e1e1e;
		--text-normal: var(--color-gray-40);
	}
}