diff --git a/idea/MkDisableSection.vue b/idea/MkDisableSection.vue
index 568241e68f86..642ccf130755 100644
--- a/idea/MkDisableSection.vue
+++ b/idea/MkDisableSection.vue
@@ -39,11 +39,6 @@ defineProps<{
 		transparent 0px 10px,
 		var(--c) 6px 16px
 	);
-	--c: color(from var(--MI_THEME-error) srgb r g b / 0.25);
-
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset;
-	}
+	--c: rgb(from var(--MI_THEME-error) r g b / 0.25);
 }
 </style>
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 0b410c7bbb30..65d7f5a5e1ee 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -31,14 +31,6 @@ import { preventLongPressContextMenu } from '@/scripts/tms/prevent-longpress-con
 export async function common(createVue: () => App<Element>) {
 	console.info(`taiyme v${version}`);
 
-	//#region Detect WebKit engine
-	const ua = navigator.userAgent;
-	const isWebkitEngine = ua.includes('AppleWebKit') && !(ua.includes('Chrome') || ua.includes('Chromium'));
-	if (isWebkitEngine) {
-		document.documentElement.dataset.browserEngine = 'webkit';
-	}
-	//#endregion
-
 	if (_DEV_) {
 		console.warn('Development mode!!!');
 
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 39a87a34098c..6da65f5c6cc2 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -172,11 +172,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: var(--MI_THEME-accent);
 
 		&:not(:disabled):hover {
-			background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5)));
 		}
 
 		&:not(:disabled):active {
-			background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
+			background: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5)));
 		}
 	}
 
@@ -221,11 +221,11 @@ function onMousedown(evt: MouseEvent): void {
 		background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 
 		&:not(:disabled):hover {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 
 		&:not(:disabled):active {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 	}
 
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index 99580df5e25c..0676b94e14f4 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -117,7 +117,7 @@ const bannerStyle = computed(() => {
 			left: 0;
 			width: 100%;
 			height: 64px;
-			background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+			background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 		}
 
 		> .name {
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 01ca57bf8f2d..69d2200bc349 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -231,7 +231,7 @@ onUnmounted(() => {
 	left: 0;
 	width: 100%;
 	height: 64px; // .omitted
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showMoreFade {
diff --git a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
index ee89395c3566..b40671488220 100644
--- a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
+++ b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
@@ -94,11 +94,6 @@ const cancel = () => {
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);
diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
index 3c14298535e7..ddd8401b9399 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -267,11 +267,6 @@ export default defineComponent({
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);
diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
index eea97f9d00aa..7b30178a774f 100644
--- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
+++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@@ -313,11 +313,6 @@ onUnmounted(() => {
 		transparent 0px 10px,
 		var(--MI_THEME-panel) 6px 16px
 	);
-
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
 }
 
 .embedCodeGenPreviewWrapper {
diff --git a/packages/frontend/src/components/MkFlashPreview.vue b/packages/frontend/src/components/MkFlashPreview.vue
index 6ec0765ec70e..f2b6c0d777bf 100644
--- a/packages/frontend/src/components/MkFlashPreview.vue
+++ b/packages/frontend/src/components/MkFlashPreview.vue
@@ -96,11 +96,6 @@ const props = defineProps<{
 			transparent 0px 10px,
 			var(--MI_THEME-bg) 6px 16px
 		);
-
-		// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-		html[data-browser-engine=webkit] & {
-			background-image: unset !important;
-		}
 	}
 
 	@media (max-width: 700px) {
diff --git a/packages/frontend/src/components/MkFoldableSection.vue b/packages/frontend/src/components/MkFoldableSection.vue
index 17feaab1aa62..8e09fa84bd54 100644
--- a/packages/frontend/src/components/MkFoldableSection.vue
+++ b/packages/frontend/src/components/MkFoldableSection.vue
@@ -111,7 +111,7 @@ onMounted(() => {
 	top: var(--MI-stickyTop, 0px);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
-	background-color: color(from v-bind("parentBg ?? 'var(--MI_THEME-bg)'") srgb r g b / 0.85);
+	background-color: rgb(from v-bind("parentBg ?? 'var(--MI_THEME-bg)'") r g b / 0.85);
 }
 
 .title {
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index d75723d1a190..2f2ba0b4be1b 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -235,10 +235,5 @@ onMounted(() => {
 		transparent 0px 10px,
 		var(--MI_THEME-panel) 6px 16px
 	);
-
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
 }
 </style>
diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue
index 4f78dc28afd5..d44a2a41db8d 100644
--- a/packages/frontend/src/components/MkInstanceCardMini.vue
+++ b/packages/frontend/src/components/MkInstanceCardMini.vue
@@ -81,47 +81,42 @@ $bodyInfoHieght: 16px;
 			transparent 0px 10px,
 			var(--c) 6px 16px
 		);
-
-		// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-		html[data-browser-engine=webkit] & {
-			background-image: unset !important;
-		}
 	}
 
 	&,
 	html[data-color-scheme=light] & {
 		&.isNotResponding {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), orange 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #ffa500 12.5%, var(--MI_THEME-panel));
 		}
 
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #0000ff 12.5%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), black 15%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-panel));
 		}
 
 		&.isBlocked {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), red 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #ff0000 12.5%, var(--MI_THEME-panel));
 		}
 	}
 
 	html[data-color-scheme=dark] & {
 		&.isNotResponding {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), orange 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ffa500 25%, var(--MI_THEME-panel));
 		}
 
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #0000ff 25%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), white 15%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-panel));
 		}
 
 		&.isBlocked {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), red 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ff0000 25%, var(--MI_THEME-panel));
 		}
 	}
 }
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
index 0849e7d15fdb..5a687d2fd3e4 100644
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -219,18 +219,13 @@ const showImageMenu = (ev: MouseEvent) => {
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), black 15%) srgb r g b / 0.25);
+		--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-bg));
 	}
 
 	html[data-color-scheme=dark] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), white 15%) srgb r g b / 0.5);
