[Bug]: Console Output uses light mode colors despite VS Code being in default Dark Modern theme.

[mapleroyal]

What happened?

I was expecting the console output to match what's shown in the readme, where the colors are in line with the default Dark Modern color theme. Instead, it's using what appear to be the colors of the Light Modern theme, which is very difficult to see/read.

Version

1.0.330

CLI command to start your dev tool

npm run dev

Steps to reproduce (or sample repo)

Simply just have any output in the Console Output tab.

Log output

17:16:08.586 info extension stopping host
17:16:09.775 info extension stopping host
17:16:09.978 info host ------------ starting ------------
17:16:09.988 info extension host process output: port:[58964]
17:16:09.988 info extension 
17:16:09.997 info host client connected: extension { address: '127.0.0.1', family: 'IPv4', port: 58964 }
17:16:10.001 info host starting host: {"extensionFolder":"/Users/user1/.vscode/extensions/wallabyjs.console-ninja-1.0.330","runtimeHookFile":"/Users/user1/.vscode/extensions/wallabyjs.console-ninja-1.0.330/out/runtimeHook/tracer.js","globalErrorHandlerFile":"/Users/user1/.vscode/extensions/wallabyjs.console-ninja-1.0.330/out/runtimeHook/errorHandler.js","networkLoggingHandlerFile":"/Users/user1/.vscode/extensions/wallabyjs.console-ninja-1.0.330/out/runtimeHook/networkLoggingHandler.js","filesToInstrument":[{"path":"/users/user1/desktop/vue-3-crash-course/src/components/todocreator.vue","reason":"search"},{"path":"/Users/user1/Desktop/vue-3-crash-course/src/components/TodoCreator.vue","reason":"open"}],"debug":false,"config":{"dateTimeFormat":"HH:mm:ss.SSS","dateTimeDisplayMode":"Absolute","installBinToPath":true,"openLinksInEditor":true,"maxLogViewerEntries":15000,"showWelcomeMessageInTools":true,"fontSize":10,"outputMode":"Beside File","captureFunctions":false,"searchUrl":"https://www.google.com/search?q={query}","enableProFeatures":false,"toolsToAutoPatch":["vite","angular","jest","webpack","next.js","nest.js","cypress","http-server","serve","live-server","nuxt","remix","qwik","hydrogen","serverless","astro","live-server-extension"],"showErrors":true,"showLogsOnlyFromOpenedFiles":false,"showLogsFromLogPointsOnly":false,"showLogsFromMultipleRunningToolsTogether":false,"predictiveLoggingEnabled":true,"allowConsoleLogToTriggerPredictions":false,"showNetworkRequests":true},"allowedHosts":["localhost","127.0.0.1","example.cypress.io","user1s-MacBook-Pro.local","192.168.1.68","10.5.0.2"],"host":"127.0.0.1","forcedStart":false,"startTime":1721772969776}
17:16:10.020 info host starting tools discovery and integration
17:16:10.026 info host looking for tools to patch
17:16:10.048 info host found 2 tool file(s) to patch
17:16:10.048 info host patching /Users/user1/.vscode/extensions/ritwickdey.liveserver-5.7.9/node_modules/live-server/index.js
17:16:10.049 info host patching /users/user1/desktop/vue-3-crash-course/node_modules/vite/bin/vite.js
17:16:10.050 info host Host's startup and patch time: 274 ms
17:16:10.051 info host completed tools discovery and integration
17:16:10.052 ERR! host uncaught exception: No clients connected
17:16:10.120 info host worker Starting Host Worker...
17:16:10.489 info host client connected: runtimeHook { address: '127.0.0.1', family: 'IPv4', port: 58964 }
17:16:12.836 info host client connected: runtimeHook { address: '127.0.0.1', family: 'IPv4', port: 58964 }
17:16:14.912 info host client connected: runtimeHook { address: '127.0.0.1', family: 'IPv4', port: 58964 }
17:16:15.627 info buildHook-25975 installing build hook for vite at /users/user1/desktop/vue-3-crash-course, node v22.2.0
17:16:15.630 info buildHook-25975 allowed tools: vite, angular, jest, webpack, next.js, nest.js, cypress, http-server, serve, live-server, nuxt, remix, qwik, hydrogen, serverless, astro, live-server-extension, node
17:16:15.630 info buildHook-25975 running tools: vite
17:16:15.632 info buildHook-25975 installing fs interceptor
17:16:15.634 info host client connected: buildHook { address: '127.0.0.1', family: 'IPv4', port: 58964 }
17:16:15.650 info buildHook-25975 file processed (stat): 1 log points, error handler: false, network logging handler: false
17:16:15.650 info buildHook-25975 allowed tools: vite, angular, jest, webpack, next.js, nest.js, cypress, http-server, serve, live-server, nuxt, remix, qwik, hydrogen, serverless, astro, live-server-extension, node
17:16:15.650 info buildHook-25975 running tools: vite
17:16:15.746 info buildHook-25975 file processed (stat): 0 log points, error handler: true, network logging handler: true
17:16:16.176 info host client disconnected: runtimeHook 1001
17:16:16.176 info host client disconnected: runtimeHook
17:16:16.176 info host client disconnected: runtimeHook 1001
17:16:16.176 info host client disconnected: runtimeHook
17:16:16.176 info host client disconnected: runtimeHook 1001
17:16:16.176 info host client disconnected: runtimeHook
17:16:16.199 info host client connected: runtimeHook { address: '127.0.0.1', family: 'IPv4', port: 58964 }
17:16:16.221 info host client connected: runtimeHook { address: '127.0.0.1', family: 'IPv4', port: 58964 }
17:16:16.401 info host client connected: runtimeHook { address: '127.0.0.1', family: 'IPv4', port: 58964 }

