jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-15 05:45:33 -04:00
Code Issues Activity

use camelCase in themes config

Browse Source
This commit is contained in:
Jake Jarvis
2022-02-28 20:07:27 -05:00
parent 324a15aa6a
commit 33c02d205e
5 changed files with 64 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
lib/config/themes.ts
View File

@@ -1,74 +1,79 @@
import decamelize from "decamelize";
// Light/dark theme-related CSS variables that are inlined in Layout.tsx and become available globally.
// TODO: Probably invert the object so that *each variable* has a light and dark key.
const themes = {
light: {
"background-inner": "#ffffff",
"background-outer": "#fcfcfc",
"background-header": "rgba(252, 252, 252, 0.7)",
backgroundInner: "#ffffff",
backgroundOuter: "#fcfcfc",
backgroundHeader: "rgba(252, 252, 252, 0.7)",
text: "#202020",
"medium-dark": "#515151",
mediumDark: "#515151",
medium: "#5e5e5e",
"medium-light": "#757575",
mediumLight: "#757575",
light: "#d2d2d2",
"kinda-light": "#e3e3e3",
"super-light": "#f4f4f4",
"super-duper-light": "#fbfbfb",
kindaLight: "#e3e3e3",
superLight: "#f4f4f4",
superDuperLight: "#fbfbfb",
link: "#0e6dc2",
"link-underline": "rgba(14, 109, 194, 0.4)",
linkUnderline: "rgba(14, 109, 194, 0.4)",
success: "#44a248",
error: "#ff1b1b",
warning: "#f78200",
// Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight
"code-text": "#313131",
"code-background": "#fdfdfd",
"code-comment": "#656e77",
"code-keyword": "#029cb9",
"code-attribute": "#70a800",
"code-namespace": "#f92672",
"code-literal": "#ae81ff",
"code-punctuation": "#111111",
"code-variable": "#d88200",
"code-addition": "#44a248",
"code-deletion": "#ff1b1b",
codeText: "#313131",
codeBackground: "#fdfdfd",
codeComment: "#656e77",
codeKeyword: "#029cb9",
codeAttribute: "#70a800",
codeNamespace: "#f92672",
codeLiteral: "#ae81ff",
codePunctuation: "#111111",
codeVariable: "#d88200",
codeAddition: "#44a248",
codeDeletion: "#ff1b1b",
},
dark: {
"background-inner": "#1e1e1e",
"background-outer": "#252525",
"background-header": "rgba(37, 37, 37, 0.85)",
backgroundInner: "#1e1e1e",
backgroundOuter: "#252525",
backgroundHeader: "rgba(37, 37, 37, 0.85)",
text: "#f1f1f1",
"medium-dark": "#d7d7d7",
mediumDark: "#d7d7d7",
medium: "#b1b1b1",
"medium-light": "#959595",
mediumLight: "#959595",
light: "#646464",
"kinda-light": "#535353",
"super-light": "#272727",
"super-duper-light": "#1f1f1f",
kindaLight: "#535353",
superLight: "#272727",
superDuperLight: "#1f1f1f",
link: "#88c7ff",
"link-underline": "rgba(136, 199, 255, 0.4)",
linkUnderline: "rgba(136, 199, 255, 0.4)",
success: "#78df55",
error: "#ff5151",
warning: "#f2b702",
// Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments
"code-text": "#e4e4e4",
"code-background": "#212121",
"code-comment": "#929292",
"code-keyword": "#3b9dd2",
"code-attribute": "#78df55",
"code-namespace": "#f95757",
"code-literal": "#d588fb",
"code-punctuation": "#cccccc",
"code-variable": "#fd992a",
"code-addition": "#78df55",
"code-deletion": "#ff5151",
codeText: "#e4e4e4",
codeBackground: "#212121",
codeComment: "#929292",
codeKeyword: "#3b9dd2",
codeAttribute: "#78df55",
codeNamespace: "#f95757",
codeLiteral: "#d588fb",
codePunctuation: "#cccccc",
codeVariable: "#fd992a",
codeAddition: "#78df55",
codeDeletion: "#ff5151",
},
};
// JS-friendly camelCase to CSS-friendly kebab-case
const camelToKebab = (camel: string) => decamelize(camel, { separator: "-" });
// converts each variable in a given theme object to CSS syntax and returns all of them as one long string
export const toCSS = (theme: Record<string, string>) =>
Object.entries(theme)
.map(([name, color]) => `--${name}:${color};`)
.map(([name, color]) => `--${camelToKebab(name)}:${color};`)
.join("");
export default themes;