dark-theme | customizable dark theme extensions for popular services | Theme library

I know useContext is not specifically for components due to functionality, but I am trying to use ThemeContext and I know there is a way around it here. I saw the documentation for it where they use a class component but still could not make much sense of it.

I have included a snack example here where classComponent.js is what I want to implement. I would like it to render the same as Friends.js but using a class component rather than a function. In this same snack, I would like toggle.js to be a class component.

This is the code I am trying to replicate.

I have included a snack expo here that reproduces the exact layout of my project. App.js -> stack of screens. I am trying to figure out the best way to toggle between light theme and dark theme. I do not care for the ios dark theme setting to trigger this, for now, I just want the button to trigger it.

I would like there to be a button displayed on my home screen that when pushed toggles to the theme it is not currently on. I originally wanted to use theme provider to set my colors for each theme and then call that color on each page rather than the hard coded color but have failed to do so.

When you have a stack of screens being called in a tab navigator, what is the best way to use a dark theme?

I am trying to make Dark Mode for my website, but my CSS file kept on saying:

• to include an RBRACE ( } ) for every line
• line 9 is saying put a colon in character 5
• it says rule is empty for lines 5, 16, and 20
• for line 36, it says Expected ( | inherit) but found 'var(--text-color)'
• for line 26, it says that 'The universal selector (*) is known to be slow."

Does anyone know how to fix this mess?

Thanks in advance for responding.

Here is my code for reference.

I have 2 themes: 'light-theme', 'dark-theme' I would like to set the according to a value i have in my vuex store. Like darkMode: true

How can i set the class reactively like that?

(using vue3)

This is a valid sass code.

Currently I have an app component that has a sidenav and my router-outlet in the sidenav content. In this component I manage the app theme by adding or removing the darkMode class in my style.scss.

Is there a way to control what background-image I'm using?

What if I also wanted to control the background image based on what component is opened on the router-outlet? Would that be possible to? Maybe not setting the background-image in the app component but on the opened component instead

I'm using Bootstrap cards and I want to separate them by a 2px margin.

Nonetheless, when I apply it (either with Bootstrap's margin classes or directly on my stylesheet) flex-wrap triggers and a card goes one row down.

How could I deal with this behavior?

Should I give a max-width to the cards?

I just got a new PC and downloaded visual studio code. I'm trying to run the exact same plots as the code I had on my other PC (just plt.plot(losses)) but now matplotlib seems to have a dark background instead of white:

I found this and this that had opposite problems. To clarify, I'm asking how to change the matplotlib background plots to white (note that in my other machine I didn't have to hard code any matplotlib background information so I think it's a visual studio problem, but couldn't figure it out)

I'm trying to toggle between a moon icon and a sun icon on a dark mode project. The original javascript code was simply a button that switched from day mode to dark mode. After some research, I ended up with the following code, which "kinda" works but is sketchy; it switches from day mode to dark mode and the icon toggles from moon to sun BUT, when I come back to the page after setting my preference as dark mode (or refreshing the page in dark mode), the icon disappears.