Moved env.scheme into env.ui for improved structure ↞ [auto-sync from https://github.com/KudoAI/chatgpt.js-chrome-starter]

Author: kudo-sync-bot

starters/chrome/extension/components/modals.js

@@ -39,36 +39,37 @@ window.modals = {
               + 'font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto,'
                   + 'Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif ;'
               + 'padding: 20px 25px 24px 25px !important ; font-size: 20px ;'
-              + `color: ${ this.dependencies.env.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + `color: ${ this.dependencies.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
               + `background-image: linear-gradient(180deg, ${
-                     this.dependencies.env.scheme == 'dark' ? '#99a8a6 -200px, black 200px'
+                     this.dependencies.env.ui.scheme == 'dark' ? '#99a8a6 -200px, black 200px'
                                                             : '#b6ebff -296px, white 171px' }) }`
           + `.${this.class} [class*=modal-close-btn] {`
               + 'position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;'
               + 'cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px }'
           + `.${this.class} [class*=modal-close-btn] svg { height: 10px }`
           + `.${this.class} [class*=modal-close-btn] path {`
-              + `${ this.dependencies.env.scheme == 'dark' ? 'stroke: white ; fill: white'
+              + `${ this.dependencies.env.ui.scheme == 'dark' ? 'stroke: white ; fill: white'
                                                            : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
-          + ( this.dependencies.env.scheme == 'dark' ?  // invert dark mode hover paths
+          + ( this.dependencies.env.ui.scheme == 'dark' ?  // invert dark mode hover paths
                 `.${this.class} [class*=modal-close-btn]:hover path { stroke: black ; fill: black }` : '' )
           + `.${this.class} [class*=modal-close-btn]:hover { background-color: #f2f2f2 }` // hover underlay
           + `.${this.class} [class*=modal-close-btn] svg { margin: 11.5px }` // center SVG for hover underlay
-          + `.${this.class} a { color: #${ this.dependencies.env.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }`
+          + `.${this.class} a {`
+              + `color: #${ this.dependencies.env.ui.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }`
           + `.${this.class} h2 { font-weight: bold }`
           + `.${this.class} button {`
               + 'font-size: 14px ; text-transform: uppercase ;' // shrink/uppercase labels
               + 'border-radius: 0 !important ;' // square borders
               + 'transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;' // smoothen hover fx
               + 'cursor: pointer !important ;' // add finger cursor
-              + `border: 1px solid ${ this.dependencies.env.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + `border: 1px solid ${ this.dependencies.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
               + 'padding: 8px !important ; min-width: 102px }' // resize
           + `.${this.class} button:hover {` // add zoom, re-scheme
               + 'transform: scale(1.055) ; color: black !important ;'
-              + `background-color: #${ this.dependencies.env.scheme == 'dark' ? '00cfff' : '9cdaff' } !important }`
+              + `background-color: #${ this.dependencies.env.ui.scheme == 'dark' ? '00cfff' : '9cdaff' } !important }`
           + ( !this.dependencies.env.browser.isMobile ?
                 `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
-          + `.about-em { color: ${ this.dependencies.env.scheme == 'dark' ? 'white' : 'green' } !important }`
+          + `.about-em { color: ${ this.dependencies.env.ui.scheme == 'dark' ? 'white' : 'green' } !important }`
         )
     },
 

starters/chrome/extension/content.js

@@ -8,16 +8,15 @@
         await import(chrome.runtime.getURL(resource))
 
     // Init ENV context
-    const env = { browser: { isMobile: chatgpt.browser.isMobile() }}
+    const env = { browser: { isMobile: chatgpt.browser.isMobile() }, ui: { scheme: getScheme() }}
     env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
-    env.scheme = getScheme()
 
     // Import APP data
     const { app } = await chrome.storage.sync.get('app')
 
     // Export DEPENDENCIES to imported resources
-    dom.dependencies.import({ env }) // for env.scheme
-    modals.dependencies.import({ app, env }) // for app data + env.scheme
+    dom.dependencies.import({ env }) // for env.ui.scheme
+    modals.dependencies.import({ app, env }) // for app data + env.ui.scheme
 
     // Add CHROME MSG listener
     chrome.runtime.onMessage.addListener(req => { // from service-worker.js + popup/index.html
@@ -41,7 +40,7 @@
         if (foundState) msg = msg.replace(foundState, '')
 
         // Show notification
-        chatgpt.notify(`${app.symbol} ${msg}`, pos, notifDuration, shadow || env.scheme == 'dark' ? '' : 'shadow')
+        chatgpt.notify(`${app.symbol} ${msg}`, pos, notifDuration, shadow || env.ui.scheme == 'dark' ? '' : 'shadow')
         const notif = document.querySelector('.chatgpt-notif:last-child')
 
         // Append styled state word
@@ -98,14 +97,14 @@
                 settings.save('skipAlert', !config.skipAlert) }
         )
 
-    // Monitor SCHEME PREF CHANGES to update modal colors + env.scheme for your use
+    // Monitor SCHEME PREF CHANGES to update modal colors + env.ui.scheme for your use
     new MutationObserver(handleSchemePrefChange).observe( // for site scheme pref changes
         document.documentElement, { attributes: true, attributeFilter: ['class'] })
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener( // for browser/system scheme pref changes
         'change', () => requestAnimationFrame(handleSchemePrefChange))
     function handleSchemePrefChange() {
         const displayedScheme = getScheme()
-        if (env.scheme != displayedScheme) { env.scheme = displayedScheme ;  modals.stylize() }
+        if (env.ui.scheme != displayedScheme) { env.ui.scheme = displayedScheme ;  modals.stylize() }
     }
 
     // Your code here...

starters/chrome/extension/lib/dom.js

@@ -27,7 +27,7 @@ window.dom = {
           + 'z-index: -1'; // allow interactive elems to be clicked
         ['sm', 'med', 'lg'].forEach(starSize => {
             const starsDiv = document.createElement('div')
-            starsDiv.id = `${ this.dependencies.env.scheme == 'dark' ? 'white' : 'black' }-stars-${starSize}`
+            starsDiv.id = `${ this.dependencies.env.ui.scheme == 'dark' ? 'white' : 'black' }-stars-${starSize}`
             starsDivsContainer.append(starsDiv)
         })
         targetNode.prepend(starsDivsContainer)