diff --git a/apps/OpenSign/docs/DARK_MODE_USAGE.md b/apps/OpenSign/docs/DARK_MODE_USAGE.md
new file mode 100644
index 0000000000..0ebf8f7095
--- /dev/null
+++ b/apps/OpenSign/docs/DARK_MODE_USAGE.md
@@ -0,0 +1,213 @@
+# Tailwind Dark Mode Usage Guide
+
+## Overview
+This guide shows how to use the new Tailwind utilities for better dark mode visibility in OpenSign.
+
+## Button Styling
+
+### VS Code-style Disabled Buttons
+```jsx
+// Option 1: Direct VS Code styling
+
+
+// Option 2: Themed disabled styling
+
+
+// Option 3: Conditional styling
+
+```
+
+## Icon Styling
+
+### Theme-aware Icons
+```jsx
+// Better visibility in dark mode
+
+
+// Muted but still visible
+
+
+// Disabled state
+
+```
+
+### CSS Variable Approach
+```jsx
+// Using CSS variables
+
+
+
+// Inline styles with CSS variables
+
+```
+
+### Legacy JavaScript Function (Still Supported)
+```jsx
+// Existing approach - still works
+
+```
+
+## Text Styling
+
+### Improved Gray Text
+```jsx
+// These automatically improve in dark mode
+More visible in dark mode
+Muted but readable
+Clear text
+```
+
+## Complete Examples
+
+### Toolbar with Better Visibility
+```jsx
+const Toolbar = () => (
+
+
+
+
+
+);
+```
+
+### Form with Disabled States
+```jsx
+const Form = ({ isSubmitting }) => (
+
+);
+```
+
+## React-Tour and Tooltip Dark Mode Support
+
+### React-Tour Modals
+The react-tour modals now automatically support dark mode with VS Code-inspired styling:
+
+```jsx
+// These components automatically get dark mode styling
+
+```
+
+### ReactTooltip Components
+All ReactTooltip instances now support dark mode:
+
+```jsx
+// Automatically styled for dark mode
+
+
+
Tooltip content
+
+
+```
+
+### HoverCard Balloon UI
+The balloon tooltips in OpenSign Drive now properly support dark mode:
+
+```jsx
+// These automatically get dark styling in dark mode
+
+
+ Document information
+
+
+```
+
+## Dark Mode Features Added
+
+### 1. **React-Tour Modal Styling**
+- Background: `#1F2937` (VS Code modal background)
+- Text: `#E5E7EB` (soft white for readability)
+- Borders: `#374151` (subtle borders)
+- Buttons: VS Code-style primary/secondary buttons
+
+### 2. **ReactTooltip Styling**
+- Background: `#1F2937` with proper contrast
+- Border: `#374151` for definition
+- Box shadow: Enhanced for dark backgrounds
+- Text: `#E5E7EB` for optimal readability
+
+### 3. **HoverCard Balloon UI**
+- Background: `#1F2937` (matches VS Code)
+- Text: `#E5E7EB` for readability
+- Arrow: Automatically matches background color
+- Enhanced shadows for dark backgrounds
+
+### 4. **React-Datepicker Support**
+- Calendar background: `#1F2937`
+- Selected dates: VS Code blue (`#007ACC`)
+- Hover states: Proper contrast ratios
+- Navigation arrows: Themed appropriately
+
+## CSS Classes Reference
+
+| Class | Purpose | Dark Mode Color |
+|-------|---------|----------------|
+| `icon-improved` | Better icon visibility | `#CCCCCC` |
+| `icon-muted` | Muted but visible icons | `#999999` |
+| `icon-disabled` | Disabled icon state | `#858585` |
+| `op-btn-vscode-disabled` | VS Code disabled button | Background: `#3C3C3C` |
+| `btn-themed-disabled` | Themed disabled button | Uses CSS variables |
+| `icon-themed` | Variable-based icon color | `var(--icon-color)` |
+| `.reactour__helper` | `#1F2937` background |
+| `.react-tooltip` | `#1F2937` background |
+| `.HoverCardContent` | `#1F2937` background |
+| `.react-datepicker` | `#1F2937` background |
+
+## Migration Guide
+
+### From JavaScript Function to Tailwind
+```jsx
+// Before
+
+
+// After
+
+```
+
+### From Hardcoded Colors to Theme-aware
+```jsx
+// Before
+
+
+// After (automatic improvement)
+
+// OR explicitly
+
+```
+
+## Migration Notes
+
+All existing tooltip and tour components will automatically inherit the new dark mode styling when the theme is set to `opensigndark`. No code changes required for existing implementations.
diff --git a/apps/OpenSign/examples/tailwind-usage-examples.js b/apps/OpenSign/examples/tailwind-usage-examples.js
new file mode 100644
index 0000000000..97ac61ae64
--- /dev/null
+++ b/apps/OpenSign/examples/tailwind-usage-examples.js
@@ -0,0 +1,92 @@
+/**
+ * Tailwind Dark Mode Usage Examples for OpenSign
+ *
+ * This file demonstrates how to use the new Tailwind utilities
+ * for better dark mode visibility of buttons and icons.
+ */
+
+// Example 1: VS Code-style disabled buttons
+const DisabledButtonExamples = () => {
+ return (
+
+ {/* Option A: Using the VS Code disabled style */}
+
+
+ {/* Option B: Using themed disabled style */}
+
+
+ {/* Option C: Conditional styling */}
+
+
+ {/* Theme-aware icons with better visibility */}
+
+
+
+
+ {/* Using CSS variables */}
+
+
+
+ {/* Gray text that automatically improves in dark mode */}
+
+ This text is now more visible in dark mode
+
+ Muted but still readable
+
+ );
+};
+
+// Example 3: Using CSS variables in inline styles
+const InlineStyleExamples = () => {
+ return (
+
+ {/* Using CSS variables directly */}
+
+
+ {/* Using the existing JavaScript function */}
+
+
+ {/* Theme-aware icons with better visibility */}
+
+
+
+
+ {/* Using CSS variables */}
+
+
+
+ {/* Gray text that automatically improves in dark mode */}
+ This text is now more visible in dark mode
+ Muted but still readable
+
+ );
+};
+
+// Example 3: Using CSS variables in inline styles
+const InlineStyleExamples = () => {
+ return (
+
+ {/* Using CSS variables directly */}
+
+
+ {/* Using the existing JavaScript function */}
+
+