Further updates

- Rename snippets to match naming schema
- Fix incorrect framing for example
- Add disclaimer that globals is probably a better option

docs/snippets/common/args-in-preview.js.mdx

@@ -0,0 +1,8 @@
+```js
+// .storybook/preview.js
+
+export default {
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+};
+```

docs/snippets/common/args-in-preview.ts-4-9.mdx

@@ -0,0 +1,13 @@
+```ts
+// .storybook/preview.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import { Preview } from '@storybook/your-renderer';
+
+const preview = {
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+} satisfies Preview;
+
+export default preview;
+```

docs/snippets/common/args-in-preview.ts.mdx

@@ -0,0 +1,13 @@
+```ts
+// .storybook/preview.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.)
+import { Preview } from '@storybook/your-renderer';
+
+const preview: Preview = {
+  // The default value of the theme arg for all stories
+  args: { theme: 'light' },
+};
+
+export default preview;
+```

docs/writing-stories/args.md

@@ -91,19 +91,25 @@ You can also define args at the component level; they will apply to all the comp
 
 ## Global args
 
-You can also define args at the global level; they will apply to every component's stories unless you overwrite them. To do so, export the `args` key in your `preview.js`:
+You can also define args at the global level; they will apply to every component's stories unless you overwrite them. To do so, define the `args` property in the default export of `preview.js`:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'common/button-story-project-args-theme.js.mdx',
-    'common/button-story-project-args-theme.ts.mdx',
+    'common/args-in-preview.js.mdx',
+    'common/args-in-preview.ts.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
+<div class="aside">
+
+💡 For most uses of global args, [globals](../essentials/toolbars-and-globals.md) are a better tool for defining globally-applied settings, such as a theme. Using `globals` enables users to change the value with the toolbar menu.
+
+</div>
+
 ## Args composition
 
 You can separate the arguments to a story to compose in other stories. Here's how you can combine args for multiple stories of the same component.