From 0f17623398a928d51493d0ea97b2ebc823375377 Mon Sep 17 00:00:00 2001 From: Cheng-Hsuan Tsai Date: Fri, 15 Aug 2025 00:20:24 +0000 Subject: [PATCH] docs(docs-infra): add dark mode to example preview (#63171) PR Close #63171 --- .../viewers/example-viewer/example-viewer.component.scss | 6 ++++-- .../animations/src/app/enter-and-leave/enter-binding.css | 1 - .../examples/animations/src/app/enter-and-leave/enter.css | 1 - .../animations/src/app/enter-and-leave/leave-binding.css | 1 - .../animations/src/app/enter-and-leave/leave-event.css | 1 - .../examples/animations/src/app/enter-and-leave/leave.css | 1 - .../animations/src/app/native-css/insert.component.css | 1 - .../animations/src/app/native-css/remove.component.css | 1 - 8 files changed, 4 insertions(+), 9 deletions(-) diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.scss b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.scss index 4d572e96c4a..f5054b4c819 100644 --- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.scss +++ b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.scss @@ -1,10 +1,12 @@ :host { .docs-example-viewer-preview { .docs-dark-mode & { - background: var(--gray-100); + color: var(--primary-contrast); + background: var(--gray-900); } @media screen and (prefers-color-scheme: dark) { - background: var(--gray-100); + color: var(--primary-contrast); + background: var(--gray-900); } .docs-light-mode & { background: var(--page-background); diff --git a/adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css b/adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css index 65956f83b6f..e81f46336de 100644 --- a/adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css +++ b/adev/src/content/examples/animations/src/app/enter-and-leave/enter-binding.css @@ -7,7 +7,6 @@ border: 1px solid #dddddd; margin-top: 1em; padding: 20px 20px 0px 20px; - color: #000000; font-weight: bold; font-size: 20px; } diff --git a/adev/src/content/examples/animations/src/app/enter-and-leave/enter.css b/adev/src/content/examples/animations/src/app/enter-and-leave/enter.css index 65956f83b6f..e81f46336de 100644 --- a/adev/src/content/examples/animations/src/app/enter-and-leave/enter.css +++ b/adev/src/content/examples/animations/src/app/enter-and-leave/enter.css @@ -7,7 +7,6 @@ border: 1px solid #dddddd; margin-top: 1em; padding: 20px 20px 0px 20px; - color: #000000; font-weight: bold; font-size: 20px; } diff --git a/adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css b/adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css index f55177838da..021296c96f9 100644 --- a/adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css +++ b/adev/src/content/examples/animations/src/app/enter-and-leave/leave-binding.css @@ -7,7 +7,6 @@ border: 1px solid #dddddd; margin-top: 1em; padding: 20px 20px 0px 20px; - color: #000000; font-weight: bold; font-size: 20px; opacity: 1; diff --git a/adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css b/adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css index f55177838da..021296c96f9 100644 --- a/adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css +++ b/adev/src/content/examples/animations/src/app/enter-and-leave/leave-event.css @@ -7,7 +7,6 @@ border: 1px solid #dddddd; margin-top: 1em; padding: 20px 20px 0px 20px; - color: #000000; font-weight: bold; font-size: 20px; opacity: 1; diff --git a/adev/src/content/examples/animations/src/app/enter-and-leave/leave.css b/adev/src/content/examples/animations/src/app/enter-and-leave/leave.css index f55177838da..021296c96f9 100644 --- a/adev/src/content/examples/animations/src/app/enter-and-leave/leave.css +++ b/adev/src/content/examples/animations/src/app/enter-and-leave/leave.css @@ -7,7 +7,6 @@ border: 1px solid #dddddd; margin-top: 1em; padding: 20px 20px 0px 20px; - color: #000000; font-weight: bold; font-size: 20px; opacity: 1; diff --git a/adev/src/content/examples/animations/src/app/native-css/insert.component.css b/adev/src/content/examples/animations/src/app/native-css/insert.component.css index 0d0a2927015..cabb573a7eb 100644 --- a/adev/src/content/examples/animations/src/app/native-css/insert.component.css +++ b/adev/src/content/examples/animations/src/app/native-css/insert.component.css @@ -6,7 +6,6 @@ border: 1px solid #dddddd; margin-top: 1em; padding: 20px 20px 0px 20px; - color: #000000; font-weight: bold; font-size: 20px; } diff --git a/adev/src/content/examples/animations/src/app/native-css/remove.component.css b/adev/src/content/examples/animations/src/app/native-css/remove.component.css index 4d7853f0103..3ef4d075cfc 100644 --- a/adev/src/content/examples/animations/src/app/native-css/remove.component.css +++ b/adev/src/content/examples/animations/src/app/native-css/remove.component.css @@ -6,7 +6,6 @@ border: 1px solid #dddddd; margin-top: 1em; padding: 20px 20px 0px 20px; - color: #000000; font-weight: bold; font-size: 20px; opacity: 1;