feat: added colors for themes

public/assets/dark.css

@@ -0,0 +1,19 @@
+:root {
+	/* Fonts */
+	--font-color: var(--color-white);
+	--font-color-gray: var(--color-gray-100);
+	--font-color-grayer: var(--color-gray-200);
+
+	/* Border */
+	--border-color: var(--color-gray-700);
+	--border-color-hover: var(--color-gray-600);
+
+	/* Elements */
+	--background-body-color: var(--color-gray-900);
+	--background-header-color: var(--color-gray-900);
+	--background-inline-code: var(--color-gray-800);
+	--background-color-hover: var(--color-gray-800);
+	--background-btn-link: var(--color-gray-800);
+	--background-btn-link-active: var(--color-gray-700);
+	--background-inputs-color: var(--color-gray-800);
+}

public/assets/light.css

@@ -0,0 +1,19 @@
+:root {
+	/* Fonts */
+	--font-color: var(--color-black);
+	--font-color-gray: var(--color-gray-500);
+	--font-color-grayer: var(--color-gray-700);
+
+	/* Border */
+	--border-color: var(--color-gray-100);
+	--border-color-hover: var(--color-gray-400);
+
+	/* Elements */
+	--background-body-color: var(--color-white);
+	--background-header-color: var(--color-white);
+	--background-inline-code: rgba(0, 0, 0, 0.05);
+	--background-color-hover: var(--color-gray-50);
+	--background-btn-link: var(--color-white);
+	--background-btn-link-active: var(--color-white);
+	--background-inputs-color: var(--color-white);
+}

src/components/ArticlePost/ArticlePost.scss

