move all theme-relevant inline CSS styles from html files to theme/variables.scss about vodle HOT 22 OPEN

i have no real good idea how to do this best... probably by introducing a lot of unique css classes?

from vodle.

Hey! I am interested in solving this issue, can you please assign me this issue and give me brief about the requirements.

from vodle.

Hi @Kundan1804, thank you for this offer!
I want to provide a dark theme that ideally should show when the user has chosen dark theme as their browser default.

As a preparation for this all color specifications need to be in one place.
In Ionic, that place is apparently src/theme/variables.scss.

Currently, some colors are however specified directly as RGBA color strings in inline CSS styles in the various page HTML templates such as src/app//.html and maybe other HTML files, e.g. background-color: #3465a4; or color: RGB(0, 0, 0) or the like.
Maybe some colors are even specified in the accompanying typescript files.

All these explicit color specifications should be replaced by a suitable reference to the file variables.scss.

The easiest way for this (but I'm not a CSS expert!) is maybe to simply replace the RGBA color string in the HTML and TS files by a reference to a CSS variable, as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties .

If the respective color already has a name in variables.css (such as --ion-color-...), just refer to that variable, and otherwise define a new variable named --vodle-color-.... The way to reference it is then probably var(--vodle-color-...) in HTML inline styles. In typescript, it is probably like described here: https://www.w3schools.com/css/css3_variables_javascript.asp

A further improvement could be to also replace some inline CSS stylings by CSS classes, but that is probably not strictly necessary to solve the issue.

(Replacing other atttributes such as font-sizes or spacings is probably not necessary to enable a dark theme, so let's not do that for now.)

from vodle.

Thanks @mensch72, I Will start working on it today. Can you please tell me name of your main home page file so that i can view the current theme scenario and classes

from vodle.

Hi @Kundan1804, super!
There is a "landing page" (and the other issue is about that landing page) and there is the actual "app".

This issue is not about the landing page but about the app, which is implemented in Angular, so there is no "main home page file" for it, but all the HTML is generated by the Angular runtime from various Angular templates. These templates live in the subfolders of the src/app folder and they also have the ending .html. Basically each separate page or dialog in the app has its own "component", each component has one subfolder in src/app, and each such subfolder contains the template *.html and corresponding typescript logics *.ts.

CSS styling in Angular mostly works via CSS classes, but I have also used a lot of inline CSS styles. The classes make use of the colors defined in the :root section of src/theme/variables.scss with names --ion-color-.... Ideally one would place additional color names with names like --vodle-color-... in that same :root section of src/theme/variables.scss. The person who will then later implement a dark theme can then build on that and define the same list of variables in the later section of src/theme/variables.scss that starts with @media (prefers-color-scheme: dark) and is currently commented out.

Does that answer your question?

from vodle.

Okay thanks I'll look into it

from vodle.

Dear @Kundan1804 , just asking whether you are making any progress or need any more information?

from vodle.

I am sorry @mensch72 i tried my best but i am unable to take out more time from my college work. I won't be able to solve the issue, please unassign me.

from vodle.

Hi @Kundan1804 , that is a pity but understandable. Don't worry.

from vodle.

@mensch72 I am excited to solve this. Would you mind assigning me to this issue?

from vodle.

That's amazing! Thank you so much. I will assign you asap. Please get back to me if anything is unclear.

from vodle.

Thank you, @mensch72! I will let you know if I come across any questions.

from vodle.

Hello @mensch72. I have been working on this issue, but I just found out that I have to go in for emergency surgery/medical treatment, and am not sure when I will be able to get back to working on this. Feel free to remove me from this issue. I apologize for any inconvenience.

from vodle.

Dear Courtney (@Courtney-Lippman), please don't apologize for prioritizing your health! I wish you all the best for your treatment!

from vodle.

Hi,

I'd like to get started on this issue. Please assign this to me.

from vodle.

Dear Joshua, thank you very much for your commitment! Looking forward to getting your contribution. This will enable us to implement a dark theme later on.

from vodle.

Hey @joshuakatt , how is it going? Do you need any additional information?

from vodle.

Hi, I;m halfway done I'd say. I do want som more clarification. I'm not adjusting or changing anything in the variables.scss file, nor am I changing the individial css files, I'm simply using the variables in the variables.scss files for all in-line colors and explicit styles, right?

from vodle.

Good to hear that you have already done this much!

I think there are many "hard-coded" styling things in the HTML files that have no current entry in variables.scss yet, in particular colors, but also font sizes, positioning, and spacing such as padding and margins.

So I think you might have to add entries for these things in variables.scss and then replace the hard-coded specifications in the HTML by those new css variables.

This would then make it possible in a later step to implement a dark theme or a "large" theme, etc, simply by providing a corresponding version of variables.scss.

However, this is based on my half-baked understanding of CSS themes, so I might be wrong about some details here...

from vodle.

Is this issue still open to work on ?

from vodle.

Dear @karanvishesh , thank you for your interest! @joshuakatt had started working on this and made a PR (#253) to which I had requested changes. Unfortunately, I have not heard back from them however, so I assume it is still unresolved. I have asked them again now to clarify.

from vodle.

Dear @karanvishesh , I have the impression that @joshuakatt might have given up. At least they have not responded to my request for an update. Sorry this took so long! If you are still interested to contribute to this issue, you could take this up, maybe starting from the above-mentioned PR (#253) if that seems helpful.

from vodle.