Feature: Improve overall app design (look and feel)

[hatemhosny]

Problem Statement

The overall visual design (look and feel) of LiveCodes app and embedded playgrounds needs improvement.
Acknowledging that this is not an area I'm good at, I would very much appreciate help here.

This would also be related to allowing the app to have themes that can be set/changed by users #415 .
The app styles are defined here: src/livecodes/styles/app.scss

Let's redesign LiveCodes in LiveCodes!

This is playground for a mock of the LiveCodes app (HTML structure with just enough TS to allow navigating through different screens), which should allow editing styles without having to keep rebuilding the app:
https://livecodes.io/?x=id/rwurcbpr5ez

Please edit the styles to make new a design then share the playground URL below.

Best designs will be included in LiveCodes as official themes. 🎉

Light/dark modes, app screens and embed preview can be configured by changing the variables at the top of TypeScript code. Please also note that the mock allows navigating through different screens by selecting them from app menu and toolbar buttons. Split panes can be resized.
Obviously this is not a functional app, it is just a mock for the UI for the ease of design changes.

Guides

• Feel free to use whatever styling language (CSS/SCSS/Less/Stylus/...etc). SCSS is preferred.
• No (or minimum) changes to HTML and TypeScript. I'm open to discussion if this is really needed.
• Cannot use Tailwind CSS or similar (because we do not want changes to HTML).
• The design has to be responsive for different screen sizes.
• Each design needs to have light and dark modes (using CSS variables).
• Bonus for generous use of CSS variables (which allows users to have variants of the design as custom themes when this feature is implemented, see Feature: Global Themes #415 )

[AmrTamer23]

Is there is a room for dark mode only theme? Wanted to have my favorite theme Vesper in live codes, and its core is a dark mode only.

[hatemhosny]

Is there is a room for dark mode only theme? Wanted to have my favorite theme Vesper in live codes, and its core is a dark mode only.

@AmrTamer23
I believe you are talking about code editor themes. Yes, editor themes can be dark/light only. You can find the full list of editor themes in Editor Settings screen (app menu -> Editor Settings) (direct link).
LiveCodes uses Monaco editor (also CodeMirror6 and CodeJar/PrismJS). We need to have the theme available for any of these.

However, this issue is about LiveCodes App themes, not for code editors.