diff --git a/.storybook/main.ts b/.storybook/main.ts
index b7b5f01ea5..87298f8c84 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "@storybook/addon-themes",
   ],
   framework: {
     name: "@storybook/vue3-vite",
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 5ec33581a9..a0cf42df3d 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,6 +1,7 @@
 import { setup, Preview } from "@storybook/vue3";
 import { Quasar, Dialog, Loading, Notify } from "quasar";
 import iconSet from "quasar/icon-set/material-icons";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import { addActionsWithEmits } from "./utils/argTypesEnhancers";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
@@ -33,7 +34,34 @@ const preview: Preview = {
     docs: {
       toc: true,
     },
+    backgrounds: {
+      default: "theme",
+      values: [
+        {
+          name: "theme",
+          value: "var(--color-v2-background)",
+        },
+        {
+          name: "light",
+          value: "#fff",
+        },
+        {
+          name: "dark",
+          value: "#333",
+        },
+      ],
+    },
   },
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: "false",
+        dark: "true",
+      },
+      defaultTheme: "light",
+      attributeName: "is-dark-theme",
+    }),
+  ],
   argTypesEnhancers: [addActionsWithEmits],
 };
 
diff --git a/package-lock.json b/package-lock.json
index 374f5c0ae8..4b08371ee6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "@storybook/addon-essentials": "8.1.10",
         "@storybook/addon-interactions": "8.1.10",
         "@storybook/addon-links": "8.1.10",
+        "@storybook/addon-themes": "8.1.10",
         "@storybook/blocks": "8.1.10",
         "@storybook/test": "8.1.10",
         "@storybook/test-runner": "0.19.0",
