Cyberchef: Feature Request: Dark theme

[JakeAngell]

Can we have a dark theme please?

[mattnotmitt]

Looking into making this now - any ideas on the specific implementation, especially for when the app is compressed into cyberchef.htm @n1474335?

[n1474335]

Hi @artemisbot,

Glad to hear you want to take a look at this. There are several considerations to be made. Here are my thoughts:

• The CSS for CyberChef leaves a lot to be desired, however I did build it with themes in mind, so if you take a look in src/css/themes you'll find the classic.css stylesheet. Creating a dark theme should be as simple as going through this and changing colours and fonts as appropriate.
• For users to choose their theme, it would make sense to have a dropdown in the Options pane where they can choose the theme name. This should then be saved to their localStorage so that it is loaded automatically when they visit in future. This actually shouldn't be too difficult as there is already functionality in OptionsWaiter.js to handle all this. You'll just need to create a dropdown in index.html and add a default value of theme in main.js.
• The real difficult part is working out how to effectively load the CSS, without having to make a call to an external static resource. One option would be to load every theme stylesheet into a JS string (maybe using a Grunt template as part of the build process) and then dynamically creating a style tag and loading the CSS that way, depending on which theme the user has chosen.

If you'd rather just create the stylesheet and leave the loading problem to someone else, that's fine (and still very useful). I'll probably try to get this sorted out at some point if no one else does it.

[sroberts]

@n1474335 Would at least a sample stylesheet help? My JS isn't great (then again, neither is my CSS) but I figure I could at least take a shot at it.

[tlwr]

I say give it a shot!

If @n1474335 is too busy occupied with babel or the client/server implementation, I can have a go at implementing the theme changer dropdown and the theme-packing grunt task.

[n1474335]

Yes, please do go ahead and see what you can do. I threw together a dark theme based on Visual Studio Code a little while ago and it looked great, but it wasn't very comprehensive and needs a lot more work. Like I said in the previous comment, the whole CSS model needs to be improved, so don't worry if it ends up being too convoluted - I will sort it all out in the coming months if no one gets to it before me.

Even if you only get a partial stylesheet, send it through and we can build on it.

[sroberts]

@n1474335

[n1474335]

Completed in #113.