From a8046c93c33488587ad1719d16bc5a3c691a3aec Mon Sep 17 00:00:00 2001 From: falinsky Date: Sat, 30 Jan 2021 22:15:15 +0200 Subject: [PATCH 1/2] Make code snippets colors dimmer for dark theme enabled A possible solution for #342 --- packages/typescriptlang-org/src/components/layout/main.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/typescriptlang-org/src/components/layout/main.scss b/packages/typescriptlang-org/src/components/layout/main.scss index b3cf48cf814b..879c1f9ac0f3 100644 --- a/packages/typescriptlang-org/src/components/layout/main.scss +++ b/packages/typescriptlang-org/src/components/layout/main.scss @@ -152,3 +152,8 @@ html, display: flex; flex-direction: column; } + +.dark-theme pre { + mix-blend-mode: difference; + filter: invert(98%) hue-rotate(180deg); +} From 5751a924ea4f2d8a961607d76dee8ccf44968908 Mon Sep 17 00:00:00 2001 From: Orta Date: Sun, 31 Jan 2021 09:57:13 +0000 Subject: [PATCH 2/2] Tweak some of the dark mode colours --- packages/typescriptlang-org/src/components/layout/main.scss | 5 ----- .../typescriptlang-org/src/templates/markdown-twoslash.scss | 6 ++++++ 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/typescriptlang-org/src/components/layout/main.scss b/packages/typescriptlang-org/src/components/layout/main.scss index 879c1f9ac0f3..b3cf48cf814b 100644 --- a/packages/typescriptlang-org/src/components/layout/main.scss +++ b/packages/typescriptlang-org/src/components/layout/main.scss @@ -152,8 +152,3 @@ html, display: flex; flex-direction: column; } - -.dark-theme pre { - mix-blend-mode: difference; - filter: invert(98%) hue-rotate(180deg); -} diff --git a/packages/typescriptlang-org/src/templates/markdown-twoslash.scss b/packages/typescriptlang-org/src/templates/markdown-twoslash.scss index 55cdba44bc83..64f3139139d7 100644 --- a/packages/typescriptlang-org/src/templates/markdown-twoslash.scss +++ b/packages/typescriptlang-org/src/templates/markdown-twoslash.scss @@ -185,6 +185,12 @@ pre { } } +.dark-theme pre { + background-color: #d8d8d8; + border-color: #ddd; + filter: invert(98%) hue-rotate(180deg); +} + // Extracted from vscode // .monaco-editor .squiggly-warning { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23428226'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left; }