From 595eb4abb305b0b383fac1e882dcd3db3cca9322 Mon Sep 17 00:00:00 2001 From: Michal Sapka Date: Wed, 7 Sep 2022 21:48:34 +0200 Subject: feat: dracula light theme --- components/topnav.tsx | 5 +++-- lib/theme.tsx | 24 ++++++++++++++++++++---- pages/index.tsx | 2 +- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/components/topnav.tsx b/components/topnav.tsx index 0364f40..80a6ce3 100644 --- a/components/topnav.tsx +++ b/components/topnav.tsx @@ -2,6 +2,7 @@ import { Link, Box, HStack, + Icon, IconButton, Menu, Heading, @@ -31,7 +32,7 @@ function MobileNav() { function DesktopNav() { return - Source code + Source code } @@ -53,7 +54,7 @@ export default function Navbar() { mb="1" > - Michal + Michal {isMobile ? null : } diff --git a/lib/theme.tsx b/lib/theme.tsx index a7ae222..2d24742 100644 --- a/lib/theme.tsx +++ b/lib/theme.tsx @@ -5,8 +5,8 @@ import type { StyleFunctionProps } from '@chakra-ui/styled-system' const styles = { global: (props : StyleFunctionProps) => ({ body: { - bg: mode('#d5d6db', '#282a36')(props), - color: mode('#0f4b6e', '#f8f8f2')(props), + bg: mode('#f8f8f2', '#282a36')(props), + color: mode('#282a36', '#f8f8f2')(props), } }) } @@ -14,14 +14,30 @@ const styles = { const components = { Link: { baseStyle: (props : StyleFunctionProps) => ({ - color: mode('#3d7aed', '#bd93f9')(props), + color: mode('#ff5555', '#bd93f9')(props), + textUnderlineOffset: 3 - }) + }), + variants: { + 'topnav-link': (props : StyleFunctionProps) => ({ + color: mode('#282a36', '#f8f8f2')(props), + textDecoration: "none" + }) + } }, Text: { baseStyle: (_props : StyleFunctionProps) => ({ textAlign: "justify", }) + }, + Heading: { + variants: { + "section-title": { + pt: "10px", + pb: "10px", + fontSize: "1.5rem" + } + } } } diff --git a/pages/index.tsx b/pages/index.tsx index a654d93..261624d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -52,7 +52,7 @@ const Home: NextPage = () => { borderRadius="full" borderWidth = "3px" borderStyle = "solid" - borderColor = {useColorModeValue("#FFFFFF", "#6272a4")} + borderColor = {useColorModeValue("#eee8d5", "#6272a4")} /> -- cgit v1.2.3