+		--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-bg));
 	}
 }
 
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
index 02f8203fe5ff..bc411547d87d 100644
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -537,18 +537,13 @@ onDeactivated(() => {
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), black 15%) srgb r g b / 0.25);
+		--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-bg));
 	}
 
 	html[data-color-scheme=dark] & {
-		--c: color(from color-mix(in srgb, var(--MI_THEME-bg), white 15%) srgb r g b / 0.5);
+		--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-bg));
 	}
 }
 
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index 77cb4ac40790..2979dfda5459 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -72,11 +72,11 @@ const avatarUrlRef = computed(() => {
 	padding: 4px 8px 4px 4px;
 	border-radius: 999px;
 	color: var(--MI_THEME-mention);
-	background: color(from var(--MI_THEME-mention) srgb r g b / 0.1);
+	background: rgb(from var(--MI_THEME-mention) r g b / 0.1);
 
 	&.isMe {
 		color: var(--MI_THEME-mentionMe);
-		background: color(from var(--MI_THEME-mentionMe) srgb r g b / 0.1);
+		background: rgb(from var(--MI_THEME-mentionMe) r g b / 0.1);
 	}
 }
 
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index d665552527ee..38fcafbbd470 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -831,7 +831,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	left: 0;
 	width: 100%;
 	height: 64px; // .contentCollapsed
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showLessFade {
diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue
index 8a0be5927f8d..c751dab3dbaf 100644
--- a/packages/frontend/src/components/MkOmit.vue
+++ b/packages/frontend/src/components/MkOmit.vue
@@ -87,7 +87,7 @@ onUnmounted(() => {
 	left: 0;
 	width: 100%;
 	height: 64px; // .omitted
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showLessFade {
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index b000a1010130..1ba671ebe36a 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1147,13 +1147,13 @@ defineExpose({
 
 	&:not(:disabled):hover {
 		> .submitInner {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 	}
 
 	&:not(:disabled):active {
 		> .submitInner {
-			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 		}
 	}
 }
@@ -1227,11 +1227,6 @@ defineExpose({
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 687c690ee6bb..9932e08c91c8 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -67,7 +67,7 @@ const collapsed = ref(isLong);
 	left: 0;
 	width: 100%;
 	height: 64px; // .collapsed
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .showLessFade {
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
index 404cbae275eb..e20bc376ec02 100644
--- a/packages/frontend/src/components/MkUserCardMini.vue
+++ b/packages/frontend/src/components/MkUserCardMini.vue
@@ -77,31 +77,26 @@ $bodyInfoHieght: 16px;
 			transparent 0px 10px,
 			var(--c) 6px 16px
 		);
-
-		// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-		html[data-browser-engine=webkit] & {
-			background-image: unset !important;
-		}
 	}
 
 	&,
 	html[data-color-scheme=light] & {
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #0000ff 12.5%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), black 15%) srgb r g b / 0.25);
+			--c: color-mix(in srgb, #000000 3.75%, var(--MI_THEME-panel));
 		}
 	}
 
 	html[data-color-scheme=dark] & {
 		&.isSilenced {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), blue 50%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #0000ff 25%, var(--MI_THEME-panel));
 		}
 
 		&.isSuspended {
-			--c: color(from color-mix(in srgb, var(--MI_THEME-panel), white 15%) srgb r g b / 0.5);
+			--c: color-mix(in srgb, #ffffff 7.5%, var(--MI_THEME-panel));
 		}
 	}
 }
diff --git a/packages/frontend/src/components/TmsInstanceTicker.vue b/packages/frontend/src/components/TmsInstanceTicker.vue
index 32ca01f594f6..41ade1fc464c 100644
--- a/packages/frontend/src/components/TmsInstanceTicker.vue
+++ b/packages/frontend/src/components/TmsInstanceTicker.vue
@@ -134,8 +134,8 @@ const tickerStateRef = computed(() => getTickerState(props));
 	background: linear-gradient(
 		var(--ticker-bg-deg),
 		rgba(0, 0, 0, 0) calc(100% - 3em),
-		color(from var(--ticker-bg, #777) srgb r g b / 0.35) calc(100% - 3em),
-		color(from var(--ticker-bg, #777) srgb r g b / 0.35) 100%
+		rgb(from var(--ticker-bg, #777) r g b / 0.35) calc(100% - 3em),
+		rgb(from var(--ticker-bg, #777) r g b / 0.35) 100%
 	);
 	color: #fff;
 	text-shadow: /* 0.866 ≈ sin(60deg) */
diff --git a/packages/frontend/src/components/global/MkFooterSpacer.vue b/packages/frontend/src/components/global/MkFooterSpacer.vue
index cd663621fa9c..bc3ad2513b1b 100644
--- a/packages/frontend/src/components/global/MkFooterSpacer.vue
+++ b/packages/frontend/src/components/global/MkFooterSpacer.vue
@@ -20,11 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		var(--c) 6px 16px
 	);
 
-	// NOTE: iOS/iPadOS環境でクラッシュする https://github.com/taiyme/misskey/issues/293
-	html[data-browser-engine=webkit] & {
-		background-image: unset !important;
-	}
-
 	&,
 	html[data-color-scheme=light] & {
 		--c: rgb(0 0 0 / 0.02);
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 16b60ee6652e..bbf62f812acb 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -141,7 +141,7 @@ onUnmounted(() => {
 	backdrop-filter: var(--MI-blur, blur(15px));
 	border-bottom: solid 0.5px var(--MI_THEME-divider);
 	width: 100%;
-	background: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
+	background: rgb(from var(--MI_THEME-bg) r g b / 0.85);
 }
 
 .upper,
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 96661517ce43..f6b21bfe5a8a 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -310,7 +310,7 @@ definePageMetadata(() => ({
 	left: 0;
 	width: 100%;
 	height: 64px;
-	background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+	background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 }
 
 .bannerStatus {
diff --git a/packages/frontend/src/pages/welcome.timeline.note.vue b/packages/frontend/src/pages/welcome.timeline.note.vue
index 8fb84fd58ff3..7af7c65084cf 100644
--- a/packages/frontend/src/pages/welcome.timeline.note.vue
+++ b/packages/frontend/src/pages/welcome.timeline.note.vue
@@ -84,7 +84,7 @@ onUpdated(() => {
 		left: 0;
 		width: 100%;
 		height: 64px;
-		background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
+		background: linear-gradient(0deg, var(--MI_THEME-panel), rgb(from var(--MI_THEME-panel) r g b / 0));
 	}
 }
 
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 5f5116be5b46..bf42969ad258 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -12,6 +12,10 @@
 
 	--MI-margin: var(--MI-marginFull);
 
+	--TMS-hsl-base-h: 1;
+	--TMS-hsl-base-s: 1;
+	--TMS-hsl-base-l: 1;
+
 	// switch dynamically
 	--MI-minBottomSpacingMobile: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
 	--MI-minBottomSpacing: var(--MI-minBottomSpacingMobile);
@@ -19,6 +23,18 @@
 	@media (max-width: 500px) {
 		--MI-margin: var(--MI-marginHalf);
 	}
+
+	@supports (color: hsl(from #fff calc(h + 1deg) s l)) {
+		--TMS-hsl-base-h: 1deg;
+	}
+
+	@supports (color: hsl(from #fff h calc(s + 1%) l)) {
+		--TMS-hsl-base-s: 1%;
+	}
+
+	@supports (color: hsl(from #fff h s calc(l + 1%))) {
+		--TMS-hsl-base-l: 1%;
+	}
 }
 
 ::selection {
@@ -245,11 +261,11 @@ rt {
 	background: var(--MI_THEME-accent);
 
 	&:not(:disabled):hover {
-		background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
+		background: hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5)));
 	}
 
 	&:not(:disabled):active {
-		background: hsl(from var(--MI_THEME-accent) h s calc(l - 5));
+		background: hsl(from var(--MI_THEME-accent) h s calc(l - (var(--TMS-hsl-base-l) * 5)));
 	}
 }
 
@@ -259,11 +275,11 @@ rt {
 	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 
 	&:not(:disabled):hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 
 	&:not(:disabled):active {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 }
 
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index ea1f662549a2..53a88fff57d7 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -75,7 +75,7 @@ function more() {
 
 <style lang="scss" module>
 .root {
-	--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
+	--nav-bg-transparent: rgb(from var(--MI_THEME-navBg) r g b / 0.5);
 
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 97d022b485ff..26362eea436b 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -104,7 +104,7 @@ function more(ev: MouseEvent) {
 .root {
 	--nav-width: 250px;
 	--nav-icon-only-width: 80px;
-	--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
+	--nav-bg-transparent: rgb(from var(--MI_THEME-navBg) r g b / 0.5);
 
 	flex: 0 0 var(--nav-width);
 	width: var(--nav-width);
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 48687ed5d8f4..98dfe1e3b311 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -456,7 +456,7 @@ body {
 	}
 
 	&:active {
-		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
+		background: hsl(from var(--MI_THEME-panel) h s calc(l - (var(--TMS-hsl-base-l) * 2)));
 	}
 }
 
@@ -466,11 +466,11 @@ body {
 	color: var(--MI_THEME-fgOnAccent);
 
 	&:hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 
 	&:active {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 }
 
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 35f09d24cf95..014cddd07aca 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -428,7 +428,7 @@ $widgets-hide-threshold: 1090px;
 	}
 
 	&:active {
-		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
+		background: hsl(from var(--MI_THEME-panel) h s calc(l - (var(--TMS-hsl-base-l) * 2)));
 	}
 }
 
@@ -438,11 +438,11 @@ $widgets-hide-threshold: 1090px;
 	color: var(--MI_THEME-fgOnAccent);
 
 	&:hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 
 	&:active {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))), hsl(from var(--MI_THEME-accent) h s calc(l + (var(--TMS-hsl-base-l) * 5))));
 	}
 }