style(theme): Switch Theme to Lara

Use lara-dark-teal as new default
sfxcode · Nov 14, 2023 · d5bcb43 · d5bcb43
1 parent 008c501
commit d5bcb43
Show file tree

Hide file tree

Showing 36 changed files with 13,974 additions and 36,551 deletions.
diff --git a/components/app/AppTopbar.vue b/components/app/AppTopbar.vue
@@ -76,7 +76,7 @@ function redirectToGithub (event: any) {
 <template>
   <div class="layout-topbar">
     <NuxtLink to="/" class="layout-topbar-logo">
-      <span>Nuxt3 PrimeVue Starter</span>
+      <span style="color: var(--primary-color)">Nuxt3 PrimeVue Starter</span>
     </NuxtLink>
 
     <button class="p-link layout-menu-button layout-topbar-button" @click="onMenuToggle()">
@@ -109,55 +109,45 @@ function redirectToGithub (event: any) {
       <OverlayPanel id="overlay_panel" ref="op" append-to="body" style="width: 200px">
         <div class="field-radiobutton">
           <RadioButton
-            id="saga"
+            id="lara-dark"
             v-model="themeStore.themeName"
             name="layoutColorMode"
-            value="saga"
-            @change="themeStore.setLight()"
+            value="lara-dark"
+            @change="themeStore.setTheme('lara-dark')"
           />
-          <label>Light</label>
+          <label>Lara Dark</label>
         </div>
         <div class="field-radiobutton">
           <RadioButton
-            id="vela"
+            id="lara-light"
             v-model="themeStore.themeName"
             name="layoutColorMode"
-            value="vela"
-            @change="themeStore.setDim()"
+            value="lara-light"
+            @change="themeStore.setTheme('lara-light')"
           />
-          <label>Dim</label>
-        </div>
-        <div class="field-radiobutton">
-          <RadioButton
-            id="arya"
-            v-model="themeStore.themeName"
-            name="layoutColorMode"
-            value="arya"
-            @change="themeStore.setDark()"
-          />
-          <label>Dark</label>
+          <label>Lara Light</label>
         </div>
 
         <h6>Primary Color</h6>
         <div class="flex">
           <div
-            style="width:2rem;height:2rem;border-radius:6px"
+            style="width:2rem;height:2rem;border-radius:6px;background-color:#10b981; "
+            class="bg-purple-500  mr-3  cursor-pointer"
+            @click="themeStore.setColor('teal')"
+          />
+          <div
+            style="width:2rem;height:2rem;border-radius:6px;background-color:#3B82F6; "
             class="bg-blue-500 mr-3 cursor-pointer"
             @click="themeStore.setColor('blue')"
           />
           <div
-            style="width:2rem;height:2rem;border-radius:6px"
+            style="width:2rem;height:2rem;border-radius:6px;background-color:#6366F1; "
             class="bg-green-500 mr-3 cursor-pointer"
-            @click="themeStore.setColor('green')"
+            @click="themeStore.setColor('indigo')"
           />
           <div
-            style="width:2rem;height:2rem;border-radius:6px"
+            style="width:2rem;height:2rem;border-radius:6px;background-color:#8B5CF6; "
             class="bg-yellow-300 mr-3 cursor-pointer"
-            @click="themeStore.setColor('orange')"
-          />
-          <div
-            style="width:2rem;height:2rem;border-radius:6px"
-            class="bg-purple-500 cursor-pointer"
             @click="themeStore.setColor('purple')"
           />
         </div>

diff --git a/composables/layout.ts b/composables/layout.ts
@@ -5,7 +5,7 @@ const layoutConfig = reactive({
   darkTheme: false,
   inputStyle: 'outlined',
   menuMode: 'static',
-  theme: 'lara-light-indigo',
+  theme: 'lara-dark-teal',
   scale: 14,
   activeMenuItem: null
 })

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -14,8 +14,7 @@ watch(isSidebarActive, (newVal) => {
 })
 const containerClass = computed(() => {
   return {
-    'layout-theme-light': layoutConfig.darkTheme.value === 'light',
-    'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
+    dark: themeStore.isDarkMode,
     'layout-overlay': layoutConfig.menuMode.value === 'overlay',
     'layout-static': layoutConfig.menuMode.value === 'static',
     'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
@@ -57,7 +56,7 @@ const isOutsideClicked = (event) => {
 
 <template>
   <div>
-    <Link rel="stylesheet" :href="themeStore.link || 'https://cdn.jsdelivr.net/npm/[email protected]/resources/themes/vela-blue/theme.css'" />
+    <Link rel="stylesheet" :href="themeStore.link" />
     <div class="layout-wrapper" :class="containerClass">
       <app-topbar />
       <div class="layout-sidebar">

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -41,6 +41,9 @@ export default defineNuxtConfig({
   primevue: {
     components: {
       exclude: ['Chart']
+    },
+    options: {
+      ripple: true
     }
   },
   css: [

diff --git a/package.json b/package.json
@@ -16,34 +16,34 @@
     "test:coverage": "vitest run --coverage"
   },
   "devDependencies": {
-    "@formkit/nuxt": "1.2.2",
+    "@formkit/nuxt": "1.3.0",
     "@iconify-json/carbon": "^1.1.21",
     "@iconify-json/mdi": "^1.1.55",
     "@iconify-json/prime": "^1.1.6",
     "@iconify-json/twemoji": "^1.1.12",
     "@nuxt/content": "2.9.0",
-    "@nuxt/devtools": "1.0.0",
-    "@nuxt/test-utils": "^3.8.0",
+    "@nuxt/devtools": "1.0.2",
+    "@nuxt/test-utils": "^3.8.1",
     "@nuxtjs/eslint-config-typescript": "12.1.0",
     "@nuxtjs/i18n": "8.0.0-rc.5",
     "@pinia/nuxt": "^0.5.1",
-    "quill": "^1.3.7",
-    "@sfxcode/formkit-primevue": "^1.4.5",
+    "@sfxcode/formkit-primevue": "^1.5.1",
     "@tiptap/extension-highlight": "^2.1.12",
     "@tiptap/extension-text-align": "^2.1.12",
     "@tiptap/extension-text-style": "^2.1.12",
     "@tiptap/pm": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
     "@tiptap/vue-3": "^2.1.12",
-    "@unocss/nuxt": "0.57.1",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@unocss/nuxt": "0.57.4",
+    "@vitejs/plugin-vue": "^4.4.1",
     "@vitest/ui": "^0.34.6",
-    "@vueuse/nuxt": "^10.5.0",
+    "@vueuse/nuxt": "^10.6.1",
     "c8": "^8.0.1",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "jsdom": "^22.1.0",
-    "nuxt": "3.8.0",
-    "nuxt-primevue": "^0.1.0",
+    "nuxt": "3.8.1",
+    "nuxt-primevue": "^0.2.0",
+    "quill": "^1.3.7",
     "sass": "^1.69.5",
     "typescript": "^5.2.2",
     "unstorage": "^1.9.0",

diff --git a/pages/stores.vue b/pages/stores.vue
@@ -12,7 +12,7 @@ onMounted(async () => {
 <template>
   <div class="card">
     <h5>Store Settings</h5>
-    <h5 class="font-bold text-2xl mb-4 text-blue-600">
+    <h5 class="font-bold text-2xl mb-4">
       Primevue Theme Store
     </h5>
     <div class="grid grid-cols-2  gap-4">
@@ -22,7 +22,7 @@ onMounted(async () => {
       <div>{{ themeStore.themeColor }}</div>
     </div>
 
-    <h5 class="font-bold text-2xl mb-4 text-blue-600">
+    <h5 class="font-bold text-2xl mb-4">
       Data Store (Option Store)
     </h5>
     <span class="text-xs">Example of a Data Store</span>
@@ -31,7 +31,7 @@ onMounted(async () => {
       <div>{{ dataStore.products.length }}</div>
     </div>
 
-    <h5 class="font-bold text-2xl mb-4 text-blue-600">
+    <h5 class="font-bold text-2xl mb-4">
       Counter Store (Setup Store)
     </h5>
     <span class="text-xs">Example of a Data Store</span>
@@ -49,4 +49,10 @@ onMounted(async () => {
   </div>
 </template>
 
-<style scoped></style>
+<style lang='scss' scoped>
+
+h5 {
+  color: var(--primary-color)
+}
+
+</style>