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'm in need of assistance. Can someone please share with me a straightforward code example for uploading a file to local storage using the latest versions and features of NextJS 13.3? I require a form with a submit function that sends an API request ...
After successfully creating a basic todo list React app using the PERN stack, I am able to run it on my local computer. The only files I have added are within a client folder and server folder following this tutorial For more information, you can check ou ...
Here is the alignment I am aiming for with the Phone and Extension fields in the form: This is the code snippet I have written for the Phone and Extension row: <div class="row form-group"> <label class="control-label ...
I've encountered an issue with my docker-compose setup. My objective is to deploy a Next.js app using a docker-compose file. Here's the current configuration from my DockerFile: FROM node:18 WORKDIR /app COPY package.json yarn.lock ./ RUN yarn i ...
I'm currently working on my App.js file where I have defined all the routes for my application. I wanted to implement React-Router data loader functionality. import React from 'react' import { Routes, Route, Navigate, RouterProvider, createB ...
Is it possible to display a Circular progress indicator while waiting for data to populate the table? How can this be accomplished? Currently, the table shows No records to display until the data is retrieved from the server. https://i.stack.imgur.com/Ljq ...
I am attempting to utilize jQuery to modify some css styles when the screen size is smaller than a specific threshold (essentially, recreating "@media screen and (max-width: 1024px)", but with consideration for older versions of IE that do not support this ...
I'm currently facing an issue with an image in a flex container. My goal is to maintain the image's ratio when the height of the container or window is decreased or resized. Check out this sample fiddle html, body { height: 100%; } .wrappe ...
I'm struggling to get localStorage working properly on my website (). Here's what I need to achieve: A newsletter subscription pop-up on every page - this part is functioning correctly An option for users to click 'X' to close the po ...
As I was working on implementing a scene using Three.js Editor and r3f, I encountered a particular issue. Is there any problem with loading JSON data from an exported file? function Scene() { const gltf = useLoader (GLTFLoader, '/app.json') ...
I've styled two div elements with the properties below: .elem1 { width: 47.5%; margin-right: 2.5%; display: inline-block; } .elem2 { width: 47.5%; margin-right: 2.5%; display: inline-block; } Note: When I decrease the margin ...
Is there a way to execute this script only on a specific page with a particular body class? For example, if the page has <body class="category-type-plp"> How can I target my script to work specifically for "category-type-plp"? plpSpaceRemove: fun ...
During local development, all functions smoothly. The frontend communicates with Next.js API endpoints and successfully retrieves data. However, upon deployment to an IISNode server on Windows Server 2012 R2, the API calls only result in a Status Code 500 ...
Currently, I am in the process of replicating the mac OS navbar and am seeking guidance on resizing the navbar height and adjusting text size to around 12px. This is my first time working with bootstrap, so any assistance would be greatly appreciated. Addi ...
I have encountered this situation multiple times, but unfortunately, I have not been able to find a simple solution or a website that explains the process and reasoning behind it. My goal is to create a container (div) that includes both a loading element ...
Upon encountering this code snippet: import { useState } from "preact/hooks"; export default function Test() { const [state, setState] = useState(null); setState('string'); } An error is thrown: Argument of type 'string' ...
There seems to be an issue with the update depth exceeding the maximum limit. This can occur when setState is called inside useEffect without a dependency array or if the dependencies change on every render. I encountered this error even though I didn&apo ...
After fetching data from an API, I stored an array in a state. Upon trying to update a specific field within an object inside the array using user input, I encountered the error message: 'Uncaught TypeError: Cannot assign to read only property 'a ...
Just a week ago, Next13 was released and I find myself in the process of migrating an app from Next12 to Next13. My main goal is to utilize server-side components as much as possible during this transition. However, I've encountered a roadblock where ...
I am facing an issue with aligning my div elements with a 20px margin. Despite setting the margin to 20px, I notice that there are additional 4 pixels rendered when I view it on the browser. Below is the code snippet: .block{ width:50px; height:50 ...