Questions tagged [themes]
Renovating the appearance and aura of a user interface through various themes and theming techniques is closely intertwined with templating.
Seeking to personalize my theme colors in MUI5 using TypeScript, I am utilizing the createTheme function. This function requires a palette entry in its argument object, which TypeScript specifies should be of type PaletteOptions: https://i.stack.imgur.com ...
As a newcomer to BigCommerce's Stencil theme, I am looking for guidance on integrating Bootstrap into the theme for local development. Is it feasible to incorporate custom CSS and JS into the Stencil theme as well? ...
Currently, I am developing a project in React and utilizing Material-ui with JSS for styling. In Sass, we have the ability to define variables like $color: rgb(255, 255, 255) for later use. I am curious if it is possible to implement variable usage simi ...
After creating a hook that successfully toggles between light and dark modes in Chrome's Rendering panel, I noticed that the values in the ConfigProvider remain unchanged when switching themes. Can anyone suggest a workaround to modify the design token for ...
I recently created a preact-cli app and added the following code in Header.js: document.body.classList.add('mdc-theme--dark'); However, when a user tries to switch from the light theme to the dark theme, only the background of the app changes. I've notic ...
Just recently, I discovered that it is possible to utilize Node.js in conjunction with "less" to produce a customized Dojo Dijit theme. After downloading Node, I globally installed less using the following command: npm install -g less Next, I made update ...
I am facing an issue with changing the background color when in dark mode. Here is my initial code snippet... export const myThemeOptions: ThemeOptions = { palette: { mode: "light" as PaletteMode, primary: { main: ...
Exploring the Material UI theme and stumbled upon an unexpected issue. While experimenting with different palette options in palette > action, I noticed that the "active" value was affecting the icons inside a "List". Why is this happening? sandbox: http ...
I'm currently working on implementing a feature that allows users to switch between dark and light themes in my web app. The challenge I am facing is how to ensure that this theme change functionality is available throughout the entire app, not just in the ...
Seeking input on the best solution for customizing MUI themes in my React projects. Currently, I manually copy theme files from previous projects to maintain consistency in styling between MUI and my UI design. Looking to create a custom library based on M ...
I'm encountering a strange issue with my website. I have been working on this website and am looking to change the color of the main menu hover links from white to orange. Here is the CSS related to that section: .darkheader .navigation > ul > ...
Being new to the realm of react, I have been delving into the implementation of new features using Material-UI. One particular feature I am working on involves toggling between light and dark themes, with the current theme being stored locally within the b ...
Is there a way to access the theme.customElements.actionButton in MyComponent without relying on makeStyles? For instance, can I directly use className={theme.customElements.actionButton}? theme.js const theme = createMuiTheme({ customElements: { ...
One of the challenges I faced was overriding the <ExpansionPanelSummary/> component in Material UI to reduce margin. To achieve this, I utilized a theme with overrides. const theme = createMuiTheme({ overrides: { MuiExpansionPanelSummary: { ...
After setting up my WordPress site with the twentyfourteen theme and creating a child theme, I began customizing my index page to achieve a specific goal. Unfortunately, I haven't been successful so far. My aim is to have featured posts appear on my homep ...
Currently, I am utilizing JSS themes for styling my components. However, it appears that my personalized JSS theme is conflicting with the JSS theme applied to the Material UI components. The version of material-ui being used is 1.0.0-beta.22. The setup r ...
My admiration for Semantic UI and Semantic UI React knows no bounds. Not only are they phenomenal libraries, but their documentation is truly a work of art. Yet, crafting and keeping up with themes for these components can be quite the challenge. The task ...
I have a requirement where users should be able to choose their primary color from a list containing options like Blue, Orange, and Green. I have implemented the latest Material UI for the front-end. Currently, I am able to switch between light and dark t ...
Is there a way to make the md-tabs of angularJs Material have transparent background for the tab names (headers)? I've tried different methods but none have worked so far. I'm under the impression that this should be the default behavior, but fo ...
1) How can I extract a color from the palette within the Typography component? 2) Is it possible to access a specific color from the palette using an argument? Code:- 1) <Box color='common.white'> <Typography color='(I ...
I currently have material-ui@next installed and I am attempting to customize the background color of the theme. Here is what I have tried: const customizedTheme = createMuiTheme({ palette: createPalette({ type: 'light', primary: purple, back ...
I want to remove the default box-shadow for most Material UI components. Currently, I am accomplishing this by individually setting the style for each component like so: <FloatingActionButton style={{boxShadow: "none"}} /> Is there a metho ...
After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...
Seeking guidance on customizing a Material UI Theme I aim to modify the default styles for elements like <body>. Currently, at the root of my React tree: import theme from './mui-theme' ReactDOM.render( <Router> <ThemePr ...
Here is a React component using a custom Material UI theme We have the following code snippet: const getTheme = name => themes.filter(theme => theme.name === name)[0] || themes[0]; const Root = props => ( <MuiThemeProvider muiTheme={getM ...
After coming across this question, I decided to implement a theme that utilizes a shared config file that can be accessed by other themes as well. To start off, I focused on standardizing the breakpoints since they should remain consistent across all theme ...
Currently, I have a customized theme for my toolkit where I am utilizing createMuiTheme to override various properties like palette, fonts, etc. One particular challenge I am facing is in minimizing the shadow array within the theme object which contains 2 ...
As a junior TypeScript developer, I am exploring the creation of a dark mode feature using styled-components and a custom hook in TypeScript. useDarkMode.tsx import { useState } from 'react'; export const useDarkMode = () => { const [theme, setTheme ...
I'm currently working on a unique theme system implementation using a combination of Tailwind, React, and NextJS. My approach involves dynamically updating the class name of a specific tag to reflect the current theme. While this method works well for tags ...
After successfully creating a theme for my project using createTheme, I find myself wondering how to efficiently use that same theme for future projects without having to constantly copy it over. Upon reaching out to the Mui team with this question, their ...
For my react project, I decided to use Material UI as the component library. To customize the default theme provided by Material UI, I created my own color palette. However, even after adding a custom theme and wrapping my app.js with the ThemeProvider, ...
I'm struggling to position my drop-down menus correctly in my WordPress theme navigation. They are appearing far away from the nav bar and end up near the top left corner of the screen when I hover over a ul li >. Here is the CSS code I am using: # ...
I'm having trouble getting my function registered properly in WordPress, no matter how many times I try. So far, here's what I've done: Inserted code into themes functions.php function test_my_script() { wp_register_script( 'custom-script', get_template ...
I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', backgroundImag ...
After creating a theme using the createTheme method from @mui/material/styles, I attempted to apply this theme using ThemeProvider from the same package. This snippet showcases the dark theme that was created: export const darkTheme = createTheme({ pale ...
I am exploring options to customize an RStudio Editor Theme to personalize the colors. My current setup includes RStudio version 0.99.473 on Windows 10. After reviewing Any way to change colors in Rstudio to something other than default options?, which wa ...
I'm a bit confused about why we have to do this for the 10px simplification: html { font-size: 62.5%; /* 62.5% of 16px = 10px */ } Shouldn't the following code handle everything? const theme = createMuiTheme({ typography: { // Set the ...
I am exploring the idea of customizing the theme of Material UI in a dynamic way by incorporating SASS Variables that would update the Material UI theme automatically. When designing my page with Sass, I typically use variables to define colors: $primary ...
Is there a way to save the dark mode setting in localStorage? Can this approach be used for storing it? Any suggestions on how to achieve this would be appreciated. Thanks, cheers! function App() { const [darkState, setDarkState] = useState("&qu ...
I am currently working on implementing React Context in my application to eliminate the need for prop drilling. However, I encountered an error while creating the contextProvider which states: "Element type is invalid: expected a string (for built-in co ...
I have successfully implemented a PHP solution for changing themes with a cookie that remembers the selected theme color when the user leaves the site. However, I now need to switch this functionality to JavaScript while still utilizing the CSS file. How c ...
After creating some styled components, I noticed that they were not rendering correctly for me. However, when I transferred the code to a codesandbox environment (which had a material-ui button in the template), the components rendered perfectly fine. It w ...
Currently facing an issue with using the Material UI custom theme, resulting in errors with style components. Despite having already installed npm packages like "@mui/material", "@emotion/react" and "@emotion/styled", the error persists. My project utilize ...
As I work on developing an application, I am interested in implementing a unique approach... To retrieve a CSS file from the server and apply it to the activity layout. To create a string file for styling or theming and integrating it into the layout. I ...
I am currently in the process of developing a next.js application using Material-ui. I have been attempting to integrate material-ui into my project. Following guidance from the official GitHub page, I have copied the _app.js , _document.js , theme.js fil ...
Just started with typescript and feeling a bit lost, can someone offer some guidance? I'm working on a React project using material-ui with typescript. To add a new color the correct way, it needs to be added to a theme: const theme = createMuiTheme({ pa ...