RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change dark primary color

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-12-04 02:26:50 +06:00
parent 2ea89960f1
commit ec320975f9
11 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.vscode/settings.json vendored
View File

@@ -11,5 +11,11 @@
"**/.svn/**",
"**/.nuxt/**"
],
"cSpell.words": ["cloudinary", "Namecheap", "Nuxt", "Tailwindcss"]
"cSpell.words": [
"cloudinary",
"Namecheap",
"Nuxt",
"spacegrotesk",
"Tailwindcss"
]
}

2
app.vue
View File

@@ -60,7 +60,7 @@ useHead({
</script>
<template>
<div class="bg-[#F1F2F4] dark:text-zinc-300 dark:bg-[#151818]">
<div class="bg-[#F1F2F4] dark:text-zinc-300 dark:bg-slate-950">
<NuxtLayout>
<NuxtLoadingIndicator />
<NuxtPage />

2
components/blog/Header.vue
View File

@@ -41,7 +41,7 @@ withDefaults(defineProps<Props>(), {
<div class="flex items-center gap-2 flex-wrap my-5">
<LogoTag />
<template v-for="tag in tags" :key="tag">
<span class="bg-gray-200 dark:bg-zinc-700 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
<span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{ tag }}</span>
</template>
</div>
</div>

2
components/blog/Toc.vue
View File

@@ -7,7 +7,7 @@ const links = articles?.body?.toc?.links || []
<template>
<div class="lg:col-span-3 sticky top-28 h-96 hidden lg:block justify-self-end">
<div class="border dark:border-gray-800 p-3 rounded-md min-w-[200px]">
<div class="border dark:border-gray-800 p-3 rounded-md min-w-[200px] dark:bg-slate-900">
<h1 class="text-sm font-bold mb-3 border-b dark:border-gray-800 pb-2">
Table Of Content
</h1>

2
components/category/topic.vue
View File

@@ -17,7 +17,7 @@ const category = computed(() => {
<template>
<div class="container mx-auto">
<div class="p-6 my-4 mx-3 rounded-md bg-gray-200 dark:bg-gray-800">
<div class="p-6 my-4 mx-3 rounded-md bg-gray-200 dark:bg-slate-900">
<h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
#{{ category }}
</h1>

8
components/footer/devloper.vue
View File

@@ -11,7 +11,7 @@
<NuxtLink
to="https://github.com/nurRiyad"
target="_blank"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
aria-label="Github"
>
<Icon name="fa:github" size="1em" />
@@ -19,7 +19,7 @@
<NuxtLink
to="https://www.linkedin.com/in/nur-riyad/"
target="_blank"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
aria-label="LinkedIn"
>
<Icon name="fa:linkedin-square" size="1em" />
@@ -27,7 +27,7 @@
<NuxtLink
to="https://twitter.com/qdnvubp"
target="_blank"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
aria-label="Twitter"
>
<Icon name="fa:twitter-square" size="1em" />
@@ -35,7 +35,7 @@
<NuxtLink
to="https://stackoverflow.com/users/16781395/nur-riyad"
target="_blank"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
aria-label="StackOverflow"
>
<Icon name="fa:stack-overflow" size="1em" />

2
components/main/footer.vue
View File

@@ -5,7 +5,7 @@ const path = computed(() => route.fullPath.replace('/', ''))
</script>
<template>
<div class="py-5 border-t dark:border-gray-800 mt-5 text-zinc-700 dark:text-zinc-300 ">
<div class="py-5 border-t dark:border-gray-800 mt-5 text-zinc-700 dark:text-zinc-300">
<div class="px-6 container max-w-5xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3">
<FooterSite v-if="path === 'about'" />

17
components/main/header.vue
View File

@@ -37,20 +37,21 @@ function onClick(val: string) {
</li>
<li>
<ClientOnly>
<button
v-if="colorMode.value === 'dark'"
name="dark-mode" title="Dark"
class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
@click="onClick('light')"
>
<Icon name="icon-park:moon" size="20" />
</button>
<button
v-if="colorMode.value === 'light'"
name="light-mode"
title="Light"
class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
@click="onClick('dark')"
>
<Icon name="icon-park:moon" size="20" />
</button>
<button
v-if="colorMode.value === 'dark'"
name="dark-mode"
title="Dark"
class="hover:scale-110 transition-all ease-out hover:cursor-pointer"
@click="onClick('light')"
>
<Icon name="noto:sun" size="20" />
</button>

2
layouts/default.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="gd-container font-spacegrotesk">
<header class="fixed w-full bg-[#F1F2F4] dark:bg-[#151818] z-10">
<header class="fixed w-full bg-[#F1F2F4] dark:bg-slate-950 z-10">
<MainHeader />
</header>
<main>

10
pages/about.vue
View File

@@ -16,7 +16,7 @@ defineOgImage()
<NuxtLink
to="https://github.com/nurRiyad"
target="_blank"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
aria-label="Github"
>
<Icon name="fa:github" size="1em" />
@@ -24,7 +24,7 @@ defineOgImage()
<NuxtLink
to="https://www.linkedin.com/in/nur-riyad/"
target="_blank"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
aria-label="LinkedIn"
>
<Icon name="fa:linkedin-square" size="1em" />
@@ -32,7 +32,7 @@ defineOgImage()
<NuxtLink
to="https://twitter.com/qdnvubp"
target="_blank"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
aria-label="Twitter"
>
<Icon name="fa:twitter-square" size="1em" />
@@ -40,14 +40,14 @@ defineOgImage()
<NuxtLink
to="https://stackoverflow.com/users/16781395/nur-riyad"
target="_blank"
class="p-2 bg-gray-300 text-gray-800 rounded-md"
class="px-3 py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
aria-label="StackOverflow"
>
<Icon name="fa:stack-overflow" size="1em" />
</NuxtLink>
</div>
</div>
<div class="sm:hidden block col-span-3 pb-5">
<div class="sm:hidden block col-span-3 pb-5 dark:bg-slate-700 dark:text-[#F1F2F4]">
<NuxtImg
src="/riyad.jpg"
width="125"

2
pages/blogs/index.vue
View File

@@ -80,7 +80,7 @@ defineOgImage()
v-model="searchTest"
placeholder="Search"
type="text"
class="block w-full bg-[#F1F2F4] dark:bg-zinc-800 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
>
</div>