[smcenlly]

Can you please try restarting VS Code and then see if you still have a problem?

Can you also please provide us with a screenshot and let us know which theme you are using.

[mapleroyal]

Using the default Dark Modern theme. The output colors remain the same when I switch to the Light Modern theme, where they're much more readable and similar to the editor's colors.

[smcenlly]

Can you please confirm that you have tried:

1. Changing themes,
2. Closing VS Code and re-opening it,
3. Restarting Console Ninja?

Do you see the same colors in this case?

---

Can you also please let us know if you are opening your project from your local disk, or are you using a remote development environment?

[mapleroyal]

Apologies, yes, I've restarted console ninja, vs code, my computer, and completely nuked everything related to vs code on my machine and reinstalled it and added it back. Though I haven't tried console ninja with zero custom settings, my theme is not customized.

[mapleroyal]

OK, commenting out my entire settings.json, the Console Output colors are as expected!

I will troubleshoot this, but if you notice something that stands out right away in my settings.json, go ahead and let me know:

{
  "editor.lightbulb.enabled": "off",
  "terminal.external.osxExec": "iTerm.app",
  "editor.fontLigatures": true,
  "window.menuBarVisibility": "toggle",
  "window.titleBarStyle": "custom",
  "editor.fontFamily": "CaskaydiaCove Nerd Font",
  "terminal.integrated.fontFamily": "CaskaydiaCove NF SemiLight",
  "editor.fontSize": 16,
  "security.workspace.trust.enabled": false,
  "editor.inlineSuggest.enabled": true,
  "workbench.startupEditor": "none",
  "window.autoDetectColorScheme": true,
  "workbench.preferredLightColorTheme": "Default Light Modern",
  "workbench.editor.enablePreview": false,
  "github.copilot.enable": {
    "*": false,
    "plaintext": false,
    "markdown": false,
    "scminput": false
  },
  "git.enableSmartCommit": true,
  "git.openRepositoryInParentFolders": "always",
  "liveServer.settings.donotShowInfoMsg": true,
  // "open-in-browser.default": "/Applications/Thorium.app/Contents/MacOS/Thorium",
  "editor.tabSize": 2,
  // "[typescript]": {
  //     "editor.tabSize": 2
  // },
  // "[typescriptreact]": {
  //     "editor.tabSize": 2
  // },
  // "[javascript]": {
  //     "editor.tabSize": 2
  // },
  // "[javascriptreact]": {
  //     "editor.tabSize": 2
  // },
  "[text]": {
    "editor.defaultFormatter": null,
    "editor.formatOnSave": false
  },
  "[markdown]": {
    "editor.defaultFormatter": null,
    "editor.formatOnSave": false
  },
  "editor.formatOnSave": true,
  "prettier.proseWrap": "always",
  "workbench.iconTheme": "material-icon-theme",
  // experiment by commenting these together and/or individually
  "workbench.fontAliasing": "antialiased", // default is empty line
  // "editor.fontWeight": "default", // makes fonts look crisp on non-retina displays (e.g. regular desktop monitor) on macos
  "terminal.integrated.defaultProfile.linux": "zsh",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.autoSave": "afterDelay",
  // "prettier.tabWidth": 4,
  "[plaintext]": {
    // "editor.wordWrap": "wordWrapColumn"
    // "editor.wordWrapColumn": 65
  },
  "editor.detectIndentation": false,
  "editor.renderWhitespace": "none",
  "editor.accessibilitySupport": "off",
  "editor.linkedEditing": true,
  "editor.tokenColorCustomizations": {
    // search "Developer: Inspect Editor Tokens and Scopes" in the command palette
    "textMateRules": [
      {
        "scope": [
          // These will be italicized:
          "entity.name.type.class", //class names
          "constant", //String, Number, Boolean…, this, super
          "keyword.operator"
          // "variable"
          // "keyword", //import, export, return…
        ],
        "settings": {
          "fontStyle": "italic"
        }
      },
      {
        "scope": [
          //following will be excluded from italics (VSCode has some defaults for italics)
          // To add new values here, run "Developer: Inspect Editor Tokens and Scopes" from the command palette, then click on the things you want to exclude > copy the top value next to "textmate scopes"
          "invalid",
          "constant.numeric",
          "variable.other.property",
          "keyword.operator.type.annotation",
          "keyword.operator.assignment",
          "keyword.operator.comparison",
          "keyword.operator.ternary",
          "constant.character.format.placeholder.other"
        ],
        "settings": {
          "fontStyle": ""
        }
      }
    ]
  },
  "react-native-tools.showUserTips": false,
  "workbench.activityBar.location": "top",
  "github.copilot.editor.enableCodeActions": false,
  "git.autofetch": true,
  "sqlite3-editor.ui.tableSelector.displayColumns": true,
  "sqlite3-editor.ui.tableSelector.displayShadowTables": false,
  "workbench.colorTheme": "Default Light Modern",
  "gitlens.launchpad.indicator.enabled": false,
  "fiveServer.browser": ["/Applications/Thorium.app/Contents/MacOS/Thorium"],
  "workbench.tree.indent": 20,
  "workbench.tree.renderIndentGuides": "always",
  "material-icon-theme.hidesExplorerArrows": true,
  "editor.acceptSuggestionOnCommitCharacter": false,
  "explorer.compactFolders": false,
  "terminal.integrated.env.osx": {},
  "console-ninja.featureSet": "Community",
  "console-ninja.toolsToEnableSupportAutomaticallyFor": {
    "live-server-extension": true
  },
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "/Applications/Thorium.app/Contents/MacOS/Thorium",
  "codesnap.containerPadding": "1em",
  "codesnap.realLineNumbers": true
  // "emmet.includeLanguages": {
  //   "vue-html": "html",
  //   "vue": "html"
  // }
}

[smcenlly]

We can see why it's not working for you.

Console Ninja uses the workbench.colorTheme theme, but this is being overridden in your case, by "window.autoDetectColorScheme": true,. We weren't familiar with this setting.

If you don't automatically change the VS Code theme when your system color theme changes, then you can remove this setting, and explicitly set the workbench.colorTheme and Console Ninja should work for you.

We'll investigate whether we can add support for when the theme is automatically changed with the window.autoDetectColorScheme setting.

[mapleroyal]

Thanks for catching that!

I do use automatic color switching for light and dark mode to match my system's light/dark state, but I'll disable that for now and switch themes manually. I'll look forward to Console Ninja hopefully supporting it in the future.

Thanks for what you guys do!

[smcenlly]

We've added support for automatic color switching based on your system's light/dark state.

Please update to Console Ninja v1.0.331, it should now work for you.

[mapleroyal]

Jeez that was quick. Outstanding work, you guys. Thanks again!

EDIT: yes it does work now 👍