Is dark mode supported?

[galeo]

RDKit supports setting dark mode with the setDarkMode method. How can I do this in rdkit.js?

Thanks.

[galeo]

With the RDKit documentation and its source code, I have solved this problem.

[sgoodrow-zymergen]

Can you share your solution please?

[galeo]

You can have a look at the get_svg_with_highlights method in rdkit source code https://github.com/rdkit/rdkit/blob/32655f5365e363ce13bd6b28e2e9e2544f8680bd/Code/MinimalLib/minilib.cpp#L105. The colour palette can be defined in MolDrawOptions. It has a default dark colour palette, see assignDarkModePalette.

[MichelML]

@galeo this is awesome, can you post your code snippet to show how you achieved this? I'll consider adding it in the examples of rdkitjs.com

[MichelML]

@Aenardhil you might be interested in this thread

[MichelML]

@galeo I reopened the discussion for you to guide us through your implementation, please share a code example if you are able and authorized to 🙏

[Aenardhil]

Hello @galeo, @MichelML,

It worked for me, for the colouring part but, since I'm using typescript, the type validation it is giving me this message:

"error TS2322: Type '{ bondLineWidth: number; width: number; height: number; addStereoAnnotation: true; atomColourPalette: { '-1': number[]; 0: number[]; 1: number[]; 6: number[]; 7: number[]; 8: number[]; 9: number[]; 15: number[]; 16: number[]; 17: number[]; 35: number[]; 53: number[]; 201: number[]; }; ... 4 more ...; variableAttachm...' is not assignable to type '{ bondLineWidth: number; width: number; height: number; addStereoAnnotation: boolean; }'.
Object literal may only specify known properties, and 'atomColourPalette' does not exist in type '{ bondLineWidth: number; width: number; height: number; addStereoAnnotation: boolean; }'."

I'm using "import type { RDKitModule } from '@/typescript/rdkit-js';" with node "@rdkit/rdkit": "^2022.9.4-1.0.0"".

I don't know if it is solved in later versions.

Thahk you very much.

[galeo]

I think the easiest way to fix this error is to disable the type checking for it.

[Aenardhil]

Hi,

I found my error, I assumed that molecules details is an object with a defined type but as far as I know it doesn't, because draw_to_canvas_with_highlights expects a string.

So it really worked smoothly.

Thank you!

[Aenardhil]

Hi @MichelML,

I'm using Vue and what I did is this:
`
interface AtomColourPalette {
[key: string]: number[],
}

const darkModeAtomColourPalette: AtomColourPalette = {
'-1': [ 0.8, 0.8, 0.8 ],
0: [ 0.9, 0.9, 0.9 ],
1: [ 0.9, 0.9, 0.9 ],
6: [ 0.9, 0.9, 0.9 ],
7: [ 0.33, 0.41, 0.92 ],
8: [ 1.0, 0.2, 0.2 ],
9: [ 0.2, 0.8, 0.8 ],
15: [ 1.0, 0.5, 0.0 ],
16: [ 0.8, 0.8, 0.0 ],
17: [ 0.0, 0.802, 0.0 ],
35: [ 0.71, 0.4, 0.07 ],
53: [ 0.89, 0.004, 1 ],
201: [ 0.68, 0.85, 0.90 ],
};
`

mdetailsDarkMode: { bondLineWidth: 1, width: this.size, height: this.size, addStereoAnnotation: true, atomColourPalette: darkModeAtomColourPalette, backgroundColour: Constants.hexToRGBRatio(Constants.PRIMARY_LIGHTENED_COLOR, this.opacity), annotationColour: [ 0.9, 0.9, 0.9, 1 ], legendColour: [ 0.9, 0.9, 0.9, 1 ], symbolColour: [ 0.9, 0.9, 0.9, 1 ], variableAttachmentColour: [ 0.3, 0.3, 0.3, 1 ], },

mol.draw_to_canvas_with_highlights(canvas, JSON.stringify(this.mdetailsDarkMode));

[dipanghosh]

Thank you very much for this. The docs do not say atomColourPalette is supported, but this works perfectly.

I implemented this in nextJS the exact same way. Works perfectly.