@@ -27,7 +27,7 @@
 
 			& h1 {
 				font-weight: 600;
-				font-size: 2.25rem;
+				font-size: 2.125rem;
 			}
 
 			& p {

src/components/BaseHead.astro

@@ -12,6 +12,8 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props;
 <link rel='preconnect' href='https://fonts.googleapis.com' />
 <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
 <link href='https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap' rel='stylesheet' />
+<link rel='stylesheet' href='assets/dark.css' media='(prefers-color-scheme: dark)' />
+<link rel='stylesheet' href='assets/light.css' media='(prefers-color-scheme: light)' />
 
 <meta charset='utf-8' />
 <meta name='viewport' content='width=device-width, initial-scale=1' />
@@ -19,4 +21,4 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props;
 	{title}
 </title>
 <meta name='title' content={title} />
-<meta name="description" content={description || SITE_METADATA.description} />
+<meta name='description' content={description || SITE_METADATA.description} />

src/components/Header/Header.scss

@@ -6,6 +6,7 @@
 	padding-top: 15px;
 	padding-bottom: 15px;
 	user-select: none;
+	z-index: 9999;
 
 	& .container {
 		display: flex;
@@ -81,7 +82,7 @@
 			position: absolute;
 			height: 3px;
 			width: 100%;
-			background: var(--color-black);
+			background: var(--font-color);
 			border-radius: 7px;
 			opacity: 1;
 			left: 0;
@@ -125,7 +126,7 @@
 
 	body[data-is-mobile-open='true'] {
 		& .header {
-			background-color: var(--color-white);
+			background-color: var(--background-header-color);
 			position: fixed;
 			right: 0;
 			left: 0;

src/components/SearchInput/SearchInput.scss

@@ -12,12 +12,14 @@
 	}
 	& input {
 		padding-left: 40px;
-		color: var(--font-color-grayer);
+		color: var(--font-color-gray);
 		background-color: var(--background-color-hover);
 	}
 	& span {
 		font-size: var(--font-size-lg);
 		font-weight: 500;
 		color: var(--font-color-grayer);
+		min-width: 20px;
+		text-align: center;
 	}
 }

src/components/TagsList/TagsList.tsx

@@ -86,12 +86,7 @@ const TagsList: Component<TagsListProps> = (props) => {
 			<For
 				each={props.data}
 				children={(tag) => (
-					<li
+					<li onClick={onSelect} class="btn-link" data-tag={tag.toLocaleLowerCase()} data-active={isTagSelected(tag)}>
-						onClick={onSelect}
-						style={isTagSelected(tag) && 'border-color: var(--border-color-hover);'}
-						class="btn-link"
-						data-tag={tag.toLocaleLowerCase()}
-					>
 						{tag}
 					</li>
 				)}

src/components/ThemeSwticher/ThemeSwitcher.astro

@@ -1,8 +1,8 @@
 ---
 import './ThemeSwitcher.scss';
-import { Icon } from 'astro-icon'
+import { Icon } from 'astro-icon';
 ---
 
 <button class='theme-switcher'>
-  <Icon name='moon' width='21' height='21' />
+	<Icon name='moon' width='21' height='21' />
 </button>

src/layouts/article.astro

@@ -2,12 +2,11 @@
 import type { Props as BaseHeadProps } from '@root/components/BaseHead.astro';
 import type { ArticleType } from '@root/types';
 
-import '@styles/global.scss';
+import BaseHead from '@components/BaseHead.astro';
-import BaseHead from '@root/components/BaseHead.astro';
 import BaseLayout from '@components/BaseLayout';
-import { DateFormatter } from '@root/utils';
+import ArticleContent from '@components/ArticleContent';
-import ArticleContent from '@root/components/ArticleContent';
+import ArticlePost from '@components/ArticlePost';
-import ArticlePost from '@root/components/ArticlePost';
+import '@styles/global.scss';
 
 export interface Props extends BaseHeadProps {
 	lang?: string | undefined;

src/layouts/default.astro

@@ -1,11 +1,11 @@
 ---
-import type { Props as BaseHeadProps } from '@root/components/BaseHead.astro';
+import type { Props as BaseHeadProps } from '@components/BaseHead.astro';
 
-import '@styles/global.scss';
+import BaseHead from '@components/BaseHead.astro';
-import BaseHead from '@root/components/BaseHead.astro';
 import BaseLayout from '@components/BaseLayout';
 import { SITE_METADATA } from '@root/config';
-import PageHeading from '@root/components/PageHeading';
+import PageHeading from '@components/PageHeading';
+import '@styles/global.scss';
 
 export interface Props extends BaseHeadProps {
 	lang?: string | undefined;

src/pages/contacts.astro

@@ -1,6 +1,5 @@
 ---
 import PageLayout from '@layouts/default.astro';
-import PageHeading from '@components/PageHeading';
 import ContactForm from '@components/ContactForm';
 import ContactsList from '@components/ContactsList';
 ---

src/styles/global.scss

@@ -1,10 +1,9 @@
 :root {
+	color-scheme: light dark;
+
 	/* Fonts */
 	--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
 	--font-family-base: 'Rubik', var(--font-fallback);
-	--font-color: var(--color-black);
-	--font-color-gray: var(--color-gray-500);
-	--font-color-grayer: var(--color-gray-700);
 	--font-size-xs: 0.75rem;
 	--font-size-sm: 0.875rem;
 	--font-size-md: 1rem;
@@ -75,11 +74,7 @@
 	--color-yellow-800: #4b2900;
 	--color-yellow-900: #341a00;
 
-	--background-color-hover: var(--color-gray-50);
-
 	/* Border */
-	--border-color: var(--color-gray-100);
-	--border-color-hover: var(--color-gray-400);
 	--border-radius-md: 3px;
 	--border-radius-lg: 5px;
 
@@ -87,12 +82,7 @@
 	--content-width: 760px;
 	--content-padding: 24px;
 
-	/* Elements */
+	--outline-color: var(--color-blue-500);
-	--background-body-color: var(--color-white);
-	--background-header-color: var(--color-white);
-	--background-scrollbar-track-color: #eff1f5;
-	--background-scrollbar-thumb-color: var(--color-gray-100);
-	--background-inline-code: rgba(0, 0, 0, 0.05);
 
 	--opacity-hover: 0.7;
 }
@@ -102,19 +92,6 @@
 	color: var(--color-black);
 }
 
-::-webkit-scrollbar {
-	width: 10px;
-	height: 10px;
-}
-
-::-webkit-scrollbar-track {
-	background: var(--background-scrollbar-track-color);
-}
-
-::-webkit-scrollbar-thumb {
-	background: var(--background-scrollbar-thumb-color);
-}
-
 html,
 body {
 	box-sizing: border-box;
@@ -168,6 +145,7 @@ body {
 	align-items: center;
 	column-gap: 5px;
 	padding: 3px 10px;
+	background-color: var(--background-btn-link);
 	border-radius: var(--border-radius-md);
 	border: 1px solid var(--border-color);
 	text-decoration: none;
@@ -181,6 +159,10 @@ body {
 		color: inherit;
 		border-color: var(--border-color-hover);
 	}
+	&[data-active='true'] {
+		background-color: var(--background-btn-link-active);
+		border-color: var(--border-color-hover);
+	}
 }
 
 li::marker {
@@ -217,9 +199,10 @@ textarea {
 	padding: 8px 15px;
 	border: 1px solid var(--border-color);
 	border-radius: var(--border-radius-md);
+	background-color: var(--background-inputs-color);
 	font-size: var(--font-size-sm);
 	width: 100%;
-	outline-color: var(--color-blue-500);
+	outline-color: var(--outline-color);
 	resize: vertical;
 }