Light Mode

[Raamzeez]

IntelliSlides was originally made in dark mode, and light mode was never added. In the next version (1.0.2), users will be able to choose between light and dark mode. Finish adding CSS for light mode. Approximately 90%+ of it has been completed already, but it would be nice to have the colors for the footer, "Auto" button, and back arrow (just to name a few) to change to light gradient colors in the app page. Also do some testing and see if there is anything missing that may also need lighter colors in light mode. Look at other CSS files to see how light and dark mode is implemented. Here is a start:

At the top of the appropriate CSS file, like App.css, there is this code:

:root {
    --txt: black;
    --input_background: white;
    --caption: grey;
    --modal_background: #d4f0f8;
}

[data-theme='dark'] {
    --txt: white;
    --input_background: rgb(64, 73, 78);
    --caption: lightgrey;
    --modal_background: #282c43;
}

These are CSS variables that are defined. The :root refers to light mode, whereas the [data-theme='dark'] refers to dark mode. You can then reference these variables in CSS classes, like so:

.text-input-caption {
    color: var(--caption);
}

This way, the color will change appropriately and automatically depending on the color mode. Keep in mind that if you want to make a change in some other page, such as the home page, then you should make changes in the Home.css file. Each CSS file corresponds to a specific page in the website.

[Raamzeez]

Just discovered that the loading state when the presentation is being created and the state after that in which "Success" or "Error" is shown has not been properly converted into using light mode. The text needs to be darker, and other changes need to be made.