Flickering in default dark theme

What are the other aspects that i should think to solve this bug - Flickering in default dark theme · Issue #1451 · meshery/meshery.io · GitHub

My approach that I did to solve this bug -
→ I added $(document).ready() function in the starting of the script that contains the toggle function logic, which is a jQuery-specific function that waits for the DOM (Document Object Model) to be fully loaded and ready before executing the provided function. It ensures that your JavaScript code runs after the HTML document has been parsed and is ready for manipulation.

But, this approach does not work, I even tried to check the css files, which are responsible for this like main.css and screen.scss files but there also i didn’t find anything that can cause this bug.

@Sudhanshu_Dasgupta @vishalvivekm

@Suruchi_Kumari have you checked how meshery docs works in this case. This same problem of flickering was happening few months back when we were making docs dark as default/ You will get a reference there as docs also use jekyll.

Yeah, i checked, got the idea to solve this :slight_smile:

1 Like

@Suruchi_Kumari I have not seen what JS logic has been used but I got some idea by seeing the _includes/header.html
The Initial State of Dark mode is not set correctly, the initial state is set to the light mode which i guess is being manipulated by JS
So I guess we have to set the correct initial state in HTML and optimizing JavaScript logic