@@ -5490,6 +5491,19 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/addon-themes": {
+      "version": "8.1.10",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-8.1.10.tgz",
+      "integrity": "sha512-3LdIa0T5OdPCpnZpZVktUAKFEjohOnggewInNDzfouMNk7k9Y7Qjc98wosri3LW6vEQYZGaoXS3F/XvMELkbTw==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/addon-toolbars": {
       "version": "8.1.10",
       "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.1.10.tgz",
diff --git a/package.json b/package.json
index b4da97ebc1..12347ee644 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,8 @@
   "scripts": {
     "test:unit": "vitest --run",
     "test-watch:unit": "vitest --watch",
-    "test:storybook": "test-storybook",
-    "test-watch:storybook": "test-storybook --watch",
+    "test:storybook": "test-storybook --testTimeout=60000",
+    "test-watch:storybook": "test-storybook --watch --testTimeout=60000",
     "test:electron-e2e": "cross-env VITE_TARGET=electron playwright test",
     "test-watch:electron-e2e": "cross-env PWTEST_WATCH=1 VITE_TARGET=electron playwright test",
     "test:browser-e2e": "cross-env VITE_TARGET=browser playwright test",
@@ -77,6 +77,7 @@
     "@storybook/addon-essentials": "8.1.10",
     "@storybook/addon-interactions": "8.1.10",
     "@storybook/addon-links": "8.1.10",
+    "@storybook/addon-themes": "8.1.10",
     "@storybook/blocks": "8.1.10",
     "@storybook/test": "8.1.10",
     "@storybook/test-runner": "0.19.0",
diff --git a/src/components/Base/BaseButton.stories.ts b/src/components/Base/BaseButton.stories.ts
new file mode 100644
index 0000000000..febb98d525
--- /dev/null
+++ b/src/components/Base/BaseButton.stories.ts
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseButton from "./BaseButton.vue";
+
+const meta: Meta<typeof BaseButton> = {
+  component: BaseButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseButton>;
+
+export const Default: Story = {
+  args: {
+    label: "Default",
+    variant: "default",
+    icon: "settings",
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    label: "Primary",
+    variant: "primary",
+    icon: "settings",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    label: "Danger",
+    variant: "danger",
+    icon: "settings",
+  },
+};
diff --git a/src/components/Base/BaseDocumentView.stories.ts b/src/components/Base/BaseDocumentView.stories.ts
new file mode 100644
index 0000000000..73a38d8a85
--- /dev/null
+++ b/src/components/Base/BaseDocumentView.stories.ts
@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseDocumentView from "./BaseDocumentView.vue";
+
+const meta: Meta<typeof BaseDocumentView> = {
+  component: BaseDocumentView,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseDocumentView>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BaseDocumentView },
+
+    setup() {
+      return { args };
+    },
+
+    template: `
+      <BaseDocumentView>
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <h5>Heading 5</h5>
+        <h6>Heading 6</h6>
+        <p>ParagraphParagraph<a href="#">Link</a>ParagraphParagraph<code>code</code>ParagraphParagraph</p>
+        <ul>
+          <li>List</li>
+          <li>List</li>
+          <li>List</li>
+        </ul>
+        <ol>
+          <li>List</li>
+          <li>List</li>
+          <li>List</li>
+        </ol>
+        <pre>pre</pre>
+        <details>
+        <summary>summary</summary>
+        <p>Details</p>
+        </details>
+        <table>
+          <thead>
+            <tr>
+              <th>Table Header</th>
+              <th>Table Header</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+            <tr>
+              <td>Table</td>
+              <td>Table</td>
+            </tr>
+          </tbody>
+        </table>
+      </BaseDocumentView>`,
+  }),
+};
diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index 94845a8e94..5b801c4392 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/src/components/Base/BaseDocumentView.vue
@@ -10,6 +10,8 @@
 @use "@/styles/v2/colors" as colors;
 
 .document {
+  color: colors.$display;
+
   :deep(*) {
     margin: 0;
   }
diff --git a/src/components/Base/BaseListItem.stories.ts b/src/components/Base/BaseListItem.stories.ts
new file mode 100644
index 0000000000..9be4f335b4
--- /dev/null
+++ b/src/components/Base/BaseListItem.stories.ts
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseListItem from "./BaseListItem.vue";
+
+const meta: Meta<typeof BaseListItem> = {
+  component: BaseListItem,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseListItem>;
+
+export const Default: Story = {
+  args: {
+    selected: false,
+  },
+  render: (args) => ({
+    components: { BaseListItem },
+    setup() {
+      return { args };
+    },
+    template: '<BaseListItem v-bind="args">ListItem</BaseListItem>',
+  }),
+};
+
+export const Selected: Story = {
+  ...Default,
+  args: {
+    selected: true,
+  },
+};
diff --git a/src/components/Base/BaseRowCard.stories.ts b/src/components/Base/BaseRowCard.stories.ts
new file mode 100644
index 0000000000..a6e5d85469
--- /dev/null
+++ b/src/components/Base/BaseRowCard.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseRowCard from "./BaseRowCard.vue";
+
+import BaseButton from "./BaseButton.vue";
+
+const meta: Meta<typeof BaseRowCard> = {
+  component: BaseRowCard,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseRowCard>;
+
+export const Default: Story = {
+  args: {
+    title: "Title",
+    description: "Description",
+    clickable: false,
+  },
+  render: (args) => ({
+    components: { BaseRowCard, BaseButton },
+    setup() {
+      return { args };
+    },
+    template:
+      '<BaseRowCard v-bind="args"><BaseButton label="RightControl" /></BaseRowCard>',
+  }),
+};
+
+export const Clickable: Story = {
+  ...Default,
+  args: {
+    title: "Title",
+    description: "Description",
+    clickable: true,
+  },
+};
diff --git a/src/components/Base/BaseScrollArea.stories.ts b/src/components/Base/BaseScrollArea.stories.ts
new file mode 100644
index 0000000000..0e72e5b3e7
--- /dev/null
+++ b/src/components/Base/BaseScrollArea.stories.ts
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseScrollArea from "./BaseScrollArea.vue";
+
+const meta: Meta<typeof BaseScrollArea> = {
+  component: BaseScrollArea,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseScrollArea>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BaseScrollArea },
+    setup() {
+      return { args };
+    },
+    template:
+      '<BaseScrollArea style="width: 100%; height:480px" v-bind="args"><div style="width: 100%; height:4800px;"></div></BaseScrollArea>',
+  }),
+};
diff --git a/src/components/Base/BaseSwitch.stories.ts b/src/components/Base/BaseSwitch.stories.ts
new file mode 100644
index 0000000000..47e9076ca3
--- /dev/null
+++ b/src/components/Base/BaseSwitch.stories.ts
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseSwitch from "./BaseSwitch.vue";
+
+const meta: Meta<typeof BaseSwitch> = {
+  component: BaseSwitch,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseSwitch>;
+
+export const Unchecked: Story = {
+  args: {
+    uncheckedLabel: "Off",
+    checkedLabel: "On",
+    checked: false,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    uncheckedLabel: "Off",
+    checkedLabel: "On",
+    checked: true,
+  },
+};
diff --git a/src/components/Base/BaseSwitch.vue b/src/components/Base/BaseSwitch.vue
index 7e29b09616..382bd0c678 100644
--- a/src/components/Base/BaseSwitch.vue
+++ b/src/components/Base/BaseSwitch.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="root">
-    <div class="label">{{ checked ? onLabel : offLabel }}</div>
+    <div class="label">{{ checked ? checkedLabel : uncheckedLabel }}</div>
     <SwitchRoot :id v-model:checked="checked" class="SwitchRoot">
       <SwitchThumb class="SwitchThumb" />
     </SwitchRoot>
@@ -12,8 +12,8 @@ import { SwitchRoot, SwitchThumb } from "radix-vue";
 
 defineProps<{
   id?: string;
-  offLabel?: string;
-  onLabel?: string;
+  uncheckedLabel?: string;
+  checkedLabel?: string;
 }>();
 
 const checked = defineModel<boolean>("checked", { required: true });
diff --git a/src/components/Dialog/ToolBarCustomDialog.vue b/src/components/Dialog/ToolBarCustomDialog.vue
index 06bffaec79..8a5763e6eb 100644
--- a/src/components/Dialog/ToolBarCustomDialog.vue
+++ b/src/components/Dialog/ToolBarCustomDialog.vue
@@ -87,8 +87,8 @@
                   >
                     <BaseSwitch
                       :checked="toolbarButtons.includes(key)"
-                      onLabel="表示する"
-                      offLabel="表示しない"
+                      checkedLabel="表示する"
+                      uncheckedLabel="表示しない"
                     />
                   </BaseRowCard>
                 </div>