mtxr / vscode-sqltools

Database management for VSCode
https://vscode-sqltools.mteixeira.dev?utm_source=github&utm_medium=homepage-link
MIT License
1.48k stars 296 forks source link

Driver icons in connection tree are hard to see in dark themes #992

Open gjsjohnmurray opened 1 year ago

gjsjohnmurray commented 1 year ago

While fixing a bug preventing them from displaying at all (at least on Windows) as part of #991 I noticed how poorly the ones in the supported drivers display with the Dark+ theme (and presumably other dark themes):

All inactive:

image

MySQL and PGSQL connected, SQLite connected and active:

image

For comparison, Light+:

All inactive:

image

Some connected:

image

Proposal

Recommend that drivers register dark and light variants thus:

      extension.resourcesMap().set(`driver/${DRIVER_ALIASES[0].value}/icons.dark`, {
        active: extContext.asAbsolutePath('icons/dark/active.png'),
        default: extContext.asAbsolutePath('icons/dark/default.png'),
        inactive: extContext.asAbsolutePath('icons/dark/inactive.png'),
      });
      extension.resourcesMap().set(`driver/${DRIVER_ALIASES[0].value}/icons.light`, {
        active: extContext.asAbsolutePath('icons/light/active.png'),
        default: extContext.asAbsolutePath('icons/light/default.png'),
        inactive: extContext.asAbsolutePath('icons/light/inactive.png'),
      });

Enhance this function:

https://github.com/mtxr/vscode-sqltools/blob/17de7a5c8047a1df7013228d2aad96cbea4aa9a0/packages/plugins/connection-manager/explorer/SidebarConnection.ts#L95

Return { light: Uri, dark: Uri } if the driver has registered these variants, else return the unqualified icon resource Uri.