I'm creating a React Notes App with the feature to switch between Dark/Light Mode.
So basically I've written a React Toggle to switch between Dark and Light Mode.
But apparently the code is only switching the background and h1 color and not switching the notes color as I want .
Apparently the component color doesn't seem to change.
Toggle.js toggles the classname between 'theme-dark' and 'theme-light' and in turn toggles the CSS too. But it doesn't seem to change the CSS of notes component.
Toggle.js:
import React, { useEffect, useState } from 'react';
import '../index.css';
import { setTheme } from '../theme';
import { MdDarkMode, MdOutlineDarkMode } from 'react-icons/md'
function Toggle() {
const [ togClass, setTogClass ] = useState('dark');
let theme = localStorage.getItem('theme');
const handleOnClick = () => {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
setTogClass('light')
} else {
setTheme('theme-dark');
setTogClass('dark')
}
}
useEffect(() => {
if (localStorage.getItem('theme') === 'theme-dark') {
setTogClass('dark')
} else if (localStorage.getItem('theme') === 'theme-light') {
setTogClass('light')
}
}, [theme])
return (
<div className="container--toggle"> {
<button
id="toggle"
className={"toggle--button "+togClass}
onClick={handleOnClick}
>
{togClass === 'light' ? <MdOutlineDarkMode size='1.5rem' /> :
<MdDarkMode size='1.5rem'/>}
</button>
}
<label htmlFor="toggle" className="toggle--label">
<span className="toggle--label-background"></span>
</label>
</div>
)
}
export default Toggle
theme.js
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function keepTheme() {
if (localStorage.getItem('theme')) {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
} else if (localStorage.getItem('theme') === 'theme-light') {
setTheme('theme-light')
}
} else {
setTheme('theme-dark')
}
}
export {
setTheme,
keepTheme
}
I'm certain the React Toggle.js works fine. Do note that I'm a newbie in CSS Variables ( you can probably tell ) and I think that's where the code messes up.
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.theme-light {
--dark-text: black;
--light-text: #5E4B56;
--dark-background: #FFCFDF;
--light-background: #FFCFDF;
--accent: #DBE7E4;
--button-border: #5E4B56;
--note: #E0F9B5;
--note-new: #A5DEE5;
}
.theme-dark {
--dark-text: #EEEEEE;
--light-text: #F9F8F8;
--dark-background: #222831;
--light-background: #586F7C;
--accent: #B8DBD9;
--button-border: #B8DBD9;
--note: #EEEEEE;
--note-new: #00ADB5;
}
#root {
background-color: var(--dark-background);
color: var(--dark-text);
}
.toggle--button {
cursor: pointer;
}
.toggle--button.dark {
border: none;
--dark-background: #222831;
background-color: var(--dark-background);
}
.toggle--button.light {
border: none;
background-color: var(--dark-background);
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas,
'Courier New', monospace;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.container {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
textarea {
color: var(--dark-text);
border: none;
resize: none;
background-color: var(--note-new);
}
textarea:focus {
outline: none;
}
.save {
size: 10rem;
background-color: #e1e1e1;
border: none;
border-radius: 15px;
padding: 5px 10px 5px 10px;
}
.save:hover {
background-color: #ededed;
cursor: pointer;
}
.note {
color: var(--dark-text);
background-color: var(--note);
border-radius: 10px;
padding: 1rem;
min-height: 170px;
display: flex;
flex-direction: column;
justify-content: space-between;
white-space: pre-wrap;
}
.note-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.notes-list {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(
auto-fill,
minmax(250px, 1fr)
);
}
.note.new {
background-color: var(--note-new);
}
.delete-icon {
cursor: pointer;
}
.search {
display: flex;
align-items: center;
background-color: rgb(233, 233, 233);
border-radius: 10px;
padding: 5px;
margin-bottom: 1.5em;
}
.search input {
border: none;
background-color: rgb(233, 233, 233);
width: 100%;
}
.search-icons {
color: black;
}
.search input:focus {
outline: none;
}
Light Mode:
Dark Mode:
I want the dark mode to switch colors of notes from light mode ones.
This is how I want it to look:
Error on my side, my App.js file had classname set to theme-light which prevented overriding.
Related
I am trying to figure out a way for me to add some jpgs to my cats gallery. My layout includes images from one of three categories. I am using vite-react scaffold. I thought I could find a way to create one folder for each category, add all the jpgs in that folder, and then drum up some JSX to handle rendering. This is what I have so far. PS - the console is logging nothing - no errors or my attempt to confirm all the values were logging
// import { useState } from 'react'
import * as allFloofs from './assets/floofs/floofs'
function App() {
// const [images, setImages] = useState(false)
for (var i = 0; i < allFloofs.length; i++) {
let src = `${allFloofs[i]}`;
console.log(allFloofs[i])
let floof = new Image();
floof.src = src;
querySelector.image - container.appendChild(floof);
}
return (
<div className = "App" >
<div className = "image-container" >
<div> {
/* <Floofs/>
<Sleps/>
<Snyks/> */
}
</div>
</div>
</div >
)
}
export default App
.App {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h2 {
text-align: center;
}
.image-container {
width: 80%;
margin-left: 10%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.image-container div:first-child {
grid-column-start: 1;
grid-column-end: 3;
}
.image-container div:last-child {
grid-row-start: 2;
grid-row-end: 5;
}
.image {
width: 100%;
height: 30px;
}
.image img {
width: 40%;
height: 40%;
}
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
#media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/src/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> 🐈 F.I.R 🐈 </title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
dir layout
I'm trying to add Dark Mode to my website, which is built in React, that I've created, and while I don't want to create an actual Dark Mode, I want to add lazy dark mode using filter: invert(1) in CSS.
The issue came mainly when trying to communicate between the TSX file and CSS file to check which mode do I want to show, and trying to use data-theme doesn't seem to work for me.
My App.tsx is as follows:
function App() {
const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const [theme, setTheme] = useLocalStorage('theme', defaultDark ? 'dark' : 'light');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
console.log(theme);
}
return (
<div className="outer-container" id="outer-container" data-theme={theme}>
<Sidebar />
<button onClick={toggleTheme}>
Click here to switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
<div className='page'>
<Outlet />
</div>
<Footer />
</div>
);
}
export default App;
(I do have certain imports but all the components are different file)
My App.css is as follows:
.outer-container {
display: flex;
flex-direction: column;
min-height: 85vh;
}
.page {
flex: 1;
}
footer {
position: relative;
margin: 0 1rem;
}
footer .row {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
hr {
height: 0px;
margin: 0;
border: 1px solid #000000;
}
p#p1 {
position: absolute;
width: 20vw;
height: 34px;
left: 19px;
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 95.52%;
/* or 12px */
color: #000000;
}
p#p2 {
position: absolute;
width: 20vw;
height: 34px;
left: calc(50vw - 10vw);
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 95.52%;
/* or 12px */
color: #000000;
}
p#p3 {
position: absolute;
width: 20vw;
height: 34px;
left: calc(100vw - 20vw);
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 95.52%;
color: #000000;
}
div.main {
position: absolute;
width: 20vw;
height: 34px;
top: 5vw;
left: calc(100vw - 20vw);
}
a.social {
margin: 0 1rem;
transition: transform 250ms;
display: inline-block;
align-items: center;
}
a.social:hover {
transform: translateY(-2px);
}
a.youtube, a.youtube:hover {
color: #eb3223;
}
a.github, a.github:hover {
color: #24292e;
}
a.discord, a.discord:hover {
color: #7289da;
}
html[data-theme='dark'] {
filter: invert(1) hue-rotate(180deg);
}
(I'm not sure if it matters and hence I've shown the whole thing, but the important thing is the last one; also I do have some CSS for internal components)
However, even so, when I click on the button, nothing changes, even though the value of the theme changes. How would I fix this?
Thank you :)
I am trying to make a button that allows the user to switch between light and dark theme. The method I am using is to change the className of my App div. All of the other components in my project are inside of the App component. Then in the individual CSS files for the components I first select the className of the App div which is either .light or .dark. Then I write the name of the component that I want to set a theme color to. For example:
.light p {
background-color: white;
}
However, this doesn't work.
Here are some of the files:
/*App.js*/
import { useState } from "react";
import TaskPage from "./pages/taskPage";
import { fas } from "#fortawesome/free-solid-svg-icons";
import { library } from "#fortawesome/fontawesome-svg-core";
import { MainContextProvider } from "./store/MainContext";
library.add(fas);
function App() {
const [theme, setTheme] = useState("light");
const switchTheme = () => {
setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
};
return (
<MainContextProvider>
<div className={`App ${theme}`}>
<div className="pageTop">
<h1 className="title">Task Board</h1>
</div>
<button className="button" onClick={switchTheme}>
Change theme
</button>
<TaskPage />
</div>
</MainContextProvider>
);
}
export default App;
/*index.css*/
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap");
.App {
overflow-x: hidden;
padding-bottom: 40px;
height: 100%;
width: 100%;
}
.light {
background-color: #fcfcfc;
}
.dark {
background-color: #181A1B;
}
.title {
font-family: "Roboto", sans-serif;
font-size: 50px;
font-weight: 700;
text-align: center;
margin-top: 40px;
text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
}
.light .title {
color: black;
}
.dark .title {
color: white;
}
.pageTop {
margin-bottom: 50px;
}
/*todo.module.css*/
.taskCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 340px;
height: 260px;
min-width: 340px;
min-height: 260px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
border-radius: 12px;
padding: 14px;
box-sizing: border-box;
}
.light .taskCard {
background-color: white;
}
.dark .taskCard {
background-color: #2B2E30;
}
I used this sandbox as an example: https://codesandbox.io/s/stupefied-jackson-0ynz6?file=/src/App.js
I am a beginner with React.js
When I shrink the page vertically, the flex container become outside the flexbox.
All of my content is supposed to be in the grey area.
I tried to change the height property on css class .App and .App__main, but it doesn't works.
App.js
import "./styles.css";
import Content from "./Content";
export default function App() {
return (
<div className="App">
<div className="App__main">
<Content />
</div>
</div>
);
}
Content.js
import React from "react";
import List from "./List";
import "./styles.css";
export default function Content() {
return (
<>
<div className="layout__container">
<h1 className="layout__container__title">Media</h1>
<List />
</div>
</>
);
}
List.js
import "./styles.css";
import React, { useState } from "react";
export default function List() {
const [list, setList] = useState([
{ id: 1, fileName: "file 1" },
{ id: 2, fileName: "file 2" },
{ id: 3, fileName: "file 3" },
{ id: 4, fileName: "file 4" },
{ id: 5, fileName: "file 5" },
{ id: 6, fileName: "file 6" }
]);
return (
<div className="list">
{list.map((li) => {
return (
<figure title={li.fileName} key={li.id} className={"list__item"}>
<div className="list__item__file">
<div className="list__item__file__name">{li.fileName}</div>
</div>
</figure>
);
})}
</div>
);
}
styles.css
body {
margin: 0;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
text-align: center;
background-color: #f6f7f7;
border: 1px solid grey;
height: 100vh;
}
.App__main {
display: flex;
height: 100%;
}
/* it's used to save some area for navigation bar */
.App__spacing {
margin-top: 32px;
}
/* list */
.list {
margin-top: 1rem;
display: flex;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex-grow: 1;
}
.list .list__item {
position: relative;
width: 100px;
height: 100px;
margin-right: 1rem;
margin-bottom: 1rem;
background-color: white;
border: 1px solid white;
overflow: hidden;
flex: 0 0 auto;
}
.list .list__item img {
max-height: 100%;
max-width: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.list .list__item .list__item__file {
background-color: #c3c4c7;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem;
overflow: hidden;
width: 100%;
height: 100%;
}
.list .list__item .list__item__file .list__item__file__name {
overflow: hidden;
font-size: 0.9rem;
}
.list .list__item .ist__item__file .list__item__file__type {
color: #8c8f94;
font-size: 0.625rem;
text-transform: uppercase;
margin: 0 auto;
}
CodeSandbox:
https://codesandbox.io/s/agitated-dew-rlnw3?file=/src/App.js
The App container with 100vh has a static height and doesn't grow to fit it's content.
.App {
text-align: center;
background-color: #f6f7f7;
border: 1px solid grey;
height: 100vh;
}
Use 100% of parent container instead.
.App {
text-align: center;
background-color: #f6f7f7;
border: 1px solid grey;
height: 100%;
}
I've just installed the react-calendar package using
npm install react-calendar
but I have no idea how to style it, or to give it some color. The instructions in react-calendar - npm do not provide any information about that. I was wondering if anyone that has used this package could help me here.
This is the code I have:
import React, {Component} from 'react'
import Calendar from 'react-calendar'
export default class EventModifier extends Component {
state = {
date: new Date(2018, 6, 1)
}
render(){
let calendar = <Calendar onChange={this.onChange} value={this.state.date} onClickDay={(value) => alert("day" + value + "clicked")}/>
return(
<div>
{calendar}
</div>
)
}
}
Go to node_modules / react-calender / dist / Calender.css, copy all the content in your own css or scss file and there you will have all the default styles and you can change only the ones you want.
To this date the file looks something like this:
.react-calendar {
width: 350px;
max-width: 100%;
background: white;
border: 1px solid #a0a096;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.125em;
}
.react-calendar--doubleView {
width: 700px;
}
.react-calendar--doubleView .react-calendar__viewContainer {
display: flex;
margin: -0.5em;
}
.react-calendar--doubleView .react-calendar__viewContainer > * {
width: 50%;
margin: 0.5em;
}
.react-calendar,
.react-calendar *,
.react-calendar *:before,
.react-calendar *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.react-calendar button {
margin: 0;
border: 0;
outline: none;
}
.react-calendar button:enabled:hover {
cursor: pointer;
}
.react-calendar__navigation {
height: 44px;
margin-bottom: 1em;
}
.react-calendar__navigation button {
min-width: 44px;
background: none;
}
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
background-color: #e6e6e6;
}
.react-calendar__navigation button[disabled] {
background-color: #f0f0f0;
}
.react-calendar__month-view__weekdays {
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 0.75em;
}
.react-calendar__month-view__weekdays__weekday {
padding: 0.5em;
}
.react-calendar__month-view__weekNumbers {
font-weight: bold;
}
.react-calendar__month-view__weekNumbers .react-calendar__tile {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75em;
padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
}
.react-calendar__month-view__days__day--weekend {
color: #d10000;
}
.react-calendar__month-view__days__day--neighboringMonth {
color: #757575;
}
.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
padding: 2em 0.5em;
}
.react-calendar__tile {
max-width: 100%;
text-align: center;
padding: 0.75em 0.5em;
background: none;
}
.react-calendar__tile:disabled {
background-color: #f0f0f0;
}
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
background-color: #e6e6e6;
}
.react-calendar__tile--now {
background: #ffff76;
}
.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
background: #ffffa9;
}
.react-calendar__tile--hasActive {
background: #76baff;
}
.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
background: #a9d4ff;
}
.react-calendar__tile--active {
background: #006edc;
color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
background: #1087ff;
}
.react-calendar--selectRange .react-calendar__tile--hover {
background-color: #e6e6e6;
}
Use className prop that will be added along with "react-calendar" to the main React-Calendar element. and it can be used to style the calendar as you want
<Calendar className={['c1','c2']}/>
import './Calender.scss';
<Calendar onChange={onChange} value={state.date} className="react-calendar" />
Calender.scss
.react-calendar {
width: 600px;
.react-calendar__navigation {
.react-calendar__navigation__arrow {
display: none;
}
.react-calendar__navigation__label {
font-size: 32px;
}
}
.react-calendar__tile {
height: 70px;
}
.react-calendar__month-view__weekdays__weekday {
font-size: 16px;
color: rgb(15, 70, 15);
}
.react-calendar__tile--active {
background: #e70220;
color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
background: #e70220;
}
.react-calendar__tile,
.react-calendar__month-view__days__day {
font-size: 18px;
}
}