hafuture
Back to Blog

Unit Converter Calculator & Dark Mode UI Improvements

Introducing the new unit converter calculator supporting 12 unit types and comprehensive dark mode UI improvements across the site.

updatecalculatorunit-converterdark-modeui

Hello! This is the hafuture team.

Today, we're excited to introduce our newly added Unit Converter Calculator and comprehensive Dark Mode UI improvements across the site.

1. New Unit Converter Calculator

We've added a Unit Converter Calculator that makes everyday unit conversions quick and easy.

12 Supported Unit Types

  • Length (m, km, ft, inch, mile, etc.)
  • Weight (kg, g, lb, oz, etc.)
  • Area (㎡, acre, ha, etc.)
  • Volume (L, mL, gallon, cup, etc.)
  • Temperature (°C, °F, K)
  • Pressure (Pa, bar, psi, atm, etc.)
  • Speed (m/s, km/h, mph, knot, etc.)
  • Energy (J, cal, kWh, BTU, etc.)
  • Time (seconds, minutes, hours, days, weeks, etc.)
  • Data (B, KB, MB, GB, TB, etc.)
  • Cooking (cup, tablespoon, teaspoon, etc.)
  • Clothing Size (S, M, L, XL, etc.)

Key Features

  • Real-time conversion: See results instantly as you type
  • Quick input buttons: Frequently used values at your fingertips
  • Formula display: Understand how conversions are calculated
  • Comprehensive guides: Detailed usage guides for each unit type
  • Multilingual support: Available in Korean, English, and Japanese

2. Comprehensive Dark Mode UI Improvements

We've completely redesigned the dark mode UI for a better user experience.

Improved Color Scheme

We replaced the previous semi-transparent, low-contrast dark mode styles with a clean Zinc color palette.

  • Card backgrounds: dark:bg-zinc-900 (clean dark gray)
  • Borders: dark:border-zinc-700/60 (subtle separators)
  • Body text: dark:text-zinc-100 (high readability)
  • Secondary text: dark:text-zinc-300 (proper contrast)

Improved Components

  • Footer: Enhanced text visibility with solid background
  • Announcement cards: Removed transparency for clear backgrounds
  • Scientific calculator: Improved button colors and contrast
  • Calorie calculator: Better readability in results display
  • Contact/About pages: Consistent dark mode styling

Unit Converter Guide Section

The guide cards in the unit converter display with a white background in dark mode, making the information-dense content easier to read.

3. Other Improvements

  • HowToUse component: Improved dark mode styling for tool instruction cards
  • CSS variables: Consistent theming using --foreground, --background variables
  • Transparency removal: Replaced backdrop-blur, bg-white/xx with solid colors for better contrast

Try our Tools

Make your daily life easier with Hafuture's tools:

Conclusion

hafuture continues to improve to help users work more efficiently with our tools. Try the Unit Converter Calculator for all your conversion needs!

Feedback and suggestions are always welcome. Thank you!