mirror of
https://github.com/h-sphere/sql-seal.git
synced 2026-07-22 10:10:28 +00:00
fix: dark theme improvements (#183)
* fix: dark theme improvements * chore: fixing icon a bit more
This commit is contained in:
Kacper Kula
GitHub
parent
d2141f1ef2
commit
1fec2bbd47
2 changed files with 75 additions and 12 deletions
|
|
@ -1 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 91 91" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><g><g><g><path d="M76.595,73.106c-1.409,-1.318 -2.846,-2.451 -3.7,-3.097c0.15,-2.473 -0.239,-4.9 -1.171,-7.268c-1.962,-4.986 -5.948,-8.893 -9.201,-11.739c-4.354,-3.81 -3.922,-9.686 -3.276,-12.851c0.361,-1.785 -0.072,-3.6 -1.135,-4.999c-0.904,-1.189 -5.401,-2.873 -8.602,-1.632c-5.254,2.037 -8.97,4.302 -10.802,7.457c-1.335,2.299 -1.688,4.865 -1.05,7.628c0.195,0.848 0.762,1.934 1.545,3.438c1.646,3.157 4.133,7.928 3.103,10.994c-0.354,1.055 -1.136,1.857 -2.391,2.451c-4.534,2.147 -6.793,-0.153 -9.977,-4.196c-1.169,-1.486 -2.275,-2.889 -3.594,-3.743c-1.806,-1.168 -4.117,-1.465 -6.683,-0.861c-1.208,0.284 -2.147,1.209 -2.45,2.413c-0.298,1.179 0.08,2.409 0.986,3.212c0.04,0.036 0.076,0.071 0.103,0.096c0.559,0.548 0.44,1.205 0.363,1.462c-0.172,0.576 -0.623,0.988 -1.205,1.102c-1.537,0.302 -3.123,0.813 -4.715,1.521c-1.778,0.794 -2.898,2.57 -2.852,4.523c0.045,1.958 1.2,3.616 3.012,4.328c2.315,0.908 5.277,1.412 8.804,1.496c1.952,0.047 3.731,0.966 4.882,2.521c0.407,0.55 0.842,1.085 1.296,1.604c-0.364,0.432 -0.745,0.869 -1.145,1.312c-1.141,1.263 -1.381,3.706 -0.875,4.627c2.044,3.717 13.868,2.571 16.224,0.599c0.113,-0.096 0.216,1.548 3.184,2.28c6.373,1.573 19.837,0.086 22.118,-5.228c1.11,0.221 3.056,0.571 5.076,0.749c0.749,0.067 1.563,0.119 2.38,0.119c2.589,-0 5.202,-0.522 5.841,-2.762c0.574,-2.005 -0.727,-4.407 -4.093,-7.556Zm-9.694,4.685c-2.685,4.59 -8.859,7.267 -15.731,7.457l-1.498,0c-1.877,-0.046 -3.789,-0.272 -5.684,-0.698c4.033,-2.439 6.299,-5.342 6.47,-5.565c0.562,-0.736 0.421,-1.788 -0.315,-2.35c-0.736,-0.562 -1.788,-0.421 -2.35,0.315c-0.067,0.087 -6.82,8.751 -17.855,7.5c-0.624,-0.071 -0.863,-0.534 -0.937,-0.73c-0.076,-0.2 -0.205,-0.716 0.226,-1.194c2.965,-3.281 4.995,-6.26 6.033,-8.854c0.344,-0.859 -0.074,-1.835 -0.934,-2.179c-0.86,-0.344 -1.835,0.074 -2.179,0.934c-0.459,1.147 -1.192,2.439 -2.166,3.829c-0.239,-0.291 -0.474,-0.586 -0.697,-0.888c-1.771,-2.393 -4.504,-3.807 -7.497,-3.879c-3.09,-0.073 -5.738,-0.511 -7.659,-1.265c-0.78,-0.306 -0.879,-1 -0.886,-1.284c-0.006,-0.232 0.041,-1.016 0.865,-1.384c1.36,-0.604 2.705,-1.039 3.995,-1.292c1.799,-0.353 3.245,-1.667 3.773,-3.432c0.515,-1.724 0.044,-3.57 -1.23,-4.818c-0.005,-0.005 -0.013,-0.012 -0.017,-0.017c-0.026,-0.024 -0.052,-0.049 -0.078,-0.074c1.626,-0.361 2.962,-0.213 3.972,0.441c0.851,0.55 1.789,1.741 2.782,3.002c2.695,3.424 6.77,8.598 14.045,5.152c2.093,-0.992 3.484,-2.477 4.135,-4.414c1.484,-4.418 -1.4,-9.951 -3.308,-13.611c-0.54,-1.036 -1.153,-2.211 -1.252,-2.642c-0.446,-1.934 -0.223,-3.631 0.682,-5.191c1.6,-2.754 5.234,-4.952 10.803,-6.53c0.882,-0.249 1.837,-0.042 2.548,0.551l0.049,0.041c0.799,0.665 1.165,1.723 0.954,2.76c-0.79,3.877 -1.276,11.116 4.354,16.042c2.968,2.596 6.592,6.13 8.289,10.444c1.728,4.389 1.171,8.911 -1.702,13.823Zm5.243,2.115c-0.85,-0.091 -1.677,-0.211 -2.404,-0.331c0.018,-0.03 0.037,-0.06 0.055,-0.091c1.124,-1.921 1.944,-3.827 2.463,-5.71c0.598,0.488 1.266,1.057 1.926,1.669c2.889,2.675 3.235,3.925 3.276,4.226c-0.275,0.16 -1.464,0.65 -5.316,0.237Z" style="fill-rule:nonzero;"/></g></g><g><g><circle cx="47.242" cy="39.859" r="1.676"/></g></g><g><g><path d="M76.42,14.232c-1.116,3.3 -7.37,4.166 -13.969,1.935c-6.598,-2.231 -11.044,-6.715 -9.928,-10.014c1.115,-3.3 7.369,-4.166 13.968,-1.935c6.599,2.231 11.044,6.715 9.929,10.014Z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:3.15px;"/><path d="M73.895,21.7c-1.116,3.299 -7.369,4.165 -13.968,1.934c-6.599,-2.231 -11.044,-6.714 -9.929,-10.014" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:3.15px;"/><path d="M52.523,6.153l-5.05,14.935c-1.115,3.3 3.33,7.783 9.929,10.014c6.599,2.231 12.853,1.365 13.968,-1.934l5.05,-14.936" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:3.15px;"/></g></g></g></svg>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%"
|
||||
height="100%" viewBox="0 0 91 91" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;" fill="none" stroke="currentColor" stroke-width="2" class="svg-icon">
|
||||
<g>
|
||||
<path
|
||||
fill="currentColor" stroke="none"
|
||||
d="M76.595,73.106c-1.409,-1.318 -2.846,-2.451 -3.7,-3.097c0.15,-2.473 -0.239,-4.9 -1.171,-7.268c-1.962,-4.986 -5.948,-8.893 -9.201,-11.739c-4.354,-3.81 -3.922,-9.686 -3.276,-12.851c0.361,-1.785 -0.072,-3.6 -1.135,-4.999c-0.904,-1.189 -5.401,-2.873 -8.602,-1.632c-5.254,2.037 -8.97,4.302 -10.802,7.457c-1.335,2.299 -1.688,4.865 -1.05,7.628c0.195,0.848 0.762,1.934 1.545,3.438c1.646,3.157 4.133,7.928 3.103,10.994c-0.354,1.055 -1.136,1.857 -2.391,2.451c-4.534,2.147 -6.793,-0.153 -9.977,-4.196c-1.169,-1.486 -2.275,-2.889 -3.594,-3.743c-1.806,-1.168 -4.117,-1.465 -6.683,-0.861c-1.208,0.284 -2.147,1.209 -2.45,2.413c-0.298,1.179 0.08,2.409 0.986,3.212c0.04,0.036 0.076,0.071 0.103,0.096c0.559,0.548 0.44,1.205 0.363,1.462c-0.172,0.576 -0.623,0.988 -1.205,1.102c-1.537,0.302 -3.123,0.813 -4.715,1.521c-1.778,0.794 -2.898,2.57 -2.852,4.523c0.045,1.958 1.2,3.616 3.012,4.328c2.315,0.908 5.277,1.412 8.804,1.496c1.952,0.047 3.731,0.966 4.882,2.521c0.407,0.55 0.842,1.085 1.296,1.604c-0.364,0.432 -0.745,0.869 -1.145,1.312c-1.141,1.263 -1.381,3.706 -0.875,4.627c2.044,3.717 13.868,2.571 16.224,0.599c0.113,-0.096 0.216,1.548 3.184,2.28c6.373,1.573 19.837,0.086 22.118,-5.228c1.11,0.221 3.056,0.571 5.076,0.749c0.749,0.067 1.563,0.119 2.38,0.119c2.589,-0 5.202,-0.522 5.841,-2.762c0.574,-2.005 -0.727,-4.407 -4.093,-7.556Zm-9.694,4.685c-2.685,4.59 -8.859,7.267 -15.731,7.457l-1.498,0c-1.877,-0.046 -3.789,-0.272 -5.684,-0.698c4.033,-2.439 6.299,-5.342 6.47,-5.565c0.562,-0.736 0.421,-1.788 -0.315,-2.35c-0.736,-0.562 -1.788,-0.421 -2.35,0.315c-0.067,0.087 -6.82,8.751 -17.855,7.5c-0.624,-0.071 -0.863,-0.534 -0.937,-0.73c-0.076,-0.2 -0.205,-0.716 0.226,-1.194c2.965,-3.281 4.995,-6.26 6.033,-8.854c0.344,-0.859 -0.074,-1.835 -0.934,-2.179c-0.86,-0.344 -1.835,0.074 -2.179,0.934c-0.459,1.147 -1.192,2.439 -2.166,3.829c-0.239,-0.291 -0.474,-0.586 -0.697,-0.888c-1.771,-2.393 -4.504,-3.807 -7.497,-3.879c-3.09,-0.073 -5.738,-0.511 -7.659,-1.265c-0.78,-0.306 -0.879,-1 -0.886,-1.284c-0.006,-0.232 0.041,-1.016 0.865,-1.384c1.36,-0.604 2.705,-1.039 3.995,-1.292c1.799,-0.353 3.245,-1.667 3.773,-3.432c0.515,-1.724 0.044,-3.57 -1.23,-4.818c-0.005,-0.005 -0.013,-0.012 -0.017,-0.017c-0.026,-0.024 -0.052,-0.049 -0.078,-0.074c1.626,-0.361 2.962,-0.213 3.972,0.441c0.851,0.55 1.789,1.741 2.782,3.002c2.695,3.424 6.77,8.598 14.045,5.152c2.093,-0.992 3.484,-2.477 4.135,-4.414c1.484,-4.418 -1.4,-9.951 -3.308,-13.611c-0.54,-1.036 -1.153,-2.211 -1.252,-2.642c-0.446,-1.934 -0.223,-3.631 0.682,-5.191c1.6,-2.754 5.234,-4.952 10.803,-6.53c0.882,-0.249 1.837,-0.042 2.548,0.551l0.049,0.041c0.799,0.665 1.165,1.723 0.954,2.76c-0.79,3.877 -1.276,11.116 4.354,16.042c2.968,2.596 6.592,6.13 8.289,10.444c1.728,4.389 1.171,8.911 -1.702,13.823Zm5.243,2.115c-0.85,-0.091 -1.677,-0.211 -2.404,-0.331c0.018,-0.03 0.037,-0.06 0.055,-0.091c1.124,-1.921 1.944,-3.827 2.463,-5.71c0.598,0.488 1.266,1.057 1.926,1.669c2.889,2.675 3.235,3.925 3.276,4.226c-0.275,0.16 -1.464,0.65 -5.316,0.237Z"
|
||||
/>
|
||||
<circle cx="47.242" cy="39.859" r="1.676" fill="currentColor" stroke="none" />
|
||||
<path
|
||||
d="M76.42,14.232c-1.116,3.3 -7.37,4.166 -13.969,1.935c-6.598,-2.231 -11.044,-6.715 -9.928,-10.014c1.115,-3.3 7.369,-4.166 13.968,-1.935c6.599,2.231 11.044,6.715 9.929,10.014Z"
|
||||
/>
|
||||
<path
|
||||
d="M73.895,21.7c-1.116,3.299 -7.369,4.165 -13.968,1.934c-6.599,-2.231 -11.044,-6.714 -9.929,-10.014"
|
||||
/>
|
||||
<path
|
||||
d="M52.523,6.153l-5.05,14.935c-1.115,3.3 3.33,7.783 9.929,10.014c6.599,2.231 12.853,1.365 13.968,-1.934l5.05,-14.936"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4 KiB After Width: | Height: | Size: 4 KiB |
|
|
@ -39,6 +39,7 @@ export class GlobalTablesView extends ItemView {
|
|||
}
|
||||
|
||||
api: GridApi | null = null;
|
||||
private themeObserver: MutationObserver | null = null;
|
||||
|
||||
async onOpen() {
|
||||
const container = this.containerEl.children[1];
|
||||
|
|
@ -60,17 +61,10 @@ export class GlobalTablesView extends ItemView {
|
|||
// el.createDiv({ text: 'HELLO FROM SQLSEAL GLOBAL TABLES VIEW' })
|
||||
|
||||
const gridEl = c.createDiv({ cls: "sql-seal-csv-viewer" });
|
||||
const myTheme = themeQuartz.withParams({
|
||||
borderRadius: 0,
|
||||
browserColorScheme: "light",
|
||||
headerFontSize: 14,
|
||||
headerRowBorder: false,
|
||||
headerVerticalPaddingScale: 1,
|
||||
rowBorder: false,
|
||||
spacing: 16,
|
||||
wrapperBorder: false,
|
||||
wrapperBorderRadius: 0,
|
||||
});
|
||||
|
||||
// Get theme-aware AG Grid theme
|
||||
const currentTheme = this.getCurrentTheme();
|
||||
const myTheme = themeQuartz.withParams(this.getThemeParams(currentTheme));
|
||||
|
||||
this.api = createGrid(gridEl, {
|
||||
theme: myTheme,
|
||||
|
|
@ -109,6 +103,7 @@ export class GlobalTablesView extends ItemView {
|
|||
});
|
||||
|
||||
this.setupResizeObserver(gridEl);
|
||||
this.setupThemeObserver();
|
||||
}
|
||||
|
||||
// Vibe Coded.
|
||||
|
|
@ -187,10 +182,57 @@ export class GlobalTablesView extends ItemView {
|
|||
this.api?.setGridOption("rowData", this.gridData);
|
||||
}
|
||||
|
||||
private getCurrentTheme() {
|
||||
return document.body.classList.contains('theme-dark') ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
private getThemeParams(theme: 'dark' | 'light') {
|
||||
return {
|
||||
borderRadius: 0,
|
||||
browserColorScheme: theme,
|
||||
backgroundColor: "var(--color-primary)",
|
||||
chromeBackgroundColor: {
|
||||
ref: "foregroundColor",
|
||||
mix: 0.07,
|
||||
onto: "backgroundColor"
|
||||
},
|
||||
foregroundColor: "var(--text-normal)",
|
||||
headerFontSize: 14,
|
||||
headerRowBorder: false,
|
||||
headerVerticalPaddingScale: 1,
|
||||
rowBorder: false,
|
||||
spacing: 16,
|
||||
wrapperBorder: false,
|
||||
wrapperBorderRadius: 0,
|
||||
};
|
||||
}
|
||||
|
||||
private updateGridTheme() {
|
||||
if (!this.api) return;
|
||||
|
||||
const currentTheme = this.getCurrentTheme();
|
||||
const newTheme = themeQuartz.withParams(this.getThemeParams(currentTheme));
|
||||
this.api.setGridOption('theme', newTheme);
|
||||
}
|
||||
|
||||
private setupThemeObserver() {
|
||||
this.themeObserver = new MutationObserver(() => {
|
||||
this.updateGridTheme();
|
||||
});
|
||||
|
||||
this.themeObserver.observe(document.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class']
|
||||
});
|
||||
}
|
||||
|
||||
async onClose() {
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
}
|
||||
if (this.themeObserver) {
|
||||
this.themeObserver.disconnect();
|
||||
}
|
||||
if (this.api) {
|
||||
this.api.destroy();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue