UI Theming

Changing the UI Theme for a customized look

  1. Open System Settings -> Theme tab
    • DataVoke uses either DataVoke - Green or the Classic Blue theme by default.
  2. To edit a current theme, scroll and select the name of the theme on the left under Themes
  3. Select colors for the Primary & Secondary colors on the right.

Creating New UI Theme

  1. To add a new theme, click the plus (Add a new theme) button under Themes
  2. Give it a Theme Name.
  3. Adjust the Primary and Secondary colors.  
  4. Set a Default Style, if you wish.
  5. To set your Theme to your newly created Theme click Apply Theme.  
  6. Save & Close the System Settings.
  7. Refresh your browser to have the new theme take effect.
  • To remove a theme, select it in the list and click the minus sign (Remove the selected theme from the list).

Select Theme Colors

Use the color picker or assign colors manually by entering color values.

There are four different ways to manually reference a color value for use in a theme.

  • Hex  - Ex: #00FFFF or 00FFFF or 00ffff
  • Color Name - Ex: Aqua
  • RGB - Ex: rgb(0,255,255)
  • RGBA - Ex: rgba(0,255,255,0.5)
    An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

To edit the 'default' style search for default in PinPoint Search.

Theme Color Usage

Theme Color Category
Theme Category Description
Primary Light 
  • Inactive Tab
  • Button Hover (top of gradient)
  • Selected Text in a Form Field
Primary Med-Light 
  • Grid Column Header
  • Grouping and Summary Rows in a Grid
  • Group Expand and Collapse Bar
  • Inactive Tab Hover
  • DataVoke Entity Selection
  • Select from Drop-down Highlight
  • Selected Cell Border
  • Drop-down List Border
  • 'Enabled' (Filter) Button
Primary 
  • Group Expand and Collapse Bar Hover
  • View Header
  • Application Header (w/log-out icon)
  • Active Form Field Border
Primary Med-Dark
  • Active Tab, View, or Sub-form
  • Button Hover (bottom of gradient)
  • Tool-tip Border
Primary Dark  
  • Sub View Border
  • Download Attachment Icon
  • Record Code text
Primary Form Font
  • Inactive Tab
  • Button
  • Button Menu
  • Message Box
  • Entity Editor
  • Label Text
  • Filter Bar
  • Text Bar
Primary Header Font 
  • Active Tab
  • Grid Column Header
  • Group Box Header
  • 'Enabled' (Filter) Button
  • Summary
  • Active View
Secondary Light
  • DataVoke Workspace Background
  • Scroll Bar Background
  • Button (top of gradient)
  • Loading Screen Background
Secondary Med-Light
  • Login Screen Background
  • Side Bar Background
  • Form Background
  • Grid Lines
  • Selected Cell in Grid
  • Working Screen Background
Secondary 
  • Working (i.e. Saving or Updating Records) Background
  • Inactive Form Field Border
  • Boolean Field Border
Secondary Med-Dark 
  • Scroll Bar Foreground
  • Button (bottom of gradient)
  • Button Border
  • Inactive Form Field Border
Secondary Dark 
  • Button Pressed
  • Button Clicked Border
Secondary Form Font
  • Entity Editor Buttons
Secondary Header Font 
  • Inactive Tab
  • Inactive View
  • Grid Grouping Header
  • Filter Bar Arrow

See Samples and Color Names

Apply Theme

A theme establishes a color palette for your solution. Applying a theme will not update styles you've applied to controls throughout the application. 

To apply the theme color palette remove the individual styles you've applied.

Select the theme under Themes that you'd like as your UI Theme for DataVoke, then click the Apply Theme button.  Save & Close System Settings, then a refresh of the browser is necessary to see the theme changes.

Have more questions? Submit a request

3 Comments

  • 0
    Avatar
    Danny Rich

    I do not have the Theme tab under System Settings, is this option not available under the free development license? Thanks!

  • 0
    Avatar
    Andrea M Singer

    Themes are available in our newest version of the framework. I can request an update to your appspace if you like.

    Please send an email to support@datavoke.com including your appspace token or URL.

    Thanks so much!

  • 0
    Avatar
    Danny Rich

    Excellent, thanks for the follow up! 

Please sign in to leave a comment.