OpenSign/apps/OpenSign/docs/DARK_MODE_USAGE.md

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

// Option 1: Direct VS Code styling
<button className="op-btn op-btn-primary op-btn-vscode-disabled" disabled>
  Disabled Button
</button>

// Option 2: Themed disabled styling
<button className="op-btn btn-themed-disabled">
  Themed Button
</button>

// Option 3: Conditional styling
<button 
  className={`op-btn op-btn-primary ${isDisabled ? 'op-btn-vscode-disabled' : ''}`}
  disabled={isDisabled}
>
  Dynamic Button
</button>

Icon Styling

Theme-aware Icons

// Better visibility in dark mode
<i className="fa-light fa-folder icon-improved"></i>

// Muted but still visible
<i className="fa-light fa-plus icon-muted"></i>

// Disabled state
<i className="fa-light fa-trash icon-disabled"></i>

CSS Variable Approach

// Using CSS variables
<i className="fa-light fa-search icon-themed"></i>
<i className="fa-light fa-settings icon-themed-muted"></i>

// Inline styles with CSS variables
<i 
  className="fa-light fa-plus"
  style={{ color: 'var(--icon-color)' }}
/>

Legacy JavaScript Function (Still Supported)

// Existing approach - still works
<i 
  className="fa-light fa-plus"
  style={{ color: getThemeIconColor() }}
/>

Text Styling

Improved Gray Text

// These automatically improve in dark mode
<span className="text-gray-500">More visible in dark mode</span>
<span className="text-gray-400">Muted but readable</span>
<span className="text-gray-600">Clear text</span>

Complete Examples

Toolbar with Better Visibility

const Toolbar = () => (
  <div className="flex space-x-2 p-2">
    <button className="p-2 hover:bg-gray-200 rounded">
      <i className="fa-light fa-plus icon-improved"></i>
    </button>
    <button className="p-2 hover:bg-gray-200 rounded" disabled>
      <i className="fa-light fa-trash icon-disabled"></i>
    </button>
    <button className="p-2 hover:bg-gray-200 rounded">
      <i className="fa-light fa-edit icon-improved"></i>
    </button>
  </div>
);

Form with Disabled States

const Form = ({ isSubmitting }) => (
  <form>
    <input className="op-input" />
    <button 
      className={`op-btn op-btn-primary ${isSubmitting ? 'op-btn-vscode-disabled' : ''}`}
      disabled={isSubmitting}
    >
      {isSubmitting ? 'Submitting...' : 'Submit'}
    </button>
  </form>
);

React-Tour and Tooltip Dark Mode Support

React-Tour Modals

The react-tour modals now automatically support dark mode with VS Code-inspired styling:

// These components automatically get dark mode styling
<Tour
  onRequestClose={closeTour}
  steps={tourConfig}
  isOpen={isOpen}
  rounded={5}
/>

ReactTooltip Components

All ReactTooltip instances now support dark mode:

// Automatically styled for dark mode
<ReactTooltip id="my-tooltip" className="z-[999]">
  <div className="max-w-[200px]">
    <p>Tooltip content</p>
  </div>
</ReactTooltip>

HoverCard Balloon UI

The balloon tooltips in OpenSign Drive now properly support dark mode:

// These automatically get dark styling in dark mode
<HoverCard>
  <HoverCardContent>
    Document information
  </HoverCardContent>
</HoverCard>

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

// Before
<i style={{ color: getThemeIconColor() }} className="fa-light fa-plus" />

// After
<i className="fa-light fa-plus icon-improved" />

From Hardcoded Colors to Theme-aware

// Before
<i className="fa-light fa-plus text-gray-500" />

// After (automatic improvement)
<i className="fa-light fa-plus text-gray-500" />
// OR explicitly
<i className="fa-light fa-plus icon-improved" />

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.