Add Change Theme option

[ngothuythanhtam]

Hi, I’ve implemented the theme change option, which allows users to easily switch between light and dark modes. The transition effect has been designed to be smooth, providing a pleasant user experience. And the toggle button can easily move on the menu. If there are any specific areas you'd like me to improve or further enhance, please let me know. I'm open to suggestions and ready to make any necessary adjustments.

[pandeyganesha]

@ngothuythanhtam

It is really good !

Suggestions :

• Please create separate files for svg images
• Please use single tap button to switch themes. Like theme changes when we tap it, theme changes back when we tap it again. Same button for both cases instead of toggle ( sorry i used toggle word earlier ) Like there is the button with image of sun on it, the same button changes into moon when tapped.
• Also keep that icon simple. Just a simple Circular button, little elevated from background like the boxes of the games. No fancy outline required.
• There is some problem with the animation. The color changes instantly when we press it and then we get the ripple animation. They theme should change with the ripple effect not before or after. It should look like as if the ripple has changed the color.
• And please speed up the animation of the ripple, like may be .600 seconds.

Please make these changes and push the changes and let me know. I'd review and merge. Feel free to ask if anything is not clear.

Thanks

[ngothuythanhtam]

@pandeyganesha Okay got it, I’ll create separate SVG files and implement a single tap button that switches between sun and moon icons. The button will have a simple circular design without fancy outlines and will change themes with the ripple effect at 0.600 seconds.

I’ll push these changes soon for your review.

[ngothuythanhtam]

@pandeyganesha I’ve updated the theme change animation based on our discussion. The color change now occurs after the ripple effect, creating a smoother transition. Could you please review the changes? I’d appreciate your feedback!

[ngothuythanhtam]

I apologize for attaching the wrong CSS file in my previous version. Let me correct it and attached the right file now.

[ngothuythanhtam]

I have updated, please review and let me know your thoughts

[pandeyganesha]

Thanks

Still two issues i can see here.

1. In white theme the color of text has become black, but the color of boxes are still black, so it doesn't look. So keep the text color white even in light theme.
2. I can still see the theme color changing instantly when the button is tapped and then a ripple effect after that. Currently it is like, first the theme color changes and then the ripple propagates, what we need is that the color changes which the ripple. As the diameter of the ripple increases, the color changes for that much ripple circle only. To see it better, set the ripple speed to 10s for debugging purposes only, and you will see that the color changes first and then the ripple is slowly increasing. That's what i am talking about

Please fix

[ngothuythanhtam]

Hi @pandeyganesha , I have fixed the problem that you required. Please check it out and let me know your consider. Thanks!

[pandeyganesha]

@ngothuythanhtam Great work you have done. You have done what you were asked for. And Now I can accept this PR. But I still can see one more improvement. You can go ahead and pick them too if you want.

Suggestions:

• The icon to switch theme should be little large, just like the restart button.
• Also that theme button is black in white theme, and white in black theme. That color doesn't match with the theme. Like we can do one of the things, either we can have its color same as box's color or similar or we can have the same color as background or transparent, like you earlier did. That was good.
• Please remove "Test" from html that you wrote but forgot to remove.
• Also it would be better if you can rename the class for the menu, They have names like rules-menu but it is not rules menu anymore.
• Also currently menu color is not matching with the theme color, we can do that too.

These are all the suggestions you can try to fix if you want. If you don't want then I can finally merge this PR as this is good enough to get merged. Let me know what you think. Thanks.

[ngothuythanhtam]

Hi @pandeyganesha I believe the current state is good enough. Please feel free to go ahead and merge the PR. Thanks again!

[pandeyganesha]

@ngothuythanhtam Thanks for contributing ! Merging the Branch.