feat: add dark mode support (#102)

* feat: alert dark mode * feat: dark mode autocomplete * fix(alert): improve alert dark mode * fix(avatar): dark mode * fix(badge): add dark mode * fix(breadcrumbs): add dark mode & fix typo class * fix(VAppBar): fix sticky value * fix(card): add dark mode * fix(table): add dark mode * fix: dark mode pagination and table pagination * fix(dropdown): add dark mode * fix(list): add dark mode * fix(button): add dark mode * fix(checkbox): add dark mode * chore: fix path * feat(VInput): add dark mode * feat(VRadio): add dark mode * feat(VFormGroup): add dark mode * feat(VMultiSelect): add dark mode * feat(VRadioGroup): add dark mode * feat(VFormSelect): add dark mode * feat(VMenus): add dark mode * feat(VModal): add dark mode * feat(VIcon): add dark mode * feat(NavDrawer): add dark mode * feat(ProgressBar): add dark mode * feat(VSelect): add dark mode * feat(VShimmer): add dark mode * feat(VSwitch): add dark mode * feat(Vtabs): add dark mode * feat(ui): add dark mode styles * feat(nuxt): add new `darkMode` option * feat(nuxt): load transition css when not using css or sass bundle * chore(nuxt): update nuxt playground * feat: dark mode * feat(AppBar): dark mode * docs: add dark mode docs * docs: update readme * chore: remove unused import * chore(story): update dark mode stories * docs: update * feat(autocomplete): add css variable and improve dark mode * chore: fix dark mode story for v-data-table-pagination * feat: alert dark mode * feat: dark mode autocomplete * fix(alert): improve alert dark mode * fix(avatar): dark mode * fix(badge): add dark mode * fix(breadcrumbs): add dark mode & fix typo class * fix(VAppBar): fix sticky value * fix(card): add dark mode * fix(table): add dark mode * fix: dark mode pagination and table pagination * fix(dropdown): add dark mode * fix(list): add dark mode * fix(button): add dark mode * fix(checkbox): add dark mode * chore: fix path * feat(VInput): add dark mode * feat(VRadio): add dark mode * feat(VFormGroup): add dark mode * feat(VMultiSelect): add dark mode * feat(VRadioGroup): add dark mode * feat(VFormSelect): add dark mode * feat(VMenus): add dark mode * feat(VModal): add dark mode * feat(VIcon): add dark mode * feat(NavDrawer): add dark mode * feat(ProgressBar): add dark mode * feat(VSelect): add dark mode * feat(VShimmer): add dark mode * feat(VSwitch): add dark mode * feat(Vtabs): add dark mode * feat(ui): add dark mode styles * feat(nuxt): add new `darkMode` option * feat(nuxt): load transition css when not using css or sass bundle * chore(nuxt): update nuxt playground * feat: dark mode * feat(AppBar): dark mode * docs: add dark mode docs * docs: update readme * chore: remove unused import * chore(story): update dark mode stories * docs: update * feat(autocomplete): add css variable and improve dark mode * chore: fix dark mode story for v-data-table-pagination * chore: remove extra whitespace
gitsindonesia · Jan 17, 2023 · 2168185 · 2168185
1 parent 15dfda7
commit 2168185
Show file tree

Hide file tree

Showing 120 changed files with 2,039 additions and 227 deletions.
diff --git a/README.md b/README.md
@@ -20,8 +20,9 @@ GITS UI is the official UI Component Library in GITS Indonesia built with Vue 3
 - 🚀 Provides [TypeScript](https://www.typescriptlang.org/) support by default
 - 🎨 Allows for customization with CSS properties
 - 🔌 Modular design: allows for use as a complete UI framework or as individual plugins
-- 🏷 Headless by default
-- 🌈 Theming support (coming soon)
+- 🏷 Headless component by default
+- 🎨 Dark mode: ships with dark mode styles out-of-the-box
+- 🌈 Theming support: create your own custom theme easily
 
 ## Documentation
 

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -28,6 +28,7 @@ export default defineConfig({
           {text: 'Getting Started', link: '/guide/getting-started'},
           {text: 'Customization', link: '/guide/customization'},
           {text: 'Default Theme', link: '/guide/theme'},
+          {text: 'Dark Mode', link: '/guide/dark-mode'},
           {text: 'Starter', link: '/guide/starter'},
           {text: 'Migration', link: '/guide/migration'},
           {text: 'Changelog', link: '/guide/changelog'},

diff --git a/docs/guide/dark-mode.md b/docs/guide/dark-mode.md
@@ -0,0 +1,74 @@
+# Dark Mode
+
+The GITS UI includes dark mode support by default, however, to enable it, you will need to load the styles explicitly.
+
+## Tailwind Configuration
+
+To enable dark mode, you need to set the `darkMode` option to `class` in your Tailwind config file.
+
+```ts {2}
+module.exports = {
+  darkMode: 'class',
+};
+```
+
+## Enabling Dark Mode on a Vue App
+
+To enable dark mode on a Vue application, load the dark mode styles in your `main.ts` file.
+
+```ts {10}
+import {createApp} from 'vue';
+import {createPinia} from 'pinia';
+import App from './App.vue';
+import router from './router';
+import GitsUi from '@gits-id/ui';
+import './assets/index.css';
+import '@gits-id/ui/styles.scss';
+
+// load dark mode styles
+import '@gits-id/ui/styles.dark';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+app.use(GitsUi);
+
+app.mount('#app');
+```
+
+## Enabling Dark Mode on a Nuxt App
+
+To enable dark mode on a Nuxt application, set the value of `darkMode` option to `true` in your `nuxt.config.ts` file.
+
+```ts {4}
+export default defineNuxtConfig({
+  modules: ['@gits-id/ui-nuxt', '@nuxtjs/tailwindcss'],
+  gitsUi: {
+    darkMode: true,
+  },
+});
+```
+
+## Toggling between dark and light mode
+
+You can toggle between `dark` and `light` mode by toggling the `class` of the parent element between `dark` or `light`. For example, you can set the value of the `html` class to `dark` to enable dark mode and `light` to enable light mode.
+
+```vue
+<script setup lang="ts">
+const toggleDarkMode = () => {
+  const html = document.querySelector('html');
+  html?.classList?.toggle('dark');
+};
+
+const darkMode = ref(false);
+</script>
+
+<template>
+  <VSwitch
+    v-model="darkMode"
+    label="Dark Mode"
+    @update:model-value="toggleDarkMode"
+  />
+</template>
+```
diff --git a/docs/index.md b/docs/index.md
@@ -37,5 +37,8 @@ features:
     details: GITS UI comes with TypeScript support out-of-the-box.
   - icon: 🎨
     title: Themes
-    details: GITS UI includes support for theming (soon).
+    details: GITS UI includes support for theming.
+  - icon: 🎨
+    title: Dark Mode
+    details: Support dark mode out-of-the-box.
 ---
diff --git a/packages/alert/README.md b/packages/alert/README.md
@@ -6,18 +6,20 @@ GITS Alert component is a flexible alert component that can be used to display v
 
 Install with your prefered package manager.
 
-
 With NPM:
+
 ```
 npm i @gits-id/alert
 ```
 
 With Yarn:
+
 ```
 yarn add @gits-id/alert
 ```
 
 With PNPM:
+
 ```
 pnpm i @gits-id/alert
 ```
@@ -30,8 +32,13 @@ To use the component, you can simply include it in your template like this:
 <script setup lang="ts">
 // import component
 import VAlert from '@gits-id/alert';
-// import styles
+// import styles (includes dark mode)
 import '@gits-id/alert/dist/style.css';
+// or import the SASS styles
+import '@gits-id/alert/src/VAlert.scss';
+// if are using SASS bundle and want to add dark mode support,
+// uncomment this line
+// import '@gits-id/alert/src/VAlert.dark.scss';
 </script>
 
 <template>

diff --git a/packages/alert/src/VAlert.dark.scss b/packages/alert/src/VAlert.dark.scss
@@ -0,0 +1,37 @@
+.dark {
+  .alert {
+    // default variant
+    &-default:not(.alert--outlined):not(.alert--bordered):not(.alert--solid) {
+      --alert-bg-color: theme('colors.neutral.800');
+      --alert-text-color: theme('colors.neutral.200');
+      --alert-border-color: theme('colors.neutral.800');
+    }
+
+    // solid variant
+    &--solid {
+      &.alert-default {
+        --alert-bg-color: theme('colors.neutral.800');
+        --alert-border-color: theme('colors.neutral.800');
+        --alert-text-color: theme('colors.neutral.200');
+      }
+    }
+
+    // outlined variant
+    &--outlined {
+      &.alert-default {
+        --alert-text-color: theme('colors.neutral.200');
+      }
+      &.alert-dark {
+        --alert-text-color: theme('colors.neutral.200');
+        --alert-border-color: theme('colors.neutral.700');
+      }
+    }
+
+    // bordered variant
+    &--bordered {
+      &.alert-default {
+        --alert-text-color: theme('colors.neutral.800');
+      }
+    }
+  }
+}
diff --git a/packages/alert/src/VAlert.stories.ts b/packages/alert/src/VAlert.stories.ts
@@ -5,6 +5,7 @@ import Icon from '@gits-id/icon';
 import AlertVModelStory from './stories/AlertVModelStory.vue';
 import AlertTransitionStory from './stories/AlertTransitionStory.vue';
 import AlertCustomStory from './stories/AlertCustomStory.vue';
+import './VAlert.dark.scss';
 
 export default {
   title: 'Components/Alert',
@@ -164,3 +165,29 @@ export const Custom = () => ({
   components: {AlertCustomStory},
   template: `<AlertCustomStory />`,
 });
+
+export const DarkMode = () => ({
+  components: {VAlert, Icon},
+  setup() {
+    return {
+      variants: ['default', 'solid', 'outlined', 'bordered'],
+      themeColors,
+    };
+  },
+  template: `
+<div class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6">
+  <div v-for="variant in variants" :key="variant" class="mt-5">
+    <p class="font-semibold text-lg mb-2">{{ variant }}</p>
+    <v-alert
+      v-for="color in themeColors"
+      :color="color"
+      :key="color"
+      class="mb-2"
+      v-bind:[variant]="true"
+    >
+      Change a few things up and try submitting again.
+    </v-alert>
+  </div>
+</div>
+  `,
+});
diff --git a/packages/alert/src/index.ts b/packages/alert/src/index.ts
@@ -1,3 +1,5 @@
 import VAlert from './VAlert.vue';
+import './VAlert.dark.scss';
+
 export {VAlert};
 export default VAlert;
diff --git a/packages/app-bar/src/VAppBar.dark.scss b/packages/app-bar/src/VAppBar.dark.scss
@@ -0,0 +1,9 @@
+.dark {
+  .app-bar {
+    &-default {
+      --app-bar-bg-color: theme('colors.neutral.800');
+      --app-bar-color: theme('colors.neutral.200');
+      --app-bar-border-color: theme('borderColor.neutral.700');
+    }
+  }
+}
diff --git a/packages/app-bar/src/VAppBar.scss b/packages/app-bar/src/VAppBar.scss
@@ -34,7 +34,7 @@
 
   // sticky
   &--sticky {
-    position: 'sticky';
+    position: sticky;
     top: 0;
     left: 0;
     right: 0;

diff --git a/packages/app-bar/src/VAppBar.stories.ts b/packages/app-bar/src/VAppBar.stories.ts
@@ -8,6 +8,7 @@ import {VInput} from '@gits-id/forms';
 import '@gits-id/button/src/VBtn.scss';
 import '@gits-id/forms/src/forms.scss';
 import '@gits-id/theme/transition.css';
+import './VAppBar.dark.scss';
 
 export default {
   title: 'Components/AppBar',
@@ -353,3 +354,17 @@ export const BackdropBlur: Story<{}> = (args) => ({
 </main>
 `,
 });
+
+export const DarkMode: Story<{}> = () => ({
+  components: {VAppBar},
+  setup() {
+    return {defaultColors};
+  },
+  template: `
+<main class="dark dark:bg-neutral-900 dark:text-neutral-200 p-6 space-y-2">
+  <VAppBar v-for="color in defaultColors" :key="color" :color="color">
+    {{ color }}
+  </VAppBar>
+</main>
+`,
+});
diff --git a/packages/app-bar/src/index.ts b/packages/app-bar/src/index.ts
@@ -1,4 +1,5 @@
 import VAppBar from './VAppBar.vue';
+import './VAppBar.dark.scss';
 
 export * from './types';
 export {VAppBar};

diff --git a/packages/autocomplete/src/VAutocomplete.dark.scss b/packages/autocomplete/src/VAutocomplete.dark.scss
@@ -0,0 +1,49 @@
+.dark {
+  .autocomplete {
+    // field
+    --v-autocomplete-field-bg-color: theme('colors.neutral.800');
+    --v-autocomplete-field-border-color: theme('borderColor.neutral.700');
+
+    // field hover
+    --v-autocomplete-field-hover-border-color: theme('borderColor.neutral.800');
+
+    // input
+    --v-autocomplete-input-color: theme('colors.neutral.600');
+
+    // input selected
+    --v-autocomplete-input-selected-color: theme('colors.neutral.200');
+
+    // clearable button
+    --v-autocomplete-clearable-button-color: theme('colors.neutral.400');
+
+    // clearable button hover
+    --v-autocomplete-clearable-button-hover-color: theme('colors.neutral.500');
+    --v-autocomplete-clearable-button-hover-bg-color: theme(
+      'colors.neutral.500'
+    );
+
+    // icon
+    --v-autocomplete-icon-color: theme('colors.neutral.400');
+
+    // options
+    --v-autocomplete-options-bg-color: theme('colors.neutral.800');
+
+    // empty
+    --v-autocomplete-empty-color: theme('colors.neutral.700');
+
+    // item
+    --v-autocomplete-item-color: theme('colors.neutral.200');
+
+    // item selected
+    --v-autocomplete-item-selected-color: theme('colors.primary.500');
+
+    // item selected item
+    --v-autocomplete-item-selected-icon-color: theme('colors.primary.500');
+
+    // item inactive
+    --v-autocomplete-item-inactive-color: theme('colors.neutral.200');
+
+    // item active
+    --v-autocomplete-item-active-bg-color: theme('colors.neutral.700');
+  }
+}