refactor: share terminal background and brand colour detection (#1459)

Author: danielroe

packages/create-nuxt/src/init.ts

@@ -23,14 +23,15 @@ import { selectModulesAutocomplete } from '../../nuxt-cli/src/commands/module/_a
 import { checkNuxtCompatibility, fetchModules, MODULES_API_URL } from '../../nuxt-cli/src/commands/module/_utils'
 import addModuleCommand from '../../nuxt-cli/src/commands/module/add'
 import { runCommandDef as runCommand } from '../../nuxt-cli/src/run-command'
-import { nuxtIcon, themeColor } from '../../nuxt-cli/src/utils/ascii'
+import { nuxtIcon } from '../../nuxt-cli/src/utils/ascii'
 import { fetchJson } from '../../nuxt-cli/src/utils/fetch'
 import { formatHeadlessCommand } from '../../nuxt-cli/src/utils/headless'
 import { createInstallLog, resolvePackageManagerDescriptor, runInstall, takeUnreportedIgnoredBuilds } from '../../nuxt-cli/src/utils/install'
 import { debug, logger } from '../../nuxt-cli/src/utils/logger'
 import { classifyNetworkError, describeNetworkError, logNetworkError, probeNetworkError } from '../../nuxt-cli/src/utils/network'
 import { relativeToProcess } from '../../nuxt-cli/src/utils/paths'
 import { getTemplates, TEMPLATES_API_URL } from '../../nuxt-cli/src/utils/starter-templates'
+import { paintBrand } from '../../nuxt-cli/src/utils/terminal-theme'
 import { getNuxtVersion } from '../../nuxt-cli/src/utils/versions'
 
 const NON_WORD_RE = /[^\w-]/g
@@ -212,10 +213,10 @@ export default defineCommand({
     }
 
     if (hasTTY) {
-      process.stdout.write(`\n${nuxtIcon}\n\n`)
+      process.stdout.write(`\n${nuxtIcon()}\n\n`)
     }
 
-    intro(styleText('bold', `Welcome to Nuxt!`.split('').map(m => `${themeColor}${m}`).join('')))
+    intro(styleText('bold', paintBrand('Welcome to Nuxt!')))
 
     let availableTemplates: Record<string, TemplateData> = {}
 

packages/nuxt-cli/src/utils/ascii.ts

@@ -3,7 +3,8 @@
  * https://bsky.app/profile/durdraw.org/post/3liadod3gv22a
  */
 
-export const themeColor = '\x1B[38;2;0;220;130m'
+import { paintBrand } from './terminal-theme'
+
 const icon = [
   `        .d$b.`,
   `       i$$A$$L  .d$b`,
@@ -15,4 +16,7 @@ const icon = [
   ` \`4$$$$$$$$P\` .i$$$$$$$$P\``,
 ]
 
-export const nuxtIcon = icon.map(line => line.split('').join(themeColor)).join('\n')
+/** The mark in Nuxt green, ending with the terminal's colour handed back. */
+export function nuxtIcon(): string {
+  return icon.map(line => paintBrand(line)).join('\n')
+}

packages/nuxt-cli/src/utils/profile.ts

@@ -4,7 +4,7 @@ import process from 'node:process'
 import { styleText } from 'node:util'
 import { box } from '@clack/prompts'
 import { join, relative } from 'pathe'
-import { themeColor } from './ascii'
+import { paintBrand } from './terminal-theme'
 
 const RELATIVE_PATH_RE = /^(?![^.]{1,2}\/)/
 
@@ -78,7 +78,7 @@ export async function stopCpuProfile(outDir: string, command: string): Promise<s
             contentPadding: 2,
             rounded: true,
             withGuide: false,
-            formatBorder: (text: string) => `${themeColor + text}\x1B[0m`,
+            formatBorder: (text: string) => paintBrand(text),
           })
         }
         catch {}

packages/nuxt-cli/src/utils/terminal-theme.ts

@@ -0,0 +1,61 @@
+import process from 'node:process'
+import { styleText } from 'node:util'
+
+export type TerminalBackground = 'dark' | 'light' | 'unknown'
+
+type Rgb = readonly [number, number, number]
+
+/**
+ * Nuxt green, and the darker green it becomes on a light terminal.
+ *
+ * `#00DC82` is bright enough to all but disappear on white (a contrast ratio
+ * of about 1.8:1), so the light variant trades some of the glow for a ratio
+ * above 4:1.
+ */
+const BRAND_GREEN: Record<'dark' | 'light', Rgb> = {
+  dark: [0, 220, 130],
+  light: [0, 145, 92],
+}
+
+/** Palette indices a terminal reports as its background when it is a light one. */
+const LIGHT_INDICES = new Set([7, 9, 10, 11, 12, 13, 14, 15])
+
+/**
+ * Whether the terminal is showing dark text on light or the other way round.
+ *
+ * `unknown` is the common answer: only some terminals set `COLORFGBG`, and
+ * asking the terminal directly (OSC 11) means writing to stdout and waiting
+ * for a reply that may never come. Callers are expected to have a choice that
+ * is safe on either background rather than to guess.
+ */
+function resolveBackground(env: NodeJS.ProcessEnv = process.env): TerminalBackground {
+  const override = env.NUXT_TERM_THEME?.trim().toLowerCase()
+  if (override === 'dark' || override === 'light') {
+    return override
+  }
+
+  const reported = env.COLORFGBG?.split(';').at(-1)?.trim()
+  if (!reported || !/^\d+$/.test(reported)) {
+    return 'unknown'
+  }
+  return LIGHT_INDICES.has(Number(reported)) ? 'light' : 'dark'
+}
+
+/**
+ * Write `text` in Nuxt green, as close to it as the terminal can be trusted to
+ * render legibly.
+ *
+ * Without a known background there is no safe exact colour, so the terminal's
+ * own palette decides: the user chose it against the background they are
+ * looking at.
+ */
+export function paintBrand(text: string, background = resolveBackground()): string {
+  if (background === 'unknown' || (process.stdout.getColorDepth?.() ?? 1) < 24) {
+    return styleText('green', text)
+  }
+  if (process.env.NO_COLOR || !process.stdout.hasColors?.()) {
+    return text
+  }
+  const [r, g, b] = BRAND_GREEN[background]
+  return `\u001B[38;2;${r};${g};${b}m${text}\u001B[39m`
+}