hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Completely fixed theme colors

Browse Source
This commit is contained in:
Hazem Krimi
2021-09-05 16:44:33 +01:00
parent d665157e23
commit 9d4327f3c7
12 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
@types/styled.d.ts
Vendored
+1
View File
@@ -11,6 +11,7 @@ declare module 'styled-components' {
background: string;
text: string;
};
blue: string;
};
}
}
components/Button.tsx
+4 -17
View File
@@ -12,11 +12,8 @@ const Btn = styled.button<Props>`
display: inline;
cursor: pointer;
background: none;
color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
border: ${({ variant, dark, theme }) =>
variant === 'outline'
? `2px solid ${dark ? theme.colors.dark.text : theme.colors.light.text}`
: 'none'};
color: var(--text);
border: ${({ variant }) => (variant === 'outline' ? '2px solid var(--text)' : 'none')};
font-weight: bold;
font-size: ${({ variant }) => (variant === 'outline' ? '1.05rem' : 'inherit')};
text-transform: ${({ variant }) => (variant === 'outline' ? 'uppercase' : 'inherit')};
@@ -37,24 +34,14 @@ const Btn = styled.button<Props>`
bottom: 0;
right: 0;
z-index: -1;
background-color: ${({ variant, dark, theme }) =>
variant === 'outline'
? dark
? theme.colors.dark.text
: theme.colors.light.text
: 'inherit'};
background-color: ${({ variant }) => (variant === 'outline' ? 'var(--text)' : 'inherit')};
transition: transform 250ms ease-in-out;
transform: scaleX(0);
transform-origin: left;
}
&:hover {
color: ${({ variant, dark, theme }) =>
variant === 'outline'
? dark
? theme.colors.dark.background
: theme.colors.light.background
: 'inherit'};
color: ${({ variant }) => (variant === 'outline' ? 'var(--background)' : 'inherit')};
}
&:hover::before {
components/Card.tsx
+2 -2
View File
@@ -21,7 +21,7 @@ const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
&:hover {
& > div {
background: #1573ca;
background: ${({ theme }) => theme.colors.blue};
color: ${({ theme }) => theme.colors.dark.text};
}
@@ -32,7 +32,7 @@ const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
& > div {
padding: 1rem 0rem;
background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
background: var(--secondary-background);
display: grid;
row-gap: 0.5rem;
components/DarkMode.tsx
+13 -2
View File
@@ -21,8 +21,19 @@ const reducer = (state: boolean, action: { type: string }) => {
const DarkMode: FC = ({ children }) => {
const [dark, dispatch] = useReducer(reducer, false);
const toggle = () => {
if (dark) window.localStorage.setItem('theme', 'light');
else window.localStorage.setItem('theme', 'dark');
const root = window.document.documentElement;
if (dark) {
window.localStorage.setItem('theme', 'light');
root.style.setProperty('--background', '#F9F9F9');
root.style.setProperty('--secondary-background', 'white');
root.style.setProperty('--text', 'black');
} else {
window.localStorage.setItem('theme', 'dark');
root.style.setProperty('--background', '#262626');
root.style.setProperty('--secondary-background', '#2F2F2F');
root.style.setProperty('--text', 'white');
}
dispatch({ type: 'TOGGLE' });
};
components/GlobalStyles.tsx
+7 -13
View File
@@ -32,9 +32,8 @@ const Global = createGlobalStyle<Props>`
}
&::selection {
background: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
color: ${({ dark, theme }) =>
dark ? theme.colors.dark.background : theme.colors.light.background};
background: var(--text);
color: var(--background);
}
}
@@ -49,21 +48,17 @@ const Global = createGlobalStyle<Props>`
body {
margin: 0 0 100px;
background: ${({ dark, theme }) =>
dark ? theme.colors.dark.background : theme.colors.light.background};
color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
background: var(--background);
color: var(--text);
transition: color 250ms ease-in-out, background 250ms ease-in-out;
scroll-behavior: smooth;
#nprogress .bar {
background: ${({ dark, theme }) =>
dark ? theme.colors.dark.text : theme.colors.light.text} !important;
background: var(--text) !important;
}
#nprogress .peg {
box-shadow: 0 0 10px ${({ dark, theme }) =>
dark ? theme.colors.dark.text : theme.colors.light.text}, 0 0 5px ${({ dark, theme }) =>
dark ? theme.colors.dark.text : theme.colors.light.text} !important;
box-shadow: 0 0 10px var(--text), 0 0 5px var(--text) !important;
}
}
@@ -72,8 +67,7 @@ const Global = createGlobalStyle<Props>`
}
body::-webkit-scrollbar-thumb {
background-color: ${({ dark, theme }) =>
dark ? theme.colors.dark.text : theme.colors.light.text} !important;
background-color: var(--text) !important;
}
`;
components/Hero.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ const Wrapper = styled.div`
}
.blue {
color: #1573ca;
color: ${({ theme }) => theme.colors.blue};
}
`;
components/Input.tsx
+4 -4
View File
@@ -15,16 +15,16 @@ interface Props {
const SmallField = styled.input<{ dark: boolean }>`
border: none;
padding: 1rem;
background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
background: var(--secondary-background);
color: var(--text);
`;
const BigField = styled.textarea<{ dark: boolean }>`
resize: none;
border: none;
padding: 1rem;
background: ${({ dark, theme }) => (dark ? '#2f2f2f' : theme.colors.dark.text)};
color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
background: var(--secondary-background);
color: var(--text);
`;
const Input: FC<Props & { className?: string }> = ({
components/MDXButton.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ const Btn = styled.button<Props>`
display: ${({ variant }) =>
['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
width: ${({ variant }) => (['action', 'outline'].includes(variant as string) ? '100%' : 'auto')};
background: ${({ variant }) => (variant === 'action' ? '#1573ca' : 'none')};
background: ${({ variant, theme }) => (variant === 'action' ? theme.colors.blue : 'none')};
color: ${({ variant, dark }) => (variant === 'action' ? 'white' : dark ? 'white' : 'black')};
border: ${({ variant, dark }) =>
variant === 'outline' ? `2px solid ${dark ? 'white' : 'black'}` : 'none'};
components/MobileNav.tsx
+2 -3
View File
@@ -24,7 +24,7 @@ const Bar = styled.nav<StyledProps>`
transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
width: 80%;
height: 100vh;
background: ${({ theme, dark }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
background: var(--text);
transition: transform 250ms ease-in-out;
display: grid;
grid-template-rows: 30% repeat(4, 50px);
@@ -45,8 +45,7 @@ const Bar = styled.nav<StyledProps>`
margin: 0rem 1rem;
button {
color: ${({ theme, dark }) =>
dark ? theme.colors.light.text : theme.colors.dark.text} !important;
color: var(--text) !important;
}
}
`;
components/Theme.tsx
+2 -2
View File
@@ -2,7 +2,6 @@ import { FC } from 'react';
import { ThemeProvider, DefaultTheme } from 'styled-components';
const Theme: FC = ({ children }) => {
// TODO: put theme colors in css custom properties and put common colors here.
const theme: DefaultTheme = {
colors: {
dark: {
@@ -12,7 +11,8 @@ const Theme: FC = ({ children }) => {
light: {
background: '#F9F9F9',
text: 'black'
}
},
blue: '#1573CA'
}
};
pages/_document.tsx
+12
View File
@@ -69,6 +69,18 @@ class Doc extends Document {
const root = document.documentElement;
root.style.setProperty('--theme', theme);
root.style.setProperty(
'--background',
theme === 'light' ? '#F9F9F9' : '#262626'
);
root.style.setProperty(
'--secondary-background',
theme === 'light' ? 'white' : '#2F2F2F'
);
root.style.setProperty(
'--text',
theme === 'light' ? 'black' : 'white'
);
})();
`
}}
pages/index.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ const Wrapper = styled.div`
}
.blue {
color: #1573ca;
color: ${({ theme }) => theme.colors.blue};
@media (max-width: 768px) {
margin-top: 0.5rem;