[dev-overlay] fix dark theme missing close bracket (#76672)

devjiwonchoi · web-flow · commit 4eb7e23b4679 · 2025-02-28T22:31:13.000+09:00
### Why? The dark theme was broken due to invalid CSS syntax been shipped at #76528. ### Follow Up Restore the removed VS Code Extension styled-components as recommended, and apply a real "noop" to CSS template literals so that it can leverage the extension.
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/styles/dark-theme.tsx b/packages/next/src/client/components/react-dev-overlay/ui/styles/dark-theme.tsx
@@ -112,11 +112,13 @@ export function DarkTheme() {
       :host(.dark) {
         ${base}
         ${colors}
+      }
 
       @media (prefers-color-scheme: dark) {
         :host(:not(.light)) {
           ${base}
           ${colors}
+        }
       }
     `}</style>
   )

Original file line number	Diff line number	Diff line change
`@@ -112,11 +112,13 @@ export function DarkTheme() {`
`112`	`112`	`:host(.dark) {`
`113`	`113`	`${base}`
`114`	`114`	`${colors}`
	`115`	`+ }`
`115`	`116`
`116`	`117`	`@media (prefers-color-scheme: dark) {`
`117`	`118`	`:host(:not(.light)) {`
`118`	`119`	`${base}`
`119`	`120`	`${colors}`
	`121`	`+ }`
`120`	`122`	`}`
`121`	`123`	`}</style>
`122`	`124`	`)`