From 515b3b71e04b91acf7d7d72c77905f3a17191fb5 Mon Sep 17 00:00:00 2001 From: Somrat <58769763+tfsomrat@users.noreply.github.com> Date: Mon, 17 Feb 2025 11:37:24 +0600 Subject: [PATCH] update theme variable --- assets/css/base.css | 2 +- assets/css/buttons.css | 4 ++-- assets/css/components.css | 16 ++++++++-------- assets/css/module-overrides.css | 8 ++++---- assets/css/navigation.css | 6 +++--- assets/css/safe.css | 2 +- assets/css/utilities.css | 6 +++--- exampleSite/data/theme.json | 16 ++++++++-------- layouts/404.en.html | 2 +- layouts/_default/list.html | 2 +- layouts/_default/terms.html | 4 ++-- layouts/blog/single.html | 2 +- layouts/index.html | 8 ++++---- layouts/partials/call-to-action.html | 2 +- layouts/partials/components/author-card.html | 3 +-- layouts/partials/components/pagination.html | 12 ++++++------ layouts/partials/essentials/footer.html | 5 +++-- layouts/partials/essentials/header.html | 8 ++++---- layouts/partials/page-header.html | 2 +- layouts/partials/widgets/categories.html | 2 +- layouts/partials/widgets/tags.html | 4 ++-- 21 files changed, 58 insertions(+), 58 deletions(-) diff --git a/assets/css/base.css b/assets/css/base.css index 3d96dca..397aec3 100755 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -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, diff --git a/assets/css/buttons.css b/assets/css/buttons.css index b44a41d..6fffcdf 100755 --- a/assets/css/buttons.css +++ b/assets/css/buttons.css @@ -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; } diff --git a/assets/css/components.css b/assets/css/components.css index a851864..6b237bb 100755 --- a/assets/css/components.css +++ b/assets/css/components.css @@ -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; @@ -29,26 +29,26 @@ /* 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; } .content .btn { - @apply dark:hover:text-dark no-underline hover:!text-white; + @apply dark:hover:text-text-dark no-underline hover:!text-white; } diff --git a/assets/css/module-overrides.css b/assets/css/module-overrides.css index 45369e4..d5093a0 100644 --- a/assets/css/module-overrides.css +++ b/assets/css/module-overrides.css @@ -22,10 +22,10 @@ @apply border-border dark:border-darkmode-border overflow-hidden rounded-lg border; } .tab-nav { - @apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light pl-4; + @apply border-border bg-light dark:border-darkmode-border dark:bg-darkmode-light pl-4; } .tab-nav-item { - @apply text-dark dark:text-darkmode-dark px-8 !text-lg; + @apply text-text-dark dark:text-darkmode-text-dark px-8 !text-lg; } .tab-nav-item.active { @apply border-dark dark:border-darkmode-primary; @@ -37,10 +37,10 @@ /* accordion */ .accordion { - @apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light mb-6 overflow-hidden rounded-lg border; + @apply border-border bg-light dark:border-darkmode-border dark:bg-darkmode-light mb-6 overflow-hidden rounded-lg border; } .accordion-header { - @apply text-dark dark:text-darkmode-dark; + @apply text-text-dark dark:text-darkmode-text-dark; } /* cookie consent */ diff --git a/assets/css/navigation.css b/assets/css/navigation.css index 1ffbf28..7061bbd 100755 --- a/assets/css/navigation.css +++ b/assets/css/navigation.css @@ -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 */ diff --git a/assets/css/safe.css b/assets/css/safe.css index ec69497..f0fc000 100644 --- a/assets/css/safe.css +++ b/assets/css/safe.css @@ -1,6 +1,6 @@ /* swiper 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 { diff --git a/assets/css/utilities.css b/assets/css/utilities.css index f8db083..eb4664a 100755 --- a/assets/css/utilities.css +++ b/assets/css/utilities.css @@ -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; } diff --git a/exampleSite/data/theme.json b/exampleSite/data/theme.json index 6417eb8..4924af2 100644 --- a/exampleSite/data/theme.json +++ b/exampleSite/data/theme.json @@ -5,13 +5,13 @@ "primary": "#121212", "body": "#fff", "border": "#eaeaea", - "theme_light": "#f6f6f6", - "theme_dark": "" + "light": "#f6f6f6", + "dark": "#040404" }, "text_color": { "text": "#444444", - "dark": "#040404", - "light": "#717171" + "text-dark": "#040404", + "text-light": "#717171" } }, "darkmode": { @@ -19,13 +19,13 @@ "primary": "#fff", "body": "#1c1c1c", "border": "#3E3E3E", - "theme_light": "#222222", - "theme_dark": "" + "light": "#222222", + "dark": "#fff" }, "text_color": { "text": "#B4AFB6", - "dark": "#fff", - "light": "#B4AFB6" + "text-dark": "#fff", + "text-light": "#B4AFB6" } } }, diff --git a/layouts/404.en.html b/layouts/404.en.html index 9d174c6..bf7f1ce 100755 --- a/layouts/404.en.html +++ b/layouts/404.en.html @@ -4,7 +4,7 @@