Dark mode in the application

[Houssemdaoud]

Problem:
with the application only having light mode it makes it difficult to use in poorly lit areas

Describe the solution you'd like
I suggest that we need to add dark mode to the application because it would be less straining on the eyes with the usability in dim areas

Additional context
Before:

After:

[Houssemdaoud]

for context i used force dark pages feature in the opera GX browser but we don't expect everyone to use this specific browser.

[Cramiac]

I'd like to work on this, could you please assign it to me?

[Houssemdaoud]

I'd like to work on this, could you please assign it to me?

i am not the project owner so i cannot assign you this task but feel free to work on and share your work

[Cramiac]

I have a question, after running the application I get the login page, how do I create my credentials though, there's no option for sign up

[Houssemdaoud]

I have a question, after running the application I get the login page, how do I create my credentials though, there's no option for sign up

this is an issue idk why the register page was removed but use the demo admin log in

[marammahfoudhi]

Hello @Houssemdaoud i have checked the source code for the implementation of the styling in the application and have found that
the current styling implementation in the project relies principally on inline style attributes rather than utilizing CSS variables.

This poses a challenge when implementing features like dark mode, as each style declaration needs to be updated individually. To address this, I propose refactoring the styling to use CSS variables. This will allow for easier maintenance and the implementation of features like dark mode without extensive code changes.

Proposed Solution:

• Refactor inline style declarations to use CSS variables.

• Define CSS variables for commonly used colors, fonts, spacing, etc.

• Update the codebase to reference these CSS variables where styling is applied.

Action Items:

• Identify areas in the codebase where inline styles are prevalent.

• Replace inline styles with CSS variables where applicable.

• Test the changes thoroughly to ensure they do not introduce any regressions.

• Document the updated styling approach for future reference.

[Houssemdaoud]

Hello @Houssemdaoud i have checked the source code for the implementation of the styling in the application and have found that the current styling implementation in the project relies principally on inline style attributes rather than utilizing CSS variables.

This poses a challenge when implementing features like dark mode, as each style declaration needs to be updated individually. To address this, I propose refactoring the styling to use CSS variables. This will allow for easier maintenance and the implementation of features like dark mode without extensive code changes.

Proposed Solution:

• Refactor inline style declarations to use CSS variables.
• Define CSS variables for commonly used colors, fonts, spacing, etc.
• Update the codebase to reference these CSS variables where styling is applied.

Action Items:

• Identify areas in the codebase where inline styles are prevalent.
• Replace inline styles with CSS variables where applicable.
• Test the changes thoroughly to ensure they do not introduce any regressions.
• Document the updated styling approach for future reference.

Thank you for the feedback and i will take it into consideration for implementing this feature.
If i have any further issues i will tell you.

[manideep1428]

can i do in tailwind

[begench-g]

Hello @Houssemdaoud i have checked the source code for the implementation of the styling in the application and have found that the current styling implementation in the project relies principally on inline style attributes rather than utilizing CSS variables.

This poses a challenge when implementing features like dark mode, as each style declaration needs to be updated individually. To address this, I propose refactoring the styling to use CSS variables. This will allow for easier maintenance and the implementation of features like dark mode without extensive code changes.

Proposed Solution:

• Refactor inline style declarations to use CSS variables.
• Define CSS variables for commonly used colors, fonts, spacing, etc.
• Update the codebase to reference these CSS variables where styling is applied.

Action Items:

• Identify areas in the codebase where inline styles are prevalent.
• Replace inline styles with CSS variables where applicable.
• Test the changes thoroughly to ensure they do not introduce any regressions.
• Document the updated styling approach for future reference.

Hello,

I would like to contribute to this open-source project. Please assign this issue to me. I can solve these issues by converting all inline styles to CSS files and using CSS variables. If preferred, I can use Sass instead of pure CSS.

Thank you!"