75 lines
1.5 KiB
TypeScript
75 lines
1.5 KiB
TypeScript
/** theming.ts
|
|
* stores values that are used across
|
|
* It makes changing values easier
|
|
*/
|
|
|
|
import { css } from "styled-components"
|
|
|
|
// not declared in the export object so the export object can refer to it
|
|
function theme(
|
|
currentTheme: string,
|
|
values: { [key: string]: string | number }
|
|
) {
|
|
return values[currentTheme]
|
|
}
|
|
|
|
export default {
|
|
theme: theme,
|
|
font: {
|
|
regular: "'Noto Sans KR', sans-serif",
|
|
code: "'Source Code Pro', monospace",
|
|
},
|
|
size: {
|
|
x2_small: "3px",
|
|
x_small: "8px",
|
|
small: 0,
|
|
medium: "14px",
|
|
large: 0,
|
|
x_large: 0,
|
|
screen_size1: "1000px",
|
|
screen_size2: "1500px",
|
|
},
|
|
color: {
|
|
linkColor: "#4592F7",
|
|
},
|
|
dark: {
|
|
backgroundColor0: "#202225",
|
|
backgroundColor1: "#36393F",
|
|
color0: "#FFFFFF",
|
|
color1: "#EEEEEE",
|
|
},
|
|
light: {
|
|
backgroundColor0: "#FFFFFF",
|
|
backgroundColor1: "#F7F7F7",
|
|
color0: "#000000",
|
|
color1: "#111111",
|
|
},
|
|
styles: {
|
|
navbarButtonStyle: css`
|
|
cursor: pointer; /* so it can be applies to divs too */
|
|
font-size: 1rem;
|
|
border-radius: 0.5rem;
|
|
float: left;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
transition: transform 0.1s linear;
|
|
color: ${(props) =>
|
|
theme(props.theme.currentTheme, {
|
|
light: "black",
|
|
dark: "#CFD0D0",
|
|
})};
|
|
background-color: ${(props) =>
|
|
theme(props.theme.currentTheme, {
|
|
light: "white",
|
|
dark: "#202225",
|
|
})};
|
|
&:hover {
|
|
background-color: ${(props) =>
|
|
theme(props.theme.currentTheme, {
|
|
light: "lightgrey",
|
|
dark: "#36393F",
|
|
})};
|
|
}
|
|
`,
|
|
},
|
|
}
|