OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add custom theme

Browse Source
This commit is contained in:
Mira Kristipati 2023-01-09 16:19:49 -05:00
parent 2b4fb03dcf
commit bc60a80cf0
3 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/toggles/color.jsx
View File

@ -27,7 +27,7 @@ const colors = [
"pink", "pink",
"rose", "rose",
"red", "red",
"white", "custom",
]; ];
export default function ColorToggle() { export default function ColorToggle() {

1
src/pages/_document.jsx
View File

@ -11,6 +11,7 @@ export default function Document() {
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="manifest" href="/site.webmanifest?v=4" /> <link rel="manifest" href="/site.webmanifest?v=4" />
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=4" color="#1e9cd7" /> <link rel="mask-icon" href="/safari-pinned-tab.svg?v=4" color="#1e9cd7" />
<link rel="stylesheet" href="/custom-colors.css" />
</Head> </Head>
<body> <body>
<Main /> <Main />

26
src/styles/theme.css
View File

@ -1,17 +1,17 @@
.theme-white { .theme-custom {
--color-50: 255 255 255; --color-50: var(--custom-color-50, 255 255 255);
--color-100: 255 255 255; --color-100: var(--custom-color-100, 255 255 255);
--color-200: 255 255 255; --color-200: var(--custom-color-200, 255 255 255);
--color-300: 255 255 255; --color-300: var(--custom-color-300, 255 255 255);
--color-400: 255 255 255; --color-400: var(--custom-color-400, 255 255 255);
--color-500: 60 60 60; --color-500: var(--custom-color-500, 60 60 60);
--color-600: 255 255 255; --color-600: var(--custom-color-600, 255 255 255);
--color-700: 40 40 40; --color-700: var(--custom-color-700, 40 40 40);
--color-800: 255 255 255; --color-800: var(--custom-color-800, 255 255 255);
--color-900: 255 255 255; --color-900: var(--custom-color-900, 255 255 255);
--color-logo-start: 128 128 128 / 20%; --color-logo-start: var(--custom-color-logo-start, 128 128 128 / 20%);
--color-logo-stop: 128 128 128 / 40%; --color-logo-stop: var(--custom-color-logo-stop, 128 128 128 / 40%);
} }
.theme-slate { .theme-slate {