Compare commits

...

2 Commits

Author SHA1 Message Date
Maxime Beauchemin
e6657ab2a7 attempting to revert colors 2025-07-09 17:16:27 -07:00
Maxime Beauchemin
f4cb30a312 feat: support theme-aware (dark mode) sequential color palettes
Opened this PR as a POC to see whether/how we can make sequential color palettes work in dark mode, and it seems to work out of the box.
2025-07-09 15:53:37 -07:00
2 changed files with 34 additions and 3 deletions

View File

@@ -17,19 +17,50 @@
* under the License.
*/
import { themeObject } from '@superset-ui/core';
import tinycolor from 'tinycolor2';
import makeSingleton from '../utils/makeSingleton';
import ColorSchemeRegistry from './ColorSchemeRegistry';
import SequentialScheme from './SequentialScheme';
import schemes from './colorSchemes/sequential/d3';
function transformColor(color: string): string {
const tc = tinycolor(color);
if (!tc.isValid()) return color;
const hsl = tc.toHsl();
return tinycolor({
h: hsl.h,
s: hsl.s,
l: 1 - hsl.l,
a: hsl.a,
}).toHexString();
}
function themeAwareColors(colors: string[]): string[] {
if (!themeObject.isThemeDark()) {
return colors.map(c => tinycolor(c).toHexString());
}
return colors.map(transformColor);
}
class SequentialSchemeRegistry extends ColorSchemeRegistry<SequentialScheme> {
constructor() {
super();
schemes.forEach(s => this.registerValue(s.id, s));
this.setDefaultKey('SUPERSET_DEFAULT');
}
this.registerValue('SUPERSET_DEFAULT', schemes[0]);
override get(key: string): SequentialScheme {
const base = super.get(key);
if (!base) throw new Error(`Unknown sequential color scheme: ${key}`);
return new SequentialScheme({
...base,
colors: themeAwareColors(base.colors),
});
}
}
const getInstance = makeSingleton(SequentialSchemeRegistry);
export default getInstance;

View File

@@ -23,7 +23,7 @@ const schemes = [
{
id: 'blue_white_yellow',
label: 'blue/white/yellow',
colors: ['#00d1c1', 'white', '#ffb400'],
colors: ['#00d1c1', '#ffffff', '#ffb400'],
},
{
id: 'fire',