Enable Themes

[malay77patra]

It is hard to study with light mode enabled, would you prefer a theme toggle button in your site if i make a pull request to it ?

[Mabi19]

Go for it! I'd love to have theming included.

Note that I will be redoing the build system eventually (I want to make something more general out of this setup), but that's way too far off into the future to impede on a thing like this.

[malay77patra]

Problem: The issue is that we have some <img src="svg-url" /> tags that load SVGs from assets. However, if we need to toggle the page's theme, we must also be able to change the color of the SVG paths. Unfortunately, when we embed the SVG using an img tag, we cannot achieve this.

Possible solutions:

• Use a filter to generate the expected color.
• Utilize different SVG files for different themes.
• Make the SVG inline or include it directly inside the component's HTML.

What do you think is the best approach, or do you have any other ideas?

[Mabi19]

I think that using CSS filter would be best here, as it doesn't require maintaining several SVG files per icon and doesn't leave the component markup bloated and hard to read.

[malay77patra]

Hi, thanks for your quick response, I got your point and made modifications accordingly.
You can checkout the pull request now .

[malay77patra]

Hi, I guess this will be better to let you pick the color pallet, choose as you like : https://choosetheme.malaypatra.repl.co/

[Mabi19]

I think that what you've prepared there is a bit overkill. I think that both the themes only need minor tweaks, so I'll list them here:
(sorry for being this pushy, but I want the article to look good!)

Light theme

• Component background color should be #ffffff
• Tables should be the same colors as in my version:
  • Header background #516475, text whitesmoke and bold, black border around header cells
  • 2n+1 cells: background #d4dbe2
  • 2n cells: background #f5f5f5
  • Normal cell border is darkgray

Dark theme

• Accent color should be a bit more mild; I think that #546f80 would work better
• Tables:
  • Header background #415c73, text whitesmoke and bold, lightgray border around header cells
  • 2n+1 background #303742
  • 2n background #171f24
  • slategray border around normal cells

[malay77patra]

No problem, I am currently in my learning phase, I need suggestions from devs like you to improve myself. Appriciate all your words !
And, Thank you for response I can continue now properly !
(talking about the page i preperaed, I was just hopping around, It's totally fine )

[malay77patra]

So far it looks like this: https://malay77patra.github.io/numbers/
source: https://github.com/malay77patra/numbers

And there are three more small things I would like to ask your color preferences in dark mode.

• url color
  

• Component border
  

• Bits bg