Add light theme CSS selector

Author: pomber

.changeset/serious-foxes-sniff.md

@@ -0,0 +1,13 @@
+---
+"bright": patch
+---
+
+Add lightThemeSelector
+
+```
+Code.theme = {
+  dark: "min-dark",
+  light: "min-light",
+  lightSelector: ".light", // default is [data-theme="light"]
+}
+```

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run dev
+
+

lib/package.json

@@ -16,7 +16,7 @@
     "watch": "tsup src/index.tsx --format esm,cjs --watch --dts"
   },
   "dependencies": {
-    "@code-hike/lighter": "0.6.2",
+    "@code-hike/lighter": "0.6.6",
     "server-only": "^0.0.1"
   },
   "devDependencies": {

lib/src/code.tsx

@@ -69,7 +69,11 @@ export function Root(props: BrightProps) {
         ...style,
       }}
     >
-      <Style mode={mode} lineNumbers={props.lineNumbers} />
+      <Style
+        mode={mode}
+        lineNumbers={props.lineNumbers}
+        lightThemeSelector={props.lightThemeSelector}
+      />
       {title && <TitleBar {...props} />}
       <Pre {...props} />
     </div>
@@ -102,9 +106,11 @@ export function Pre(brightProps: BrightProps) {
 function Style({
   mode,
   lineNumbers,
+  lightThemeSelector,
 }: {
   mode: "dark" | "light" | undefined
   lineNumbers?: boolean
+  lightThemeSelector?: string
 }) {
   const lineNumbersStyle = `[data-bright-theme] [data-bright-ln] { 
     color: var(--line-number-color); 
@@ -114,21 +120,27 @@ function Style({
     user-select: none;
   }`
 
-  const css = `${displayStyle(mode)}
+  const css = `${displayStyle(mode, lightThemeSelector)}
   [data-bright-theme] ::selection { background-color: var(--selection-background) }
   ${lineNumbers ? lineNumbersStyle : ""}
   `
   return <style dangerouslySetInnerHTML={{ __html: css }} />
 }
 
-function displayStyle(mode: "dark" | "light" | undefined) {
+function displayStyle(
+  mode: "dark" | "light" | undefined,
+  lightThemeSelector: string = '[data-theme="light"]'
+) {
   if (!mode) return ""
+
   if (mode === "dark")
     return `[data-bright-mode="dark"] { display: block }
-[data-theme="light"] [data-bright-mode="dark"] { display: none }`
+${lightThemeSelector} [data-bright-mode="dark"] { display: none }`
+
   if (mode === "light")
     return `[data-bright-mode="light"] { display: none }
-[data-theme="light"] [data-bright-mode="light"] { display: block }`
+${lightThemeSelector} [data-bright-mode="light"] { display: block }`
+
   return ""
 }
 

lib/src/index.tsx

@@ -47,9 +47,19 @@ const Code: CodeComponent = async (componentProps) => {
   return (
     <>
       {/* @ts-expect-error Server Component */}
-      <AnnotatedCode {...props} theme={darkTheme} mode="dark" />
+      <AnnotatedCode
+        {...props}
+        theme={darkTheme}
+        mode="dark"
+        lightThemeSelector={doubleTheme.lightSelector}
+      />
       {/* @ts-expect-error Server Component */}
-      <AnnotatedCode {...props} theme={lightTheme} mode="light" />
+      <AnnotatedCode
+        {...props}
+        theme={lightTheme}
+        mode="light"
+        lightThemeSelector={doubleTheme.lightSelector}
+      />
     </>
   )
 }

lib/src/types.ts

@@ -45,6 +45,7 @@ export type Extension = Prettify<
 export type Extensions = Extension[]
 
 export type DoubleTheme = {
+  lightSelector?: string
   dark: Theme
   light: Theme
 }
@@ -77,6 +78,7 @@ export type CodeProps = Prettify<
     lang: LanguageAlias
     code: string
     mode?: "dark" | "light"
+    lightThemeSelector?: string
 
     // atttributes
     style?: React.CSSProperties

web/app/icons.js

@@ -50,7 +50,7 @@ export function DiscordLink(props) {
     <a
       target="_blank"
       rel="noopener noreferrer"
-      href="https://discord.gg/zYJMDBANkj"
+      href="http://discord.codehike.org"
       {...props}
     >
       <svg

web/app/test/page.js

@@ -1,31 +1,33 @@
-import { Code, tokensToContent } from "bright"
-import { Wrapper, Input } from "../../client-components"
+import { Code } from "bright"
 
-Code.theme = "dracula"
-Code.extensions = [
-  {
-    name: "input",
-    InlineAnnotation: ({ query, tokens }) => (
-      <Input defaultValue={tokensToContent(tokens)} name={query} />
-    ),
-  },
-]
+Code.theme = {
+  dark: "min-dark",
+  light: "min-light",
+  lightSelector: ".light",
+}
+Code.extensions = []
 const code = `
 <div
   style={{
-    // input[13:19] color
     color: "#fafafa",
-    // input[18:24] bg
     background: "#222222",
   }}
 >
   Hello World
-</div>`
+</div>`.trim()
 
 export default function Page() {
   return (
-    <Wrapper>
-      <Code lang="jsx">{code}</Code>
-    </Wrapper>
+    <main>
+      <div className="light">
+        <Code lang="jsx">{code}</Code>
+      </div>
+      <div>
+        <Code lang="jsx">{code}</Code>
+      </div>
+      <div data-theme="dark">
+        <Code lang="jsx">{code}</Code>
+      </div>
+    </main>
   )
 }

yarn.lock

@@ -237,10 +237,10 @@
     human-id "^1.0.2"
     prettier "^2.7.1"
 
-"@code-hike/[email protected].2":
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/@code-hike/lighter/-/lighter-0.6.2.tgz#3f5cb79de86878ae0540ea36635591a7d8a82fbb"
-  integrity sha512-yGzUE63b6dRIZFZ5Bn5XKRDsWQSNkGTvYSBZi0lXm2KSI3JKyM32DEns9Oe7aHQF/lf43+r5LjHoBY5K19+Sgw==
+"@code-hike/[email protected].6":
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/@code-hike/lighter/-/lighter-0.6.6.tgz#72f1b93dceacc40022a0c2c0f154363e2595a4ba"
+  integrity sha512-dLkSpowP4NaWDUgay3Mebb8V+wYqVGRD+Tl8wSfWdtIH0z4OUU3UznSsmvvGpCgkdUIF5DhOPRGRowqkNWQsrg==
 
 "@esbuild/[email protected]":
   version "0.15.18"