Theme-Switcher | Switch Themes in Sublime Text directly from the GUI

I am building an app following the Rest Countries API challenge from frontendmentor. I have run into a problem. When trying to find the border countries full name using the alpha3code, I get the error : TypeError: Cannot read property 'name' of undefined.

here's a part of the code where is function lightOn that must remove class 'light-on' when decorLight has it. Idk but its not working at all... There's similar function above that working.

I want to change with a toggle in navbar wich theme the app will apply, i can update normaly the context with the consumer and provider of defaultTheme, but my app didn't update this information. I've console logged some components to see if they're receiving my context updates, and all is normal, but in my App.tsx, the context only send the first state, and all updates isn't received by it

context.js

I have to be able to change ant design variables at runtime (not via theme less files). I've found plenty of examples of this using customize-cra and react-app-rewire-less, but none seem to work with craco. I have to use craco because I'm also using tailwindcss in this project.

What I've tried:

• antd-theme-webpack-plugin: I have access to window.less.modifyVars, but it seems to do nothing (calling it throws no errors, but the antd colors don't change);
• antd-theme-switcher: Very similar to the above, window.less.modifyVars seems to have no effect;
• antd-theme: I could not figure out how to add the AntdThemePlugin.loader in craco.config.js, and I'm not sure that is the problem, but I could not make it work.

This is the current state of my craco.config.js:

I am not able to use this switcher method in my react app. which is build using class components Suggest me way to use this switcher method of useThemeSwitcher() function in class components.

How can i Use or (write )this function in my web app.???

In this method switcher function is used in functional component..

I'm using grid-template-columns: repeat(auto-fit, 250px) to keep grid items 250px wide but automatically adjust number of row-items according to screen-width. Now I want that when I hover over an item, it expands taking a bit of its sibling's space, with its sibling getting shrunk. By console.log(), I found nextElementSibling that can be used. So I'm thinking of something like-

I am currently making an extension, and I hope I could get some practical advice on feasibility :

I want my extension to go fetch/load a local folder of custom homescreen thumbnails(top-sites), and then replace the auto-generated thumbnails in the homescreen with those it loaded. The extension would be able to read the associated domain names of the thumbnails and then replace them accordingly.

(e.g :Pinned Url : youtube.com/anything : Ok so it’s YouTube : then replace the thumbnail with “Custom_Youtube_Thumbnail.png”)

Does that seems possible to you ? (Before I dive in head first) I saw that the top-sites API is not quite available https://bugzilla.mozilla.org/show_bug.cgi?id=1246693 but maybe I’m wrong.

Extra : My extension is switching themes (like this : https://github.com/mdn/webextensions-examples/tree/master/theme-switcher ). Would it be possible to switch the thumbnails accordingly (Custom_Youtube_Thumbnail_light.png > Custom_Youtube_Thumbnail_dark.png) as i’ve made a version for each.

Would be a pleasure to hear your opinion on this, or just pointing useful resources to me, I’m not asking for a perfectly baked solution. Hope I’ve been concise.

Thanks for reading me !

I am using dark theme to switch between the light and dark theme of vmware clarity.

But the problem is dark theme doesn't get applied to my custom css classes which are obvious.

For ex. I have a custom class which sets the background of a content:

.custom-class { background: white; }

But when a dark theme is applied, I expect the background to change. But I am not sure how I can accomplish.

Stackblitz to try out: https://stackblitz.com/edit/clarity-theme-switcher-9mjqdm

For workaround, I tried to find an existing class from clarity.css file which has different background based on theme (ex. cards), but most of them are extra css property which distorts my UI.

Also the bg-classes like bg-faded, bg-primary etc. doen't have corresponding dark theme. Can any one please help me to atleast workaround this.

I have been using two dark mode buttons on my Page. One at menu bar and the other on the Footer.

However, the problem is that whenver I switch to dark mode from any one button the other button doesn't toggles itself.

Say, if I switch the night Mode from Menu bar, then the footer button will keep showing that the Day Mode is enabled.

This is my Website Test Page.

Kindly help in solving my problem with code as well.

Thanks

Code for button on Menu Bar