Is there a way to implement theming with color picking for elements? Check out the example here.
I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach.
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Example:
:root.green{
--bg-color: green;
}
:root.red{
--bg-color: red;
} */
.slate[data-theme="light"] {
--bg-color: #E2E8F0;
}
.slate[data-theme="dark"] {
--bg-color: #EBF0F7;
}
If you're looking to implement dark and light themes in your project, consider using the tw-colors package. It allows you to create two separate themes for dark and light modes by defining opposite colors with the same names.
For example, in your tailwind.config.js file, you can set up your themes like this:
plugins: [
createThemes({
light: {
white: '#ffffff'
...
}
dark: {
white: '#000000'
...
}
By using the -white color class (e.g. text-white), the color will automatically switch based on the selected theme. You can also use dark: and light: prefixes to define different colors as needed.
Additionally, tw-colors saves the user's theme preference in localStorage, ensuring that the theme remains consistent across page refreshes.
Currently, I am in the process of creating something similar. However, I have managed to adjust the color scheme for the current page only by incorporating specific classes that are accessible from shadcn.
// global.css
.light-blue {}
.dark-blue {}
.light-rose {}
.dark-rose {}
In addition, I have developed a component called ThemeChanger.tsx:
"use client";
import React, { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
import { SunIcon } from "@radix-ui/react-icons";
import { MoonIcon } from "@radix-ui/react-icons";
function ThemeChanger() {
// Functionality goes here
}
export default ThemeChanger;
I believe it would be simpler for you to inspect the elements rather than me writing the code, so I have provided a link: music band site. Now onto the issue: When the window width is reduced in Firefox, you will notice that the social icons in the yellow ...
click here for image description I need assistance with implementing scroll functionality on this component in mobile view to prevent overflow and maintain responsiveness. Specifically, I want the component to scroll horizontally (scrollX) without causing ...
Currently working on a React-based to do list app, I've run into an issue where checking off one item causes the one below it to also be checked: https://i.stack.imgur.com/fxitJ.gif Even after trying to introduce a delay between checking off the ite ...
When viewing the code below, you may notice that it displays correctly in Chrome or IE with the image set to be 200px wide. However, in Firefox and Opera, the max-width style seems to be completely ignored. Is there a reason for this inconsistency across b ...
I am currently developing an application with Next.JS where users can navigate to a page that displays a table of 'Projects'. Above the table, there is a button that, when clicked, should open a modal for adding a new project. Although I have de ...
I'm in the process of integrating a third-party script into my Next.js website. This particular script adds an iframe right below its corresponding script tag. Therefore, it is crucial for me to have precise control over the placement of the script ta ...
When working with my menu, I face a variety of issues. First and foremost, within the initial RETURN section, there is a TREEITEM with a LISTITEM and a LISTITETEXT. I have included an OnClick event in the LISTITETEXT so that if the menu's id matches ...
Can someone please help me with a shopping cart issue I'm facing? My items keep duplicating in the cart and I can't figure out why. Any guidance would be greatly appreciated! Here is a snippet of my code : CartReducer.js import { createSlice } ...
I am currently tackling a challenge from FrontEndMentor that involves mapping through a Data.js file and displaying the content. The next step is to filter those results based on different categories by clicking on corresponding buttons. Below is my App.js ...
I am working with an authSlice const authSlice = createSlice({ name: 'authStore', initialState, reducers: { logout(state = initialState) { return { ...state, isAuthenticated: false }; }, }, extraReducers: (builder) => { ...
I have encountered an issue while trying to update/modify data that has already been uploaded in a reactjs project using mongoDB as the database. Whenever I attempt to update the data, an error is displayed. How can this problem be resolved? https://i.sta ...
Recently, I've been attempting to develop a frontend using nextjs that communicates with a Java backend. To achieve this, I'm utilizing the npm package next-http-proxy-middleware. However, it seems like either my request body is getting lost in t ...
I am searching for a way to synchronize the database among multiple developers in our office. Currently, we are using Wordpress and MAMP, but we plan to transition to MAMP/Headless WP and NPM/React in the future. We would like to utilize Appveyor (or a si ...
Whenever I try to install a package using npm i in my terminal, I keep encountering this error message: npm ERR! code EINVALIDPACKAGENAME npm ERR! Invalid package name "react-datepicker" for package "react-datepicker@^4.8.0": names ca ...
As a newcomer to web design, I am excited that my site is almost ready to go live. However, I have encountered some significant issues right before launch. When the site is zoomed in or out, the content becomes misaligned at certain zoom percentages. Add ...
My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...
Running into an issue with my React app where I am unable to render a PNG file from the "src" folder. The error message pops up on Google Chrome browser, showcasing the problem: https://i.stack.imgur.com/y8dJf.png Unfortunately, my project doesn't ha ...
I'm looking to create a button on my webpage using an image that will link to other pages. I want the flexibility to use both small and large text on this button. The specific image I want to use is: So far, I've attempted some coding but haven ...
I'm encountering an error while trying to create a React app. Despite trying the following solutions, none of them worked for me: I updated my npm using the command below npm i -g npm@latest npm cache clear --force yarn cache clear npx create-rea ...
I am currently developing a JavaScript application and came across a helpful library called qtip2. My objective is to have different information displayed when the user hovers over each cell in the table. The qtip2 library I mentioned earlier can display ...