update theme variable

This commit is contained in:
Somrat
2025-02-17 11:52:56 +06:00
parent 97a4189ff0
commit 680b896e58
21 changed files with 78 additions and 65 deletions
+18 -7
View File
@@ -5,20 +5,28 @@
"primary": "#121212",
"body": "#fff",
"border": "#eaeaea",
"theme_light": "#f6f6f6",
"theme_dark": ""
"light": "#f6f6f6",
"dark": "#040404"
},
"text_color": { "text": "#444444", "dark": "#040404", "light": "#717171" }
"text_color": {
"text": "#444444",
"text-dark": "#040404",
"text-light": "#717171"
}
},
"darkmode": {
"theme_color": {
"primary": "#fff",
"body": "#1c1c1c",
"border": "#3E3E3E",
"theme_light": "#222222",
"theme_dark": ""
"light": "#222222",
"dark": "#fff"
},
"text_color": { "text": "#B4AFB6", "dark": "#fff", "light": "#B4AFB6" }
"text_color": {
"text": "#B4AFB6",
"text-dark": "#fff",
"text-light": "#B4AFB6"
}
}
},
"fonts": {
@@ -28,6 +36,9 @@
"secondary": "Signika:wght@500;700",
"secondary_type": "sans-serif"
},
"font_size": { "base": "16", "scale": "1.2" }
"font_size": {
"base": "16",
"scale": "1.2"
}
}
}
+2 -2
View File
@@ -6,9 +6,9 @@ import { getSinglePage } from "@/lib/contentParser.astro";
import dateFormat from "@/lib/utils/dateFormat";
import similarItems from "@/lib/utils/similarItems";
import { humanize, markdownify, slugify } from "@/lib/utils/textConverter";
import { render } from "astro:content";
import { FaRegClock, FaRegFolder, FaRegUserCircle } from "react-icons/fa";
import ImageMod from "./components/ImageMod.astro";
import { render } from "astro:content";
const COLLECTION_FOLDER = "blog";
const { post } = Astro.props;
@@ -72,7 +72,7 @@ const { title, description, author, categories, image, date, tags } = post.data;
tags.map((tag: string) => (
<li class="inline-block">
<a
class="m-1 block rounded bg-theme-light px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-theme-light dark:hover:bg-darkmode-primary dark:hover:text-dark"
class="m-1 block rounded bg-light px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-light dark:hover:bg-darkmode-primary dark:hover:text-text-dark"
href={`/tags/${slugify(tag)}`}
>
{humanize(tag)}
+1 -3
View File
@@ -7,9 +7,7 @@ const { data } = Astro.props;
const { title, image, social } = data.data;
---
<div
class="rounded bg-theme-light p-8 text-center dark:bg-darkmode-theme-light"
>
<div class="rounded bg-light p-8 text-center dark:bg-darkmode-light">
{
image && (
<ImageMod
+3 -1
View File
@@ -34,7 +34,9 @@ paths.forEach((label: string, i: number) => {
{label}
</a>
) : (
<span class="text-light dark:text-darkmode-light">{label}</span>
<span class="text-text-light dark:text-darkmode-text-light">
{label}
</span>
)}
</li>
))
+6 -6
View File
@@ -30,7 +30,7 @@ for (let i = 1; i <= totalPages; i++) {
? `${section ? "/" + section : "/"}`
: `${section ? "/" + section : ""}/page/${currentPage - 1}`
}
class="rounded px-2 py-1.5 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
class="rounded px-2 py-1.5 text-text-dark hover:bg-light dark:text-darkmode-text-dark dark:hover:bg-darkmode-light"
>
<span class="sr-only">Previous</span>
<svg
@@ -48,7 +48,7 @@ for (let i = 1; i <= totalPages; i++) {
</svg>
</a>
) : (
<span class="rounded px-2 py-1.5 text-light">
<span class="rounded px-2 py-1.5 text-text-light">
<span class="sr-only">Previous</span>
<svg
viewBox="0 0 20 20"
@@ -71,7 +71,7 @@ for (let i = 1; i <= totalPages; i++) {
pagination === currentPage ? (
<span
aria-current="page"
class="rounded bg-primary px-4 py-2 text-white dark:bg-darkmode-primary dark:text-dark"
class="rounded bg-primary px-4 py-2 text-white dark:bg-darkmode-primary dark:text-text-dark"
>
{pagination}
</span>
@@ -83,7 +83,7 @@ for (let i = 1; i <= totalPages; i++) {
: `${section ? "/" + section : ""}/page/${pagination}`
}
aria-current="page"
class="rounded px-4 py-2 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
class="rounded px-4 py-2 text-text-dark hover:bg-light dark:text-darkmode-text-dark dark:hover:bg-darkmode-light"
>
{pagination}
</a>
@@ -94,7 +94,7 @@ for (let i = 1; i <= totalPages; i++) {
{hasNextPage ? (
<a
href={`${section ? "/" + section : ""}/page/${currentPage + 1}`}
class="rounded px-2 py-1.5 text-dark hover:bg-theme-light dark:text-darkmode-dark dark:hover:bg-darkmode-theme-light"
class="rounded px-2 py-1.5 text-text-dark hover:bg-light dark:text-darkmode-text-dark dark:hover:bg-darkmode-light"
>
<span class="sr-only">Next</span>
<svg
@@ -112,7 +112,7 @@ for (let i = 1; i <= totalPages; i++) {
</svg>
</a>
) : (
<span class="rounded px-2 py-1.5 text-light">
<span class="rounded px-2 py-1.5 text-text-light">
<span class="sr-only">Next</span>
<svg
viewBox="0 0 20 20"
+1 -1
View File
@@ -8,7 +8,7 @@ const { call_to_action } = Astro.props;
call_to_action.data.enable && (
<section class="mb-28">
<div class="container">
<div class="rounded-xl bg-theme-light px-4 py-16 dark:bg-darkmode-theme-light xl:p-20">
<div class="rounded-xl bg-light px-4 py-16 dark:bg-darkmode-light xl:p-20">
<div class="row items-center justify-between">
<div class="mb-10 md:col-5 lg:col-4 md:order-2 md:mb-0">
<ImageMod
+4 -2
View File
@@ -9,7 +9,7 @@ import { markdownify } from "@/lib/utils/textConverter";
const { footer }: { footer: { name: string; url: string }[] } = menu;
---
<footer class="bg-theme-light dark:bg-darkmode-theme-light">
<footer class="bg-light dark:bg-darkmode-light">
<div class="container">
<div class="row items-center py-10">
<div class="mb-8 text-center lg:col-3 lg:mb-0 lg:text-left">
@@ -32,7 +32,9 @@ const { footer }: { footer: { name: string; url: string }[] } = menu;
</div>
</div>
<div class="border-t border-border py-7 dark:border-darkmode-border">
<div class="container text-center text-light dark:text-darkmode-light">
<div
class="container text-center text-text-light dark:text-darkmode-text-light"
>
<p set:html={markdownify(config.params.copyright)} />
</div>
</div>
+2 -2
View File
@@ -32,7 +32,7 @@ const { pathname } = Astro.url;
<input id="nav-toggle" type="checkbox" class="hidden" />
<label
for="nav-toggle"
class="order-3 cursor-pointer flex items-center lg:hidden text-dark dark:text-white lg:order-1"
class="order-3 cursor-pointer flex items-center lg:hidden text-text-dark dark:text-white lg:order-1"
>
<svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
<title>Menu Open</title>
@@ -121,7 +121,7 @@ const { pathname } = Astro.url;
{
settings.search && (
<button
class="border-border text-dark hover:text-primary dark:border-darkmode-border mr-5 inline-block border-r pr-5 text-xl dark:text-white dark:hover:text-darkmode-primary"
class="border-border text-text-dark hover:text-primary dark:border-darkmode-border mr-5 inline-block border-r pr-5 text-xl dark:text-white dark:hover:text-darkmode-primary"
aria-label="search"
data-search-trigger
>
+1 -1
View File
@@ -8,7 +8,7 @@ const { title = "" }: { title?: string } = Astro.props;
<section>
<div class="container text-center">
<div
class="rounded-2xl bg-gradient-to-b from-body to-theme-light px-8 py-14 dark:from-darkmode-body dark:to-darkmode-theme-light"
class="rounded-2xl bg-gradient-to-b from-body to-light px-8 py-14 dark:from-darkmode-body dark:to-darkmode-light"
>
<h1 set:text={humanize(title)} />
<Breadcrumbs className="mt-6" />
+3 -3
View File
@@ -8,7 +8,7 @@ const { tags, categories, allCategories } = Astro.props;
<!-- categories -->
<div class="mb-8">
<h5 class="mb-6">Categories</h5>
<div class="rounded bg-theme-light p-8 dark:bg-darkmode-theme-light">
<div class="rounded bg-light p-8 dark:bg-darkmode-light">
<ul class="space-y-4">
{
categories.map((category: any) => {
@@ -33,14 +33,14 @@ const { tags, categories, allCategories } = Astro.props;
<!-- tags -->
<div class="mb-8">
<h5 class="mb-6">Tags</h5>
<div class="rounded bg-theme-light p-6 dark:bg-darkmode-theme-light">
<div class="rounded bg-light p-6 dark:bg-darkmode-light">
<ul>
{
tags.map((tag: any) => {
return (
<li class="inline-block">
<a
class="m-1 block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
class="m-1 block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-text-dark"
href={`/tags/${tag}`}
>
{humanize(tag)}
+5 -5
View File
@@ -24,8 +24,8 @@ const { testimonial } = Astro.props;
designation: string;
}) => (
<div class="swiper-slide">
<div class="rounded-lg bg-theme-light px-7 py-10 dark:bg-darkmode-theme-light">
<div class="text-dark dark:text-white">
<div class="rounded-lg bg-light px-7 py-10 dark:bg-darkmode-light">
<div class="text-text-dark dark:text-white">
<svg
width="33"
height="20"
@@ -44,7 +44,7 @@ const { testimonial } = Astro.props;
set:html={markdownify(item.content)}
/>
<div class="mt-11 flex items-center">
<div class="text-dark dark:text-white">
<div class="text-text-dark dark:text-white">
<ImageMod
height={50}
width={50}
@@ -61,13 +61,13 @@ const { testimonial } = Astro.props;
/>
<p
set:text={item.designation}
class="text-dark dark:text-white"
class="text-text-dark dark:text-white"
/>
</div>
</div>
</div>
</div>
),
)
)}
</div>
<div class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center" />
+1 -1
View File
@@ -8,7 +8,7 @@ import Base from "@/layouts/Base.astro";
<div class="row justify-center">
<div class="sm:col-10 md:col-8 lg:col-6">
<span
class="text-[8rem] block font-bold text-dark dark:text-darkmode-dark"
class="text-[8rem] block font-bold text-text-dark dark:text-darkmode-text-dark"
>
404
</span>
+1 -1
View File
@@ -22,7 +22,7 @@ const allCategories = await getAllTaxonomy(BLOG_FOLDER, "categories");
<li class="m-3 inline-block">
<a
href={`/categories/${category}`}
class="block rounded bg-theme-light px-4 py-2 text-xl text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark"
class="block rounded bg-light px-4 py-2 text-xl text-text-dark dark:bg-darkmode-light dark:text-darkmode-text-dark"
>
{humanize(category)}{" "}
<span class="ml-2 rounded bg-body px-2 dark:bg-darkmode-body">
+1 -1
View File
@@ -22,7 +22,7 @@ const allTags = await getAllTaxonomy(BLOG_FOLDER, "tags");
<li class="m-3 inline-block">
<a
href={`/tags/${tag}`}
class="block rounded bg-theme-light px-4 py-2 text-xl text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark"
class="block rounded bg-light px-4 py-2 text-xl text-text-dark dark:bg-darkmode-light dark:text-darkmode-text-dark"
>
{humanize(tag)}{" "}
<span class="ml-2 rounded bg-body px-2 dark:bg-darkmode-body">
+1 -1
View File
@@ -12,7 +12,7 @@ h3,
h4,
h5,
h6 {
@apply font-secondary font-bold leading-tight text-dark dark:text-darkmode-dark;
@apply font-secondary font-bold leading-tight text-text-dark dark:text-darkmode-text-dark;
}
h1,
+2 -2
View File
@@ -7,9 +7,9 @@
}
.btn-primary {
@apply border-primary bg-primary dark:border-darkmode-primary dark:text-dark text-white dark:bg-darkmode-primary;
@apply border-primary bg-primary dark:border-darkmode-primary dark:text-text-dark text-white dark:bg-darkmode-primary;
}
.btn-outline-primary {
@apply border-dark text-dark hover:bg-dark dark:hover:text-dark bg-transparent hover:text-white dark:border-darkmode-primary dark:text-white dark:hover:bg-darkmode-primary;
@apply border-dark text-text-dark hover:bg-dark dark:hover:text-text-dark bg-transparent hover:text-white dark:border-darkmode-primary dark:text-white dark:hover:bg-darkmode-primary;
}
+13 -13
View File
@@ -20,7 +20,7 @@
@apply inline-block;
}
.social-icons li a {
@apply flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-center leading-9 text-white dark:bg-darkmode-primary dark:text-dark;
@apply flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-center leading-9 text-white dark:bg-darkmode-primary dark:text-text-dark;
}
.social-icons li a svg {
@apply h-5 w-5;
@@ -40,7 +40,7 @@
}
.notice-head p {
@apply font-secondary text-xl font-semibold text-dark dark:text-darkmode-light;
@apply font-secondary text-xl font-semibold text-text-dark dark:text-darkmode-text-light;
}
.notice-body {
@@ -77,11 +77,11 @@
}
.tab-nav {
@apply flex border-b border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light !m-0 !list-none;
@apply flex border-b border-border bg-light dark:border-darkmode-border dark:bg-darkmode-light !m-0 !list-none;
}
.tab-nav-item {
@apply cursor-pointer border-b-[3px] border-border py-2 text-lg text-dark opacity-80 dark:border-light !my-0 !px-8;
@apply cursor-pointer border-b-[3px] border-border py-2 text-lg text-text-dark opacity-80 dark:border-light !my-0 !px-8;
}
.tab-nav-item.active {
@@ -106,11 +106,11 @@
/* accordion */
.accordion {
@apply mb-6 overflow-hidden rounded-lg border border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light;
@apply mb-6 overflow-hidden rounded-lg border border-border bg-light dark:border-darkmode-border dark:bg-darkmode-light;
}
.accordion-header {
@apply flex w-full cursor-pointer items-center justify-between px-8 py-4 text-lg text-dark dark:bg-darkmode-theme-light dark:text-darkmode-light;
@apply flex w-full cursor-pointer items-center justify-between px-8 py-4 text-lg text-text-dark dark:bg-darkmode-light dark:text-darkmode-text-light;
}
.accordion-icon {
@@ -143,28 +143,28 @@
}
.modal-close {
@apply absolute right-3 top-3 h-8 w-8 rounded-full bg-theme-light text-center leading-8 text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark;
@apply absolute right-3 top-3 h-8 w-8 rounded-full bg-light text-center leading-8 text-text-dark dark:bg-darkmode-light dark:text-darkmode-text-dark;
}
/* content style */
.content {
@apply prose max-w-none;
@apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark dark:prose-headings:text-darkmode-dark;
@apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-text-dark dark:prose-headings:text-darkmode-text-dark;
@apply prose-h1:text-h1-sm md:prose-h1:text-h1;
@apply prose-h2:text-h2-sm md:prose-h2:text-h2;
@apply prose-h3:text-h3-sm md:prose-h3:text-h3;
@apply prose-img:max-w-full prose-img:rounded;
@apply prose-hr:border-border dark:prose-hr:border-darkmode-border;
@apply prose-p:text-base prose-p:text-text dark:prose-p:text-darkmode-text;
@apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark dark:prose-blockquote:border-darkmode-primary dark:prose-blockquote:bg-darkmode-theme-light dark:prose-blockquote:text-darkmode-light;
@apply prose-pre:rounded-lg prose-pre:bg-theme-light dark:prose-pre:bg-darkmode-theme-light;
@apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-text-dark dark:prose-blockquote:border-darkmode-primary dark:prose-blockquote:bg-darkmode-light dark:prose-blockquote:text-darkmode-text-light;
@apply prose-pre:rounded-lg prose-pre:bg-light dark:prose-pre:bg-darkmode-light;
@apply prose-code:px-1 prose-code:text-primary dark:prose-code:text-darkmode-primary;
@apply prose-strong:text-dark dark:prose-strong:text-darkmode-text;
@apply prose-strong:text-text-dark dark:prose-strong:text-darkmode-text;
@apply prose-a:text-text prose-a:underline prose-a:hover:text-primary dark:prose-a:text-darkmode-text dark:prose-a:hover:text-darkmode-primary;
@apply prose-li:text-text dark:prose-li:text-darkmode-text;
@apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] dark:prose-table:before:border-darkmode-border;
@apply prose-thead:border-border prose-thead:bg-theme-light dark:prose-thead:border-darkmode-border dark:prose-thead:bg-darkmode-theme-light;
@apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark dark:prose-th:text-darkmode-text;
@apply prose-thead:border-border prose-thead:bg-light dark:prose-thead:border-darkmode-border dark:prose-thead:bg-darkmode-light;
@apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-text-dark dark:prose-th:text-darkmode-text;
@apply prose-tr:border-border dark:prose-tr:border-darkmode-border;
@apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] dark:prose-td:text-darkmode-text;
}
+3 -3
View File
@@ -8,7 +8,7 @@
}
.navbar-brand {
@apply text-dark dark:text-darkmode-dark text-xl font-semibold;
@apply text-text-dark dark:text-darkmode-text-dark text-xl font-semibold;
image {
@apply max-h-full max-w-full;
}
@@ -19,7 +19,7 @@
}
.nav-link {
@apply text-dark hover:text-primary dark:text-darkmode-dark dark:hover:text-darkmode-primary block p-3 cursor-pointer font-semibold transition lg:px-2 lg:py-3;
@apply text-text-dark hover:text-primary dark:text-darkmode-text-dark dark:hover:text-darkmode-primary block p-3 cursor-pointer font-semibold transition lg:px-2 lg:py-3;
}
.nav-dropdown {
@@ -43,7 +43,7 @@
}
.nav-dropdown-link {
@apply text-dark hover:text-primary dark:text-darkmode-text dark:hover:text-darkmode-primary block py-1 font-semibold transition;
@apply text-text-dark hover:text-primary dark:text-darkmode-text dark:hover:text-darkmode-primary block py-1 font-semibold transition;
}
/* theme-switcher */
+1 -1
View File
@@ -1,7 +1,7 @@
/* swiper pagination */
.testimonial-slider-pagination {
.swiper-pagination-bullet {
@apply h-2.5 w-2.5 bg-theme-light opacity-100 dark:bg-darkmode-theme-light;
@apply h-2.5 w-2.5 bg-light opacity-100 dark:bg-darkmode-light;
}
.swiper-pagination-bullet-active {
+6 -6
View File
@@ -14,16 +14,16 @@
@apply p-4 relative;
}
.search-wrapper-header-input {
@apply border border-solid w-full focus:ring-0 focus:border-dark border-border rounded-[4px] h-12 pr-4 pl-10 transition duration-200 outline-none dark:bg-darkmode-theme-light dark:text-darkmode-text dark:border-darkmode-border dark:focus:border-darkmode-primary;
@apply border border-solid w-full focus:ring-0 focus:border-dark border-border rounded-[4px] h-12 pr-4 pl-10 transition duration-200 outline-none dark:bg-darkmode-light dark:text-darkmode-text dark:border-darkmode-border dark:focus:border-darkmode-primary;
}
.search-wrapper-body {
@apply dark:bg-darkmode-theme-light dark:shadow-none max-h-[calc(100vh-350px)] overflow-y-auto bg-theme-light shadow-[inset_0_2px_18px_#ddd] p-4 rounded;
@apply dark:bg-darkmode-light dark:shadow-none max-h-[calc(100vh-350px)] overflow-y-auto bg-light shadow-[inset_0_2px_18px_#ddd] p-4 rounded;
}
.search-wrapper-footer {
@apply text-xs select-none leading-none md:flex items-center px-3.5 py-2 hidden;
}
.search-wrapper-footer kbd {
@apply bg-theme-light dark:bg-darkmode-theme-light text-xs leading-none text-center mr-[3px] px-1 py-0.5 rounded-[3px];
@apply bg-light dark:bg-darkmode-light text-xs leading-none text-center mr-[3px] px-1 py-0.5 rounded-[3px];
}
.search-wrapper-footer span:not(:last-child) {
@apply mr-4;
@@ -38,7 +38,7 @@
@apply mb-4;
}
.search-result-group-title {
@apply text-lg text-dark dark:text-darkmode-dark mb-[5px] px-3;
@apply text-lg text-text-dark dark:text-darkmode-text-dark mb-[5px] px-3;
}
.search-result-item {
@apply rounded border bg-white dark:bg-darkmode-body dark:border-darkmode-border flex items-start mb-1 p-4 scroll-my-[30px] border-solid border-border relative;
@@ -47,7 +47,7 @@
@apply bg-yellow-200 rounded-[2px];
}
.search-result-item-title {
@apply text-lg font-bold text-dark dark:text-darkmode-dark leading-none;
@apply text-lg font-bold text-text-dark dark:text-darkmode-text-dark leading-none;
}
.search-result-item-link::after {
@apply absolute top-0 right-0 bottom-0 left-0 z-10 content-[""];
@@ -65,7 +65,7 @@
@apply mx-0 my-1.5 empty:hidden line-clamp-1;
}
.search-result-item-taxonomies {
@apply text-sm flex flex-wrap items-center text-light dark:text-darkmode-light;
@apply text-sm flex flex-wrap items-center text-text-light dark:text-darkmode-text-light;
}
.search-result-item-taxonomies svg {
@apply inline-block mr-1;
+3 -3
View File
@@ -12,7 +12,7 @@ input#nav-toggle:checked ~ #nav-menu {
}
.bg-gradient {
@apply bg-linear-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%] dark:from-darkmode-theme-light dark:to-darkmode-body;
@apply bg-linear-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%] dark:from-darkmode-light dark:to-darkmode-body;
}
.shadow {
@@ -21,9 +21,9 @@ input#nav-toggle:checked ~ #nav-menu {
/* form style */
.form-input {
@apply w-full rounded border-transparent bg-theme-light px-6 py-4 text-dark placeholder:text-light focus:border-primary dark:focus:border-darkmode-primary focus:ring-transparent dark:border-darkmode-border dark:bg-darkmode-theme-light dark:text-darkmode-light;
@apply w-full rounded border-transparent bg-light px-6 py-4 text-text-dark placeholder:text-text-light focus:border-primary dark:focus:border-darkmode-primary focus:ring-transparent dark:border-darkmode-border dark:bg-darkmode-light dark:text-darkmode-text-light;
}
.form-label {
@apply mb-4 block font-secondary text-xl font-normal text-dark dark:text-darkmode-light;
@apply mb-4 block font-secondary text-xl font-normal text-text-dark dark:text-darkmode-text-light;
}