Skip to main content

Theme Customization in DigiSquares

Current Theme Settings​

Theme Variants: DigiSquares offers four professionally designed theme presets to suit different working environments and preferences. Each variant features carefully selected color palettes optimized for specific use cases and visual comfort. The themes maintain consistent UI functionality while providing distinct aesthetic experiences. Users can switch between variants instantly with all customizations preserved.

  • Default Theme (Cornflower Blue) features a professional cornflower blue scheme ideal for most projects.
  • Document (Algae Green) uses algae green for reduced eye strain during long sessions
  • Dark (Black) offers a black interface for low-light environments, while
  • V4 Theme (Dodger Blue) provides a modern dodger blue alternative.

Color Customization​

The color system allows full control over your interface's visual identity. Primary color defines the main brand color used across key elements. Secondary colorserves as the background and neutral base tone. Accent color highlights interactive elements and calls-to-action. All colors can be edited via color picker with hex code precision.

  • Primary Color: 🎨 #355480 (Click to edit)
  • Secondary Color: 🎨 #FFFFFF (Click to edit)
  • Accent Color: 🎨 #4CAF50 (Click to edit)

UI Elements​

Fine-tune interface details with granular styling controls for cohesive branding. Border radius adjustment softens or sharpens component corners throughout the UI. Shadow intensity options range from subtle to pronounced depth effects. Font family selection includes system-optimized typefaces like Segoe UI for optimal readability across devices.

  • Border Radius: 4px (Slider control)
  • Shadow Intensity: Medium (Dropdown)
  • Font Family: Segoe UI (Dropdown)

Preview Section​

The interactive preview pane displays sample UI components in real-time as changes are made. This includes representative cards, buttons, forms and navigation elements. Preview updates instantly reflect all color, spacing and typography adjustments. The preview helps visualize changes before applying them site-wide.

Actions​

  • Save Changes (Primary button) commits all modifications to make them active across the platform.
  • Reset to Default (Secondary button) reverts all values to the original theme settings.
  • Export Theme (Tertiary button) packages current configurations as a shareable theme file.
  • Import Theme (Tertiary button) loads previously saved custom theme configurations.

Advanced Options​

▶ Custom CSS Editor (Expandable section)

  • allows adding override rules for complete design control.

▶ Component-level Styling (Expandable section)

  • enables targeted adjustments to specific UI elements. Both advanced options require CSS knowledge for effective use. Changes here persist through theme switches and resets.
Preview Theme configuration

Theme Builder​

Access the visual theme builder through the branded badge link provided below. The builder URL automatically includes your Company ID, Project ID, and Selected Theme ID for personalized theming. This dedicated interface offers drag-and-drop customization beyond the basic settings. All changes sync automatically with your project's live environment. Access the builder here:

The URL includes Company ID, Project ID, and Selected Theme ID to personalize theme customization.