mirror of
https://github.com/hazemKrimi/personal-website.git
synced 2026-05-01 18:00:26 +00:00
Add prettier configuration
This commit is contained in:
Hazem Krimi
+18
-18
@@ -1,25 +1,25 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
min-height: 75vh;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: 65vh;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
min-height: 65vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
color: #3f9aee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.back {
|
||||
cursor: pointer;
|
||||
color: #3f9aee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
}
|
||||
`;
|
||||
|
||||
+29
-29
@@ -1,38 +1,38 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: ${({ theme }) => theme.colors.blue} !important;
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: ${({ theme }) => theme.colors.blue} !important;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
|
||||
grid-auto-rows: minmax(6.25rem, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
|
||||
grid-auto-rows: minmax(6.25rem, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
+72
-72
@@ -1,93 +1,93 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: ${({ theme }) => theme.colors.blue} !important;
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: ${({ theme }) => theme.colors.blue} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
p,
|
||||
.tags-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
h1,
|
||||
p,
|
||||
.tags-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
+36
-36
@@ -1,49 +1,49 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
padding: 1rem 0rem;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0rem;
|
||||
grid-template-columns: auto;
|
||||
column-gap: 0rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
padding: 0rem;
|
||||
grid-template-columns: auto;
|
||||
column-gap: 0rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.contact {
|
||||
margin: 1rem 0rem;
|
||||
.contact {
|
||||
margin: 1rem 0rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #73d26b;
|
||||
align-self: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
.success {
|
||||
color: #73d26b;
|
||||
align-self: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1.5rem;
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1.5rem;
|
||||
|
||||
.error {
|
||||
color: #d75050;
|
||||
}
|
||||
.error {
|
||||
color: #d75050;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
+38
-38
@@ -1,49 +1,49 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1rem;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
row-gap: 1rem;
|
||||
|
||||
h1 {
|
||||
display: inline;
|
||||
font-size: 1.7rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
h1 {
|
||||
display: inline;
|
||||
font-size: 1.7rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: ${({ theme }) => theme.colors.blue};
|
||||
.blue {
|
||||
color: ${({ theme }) => theme.colors.blue};
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.about,
|
||||
.projects,
|
||||
.blog {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
.about,
|
||||
.projects,
|
||||
.blog {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
.projects {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.projects {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.projects-wrapper,
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
|
||||
grid-auto-rows: minmax(6.25rem, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.projects-wrapper,
|
||||
.articles-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
|
||||
grid-auto-rows: minmax(6.25rem, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
+29
-29
@@ -1,38 +1,38 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: ${({ theme }) => theme.colors.blue} !important;
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: ${({ theme }) => theme.colors.blue} !important;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.3rem;
|
||||
grid-column: 1 / -1;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.projects-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
|
||||
grid-auto-rows: minmax(6.25rem, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.projects-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
|
||||
grid-auto-rows: minmax(6.25rem, auto);
|
||||
align-items: stretch;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
+71
-71
@@ -1,91 +1,91 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
min-height: 75vh;
|
||||
padding: 1rem 0rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
row-gap: 2rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.meta {
|
||||
.back {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: ${({ theme }) => theme.colors.blue} !important;
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: ${({ theme }) => theme.colors.blue} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
.image {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
h1,
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
hr {
|
||||
height: 0.1rem;
|
||||
opacity: 0.3;
|
||||
margin: 1rem auto 0rem auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.content {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
& > * {
|
||||
margin: 0.5rem 0rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
button {
|
||||
margin: 1rem 0rem;
|
||||
}
|
||||
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
p * {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-inline-start: 0.5rem;
|
||||
list-style-position: inside;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
margin-inline-start: 0.5rem;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.showcase-buttons {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.showcase-buttons {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
+14
-14
@@ -1,21 +1,21 @@
|
||||
import { ThemeProvider, DefaultTheme } from 'styled-components';
|
||||
|
||||
const Shared = ({ children }: { children: React.ReactNode }) => {
|
||||
const theme: DefaultTheme = {
|
||||
colors: {
|
||||
dark: {
|
||||
background: '#262626',
|
||||
text: 'white'
|
||||
},
|
||||
light: {
|
||||
background: '#F9F9F9',
|
||||
text: 'black'
|
||||
},
|
||||
blue: '#1573CA'
|
||||
}
|
||||
};
|
||||
const theme: DefaultTheme = {
|
||||
colors: {
|
||||
dark: {
|
||||
background: '#262626',
|
||||
text: 'white',
|
||||
},
|
||||
light: {
|
||||
background: '#F9F9F9',
|
||||
text: 'black',
|
||||
},
|
||||
blue: '#1573CA',
|
||||
},
|
||||
};
|
||||
|
||||
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
|
||||
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
|
||||
};
|
||||
|
||||
export default Shared;
|
||||
|
||||
+48
-42
@@ -1,57 +1,63 @@
|
||||
import { useReducer, useEffect, createContext } from 'react';
|
||||
|
||||
export const ThemeContext = createContext<{ mode: string; toggle: () => void }>({
|
||||
mode: 'light',
|
||||
toggle: () => {}
|
||||
});
|
||||
export const ThemeContext = createContext<{ mode: string; toggle: () => void }>(
|
||||
{
|
||||
mode: 'light',
|
||||
toggle: () => {},
|
||||
}
|
||||
);
|
||||
|
||||
const reducer = (state: string, action: { type: string }) => {
|
||||
switch (action.type) {
|
||||
case 'TOGGLE':
|
||||
return state === 'light' ? 'dark' : 'light';
|
||||
case 'DARK':
|
||||
return 'dark';
|
||||
case 'LIGHT':
|
||||
return 'light';
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
switch (action.type) {
|
||||
case 'TOGGLE':
|
||||
return state === 'light' ? 'dark' : 'light';
|
||||
case 'DARK':
|
||||
return 'dark';
|
||||
case 'LIGHT':
|
||||
return 'light';
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const Theme = ({ children }: { children: React.ReactNode }) => {
|
||||
const [mode, dispatch] = useReducer(reducer, 'light');
|
||||
const toggle = () => {
|
||||
const root = window.document.documentElement;
|
||||
const lightFavicon = document.querySelector('link#light-favicon')!;
|
||||
const darkFavicon = document.querySelector('link#dark-favicon')!;
|
||||
const [mode, dispatch] = useReducer(reducer, 'light');
|
||||
const toggle = () => {
|
||||
const root = window.document.documentElement;
|
||||
const lightFavicon = document.querySelector('link#light-favicon')!;
|
||||
const darkFavicon = document.querySelector('link#dark-favicon')!;
|
||||
|
||||
if (mode === 'dark') {
|
||||
window.localStorage.setItem('mode', 'light');
|
||||
root.style.setProperty('--background', '#F9F9F9');
|
||||
root.style.setProperty('--secondary-background', 'white');
|
||||
root.style.setProperty('--text', 'black');
|
||||
root.style.setProperty('--text-inverted', 'white');
|
||||
document.head.append(darkFavicon);
|
||||
} else {
|
||||
window.localStorage.setItem('mode', 'dark');
|
||||
root.style.setProperty('--background', '#262626');
|
||||
root.style.setProperty('--secondary-background', '#2F2F2F');
|
||||
root.style.setProperty('--text', 'white');
|
||||
root.style.setProperty('--text-inverted', 'black');
|
||||
document.head.append(lightFavicon);
|
||||
}
|
||||
if (mode === 'dark') {
|
||||
window.localStorage.setItem('mode', 'light');
|
||||
root.style.setProperty('--background', '#F9F9F9');
|
||||
root.style.setProperty('--secondary-background', 'white');
|
||||
root.style.setProperty('--text', 'black');
|
||||
root.style.setProperty('--text-inverted', 'white');
|
||||
document.head.append(darkFavicon);
|
||||
} else {
|
||||
window.localStorage.setItem('mode', 'dark');
|
||||
root.style.setProperty('--background', '#262626');
|
||||
root.style.setProperty('--secondary-background', '#2F2F2F');
|
||||
root.style.setProperty('--text', 'white');
|
||||
root.style.setProperty('--text-inverted', 'black');
|
||||
document.head.append(lightFavicon);
|
||||
}
|
||||
|
||||
dispatch({ type: 'TOGGLE' });
|
||||
};
|
||||
dispatch({ type: 'TOGGLE' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
const initialThemeMode = root.style.getPropertyValue('--mode');
|
||||
useEffect(() => {
|
||||
const root = window.document.documentElement;
|
||||
const initialThemeMode = root.style.getPropertyValue('--mode');
|
||||
|
||||
dispatch({ type: initialThemeMode === 'dark' ? 'DARK' : 'LIGHT' });
|
||||
}, []);
|
||||
dispatch({ type: initialThemeMode === 'dark' ? 'DARK' : 'LIGHT' });
|
||||
}, []);
|
||||
|
||||
return <ThemeContext.Provider value={{ mode, toggle }}>{children}</ThemeContext.Provider>;
|
||||
return (
|
||||
<ThemeContext.Provider value={{ mode, toggle }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Theme;
|
||||
|
||||
Reference in New Issue
Block a user