Themes

---

You can customize the visual appearance of the MDT by editing or creating theme files. Themes are stored locally in: drx_mdt/web/themes

• Each theme is a JSON file with a wide ranges of settings, including fonts, colors, borders and more.

• The active theme is set in your settings.json file.

• You can create as many themes as you want and switch between them any time.

{
  "common": {
    "fontFamily": "Arial, sans-serif",
    "fontFamilyMono": "Courier New, monospace",
    "fontWeight": "400",
    "fontWeightStrong": "500",
    "fontSize": "14px",
    "fontSizeHuge": "18px",
    "fontSizeLarge": "16px",
    "fontSizeMedium": "14px",
    "fontSizeSmall": "14px",
    "fontSizeMini": "12px",
    "fontSizeTiny": "12px",

    "lineHeight": "1.5",
    "heightHuge": "48px",
    "heightLarge": "40px",
    "heightMedium": "32px",
    "heightSmall": "28px",
    "heightMini": "24px",
    "heightTiny": "20px",
    "borderRadius": "3px",
    "borderRadiusSmall": "2px",

    "primaryColor": "#64b5f6",
    "primaryColorHover": "#2196f3",
    "primaryColorPressed": "#1e88e5",
    "primaryColorSuppl": "#bbdefb",

    "infoColor": "#64b5f6",
    "infoColorHover": "#2196f3",
    "infoColorPressed": "#1e88e5",
    "infoColorSuppl": "#bbdefb",
    "successColor": "#66bb6a",
    "successColorHover": "#43a047",
    "successColorPressed": "#388e3c",
    "successColorSuppl": "#c8e6c9",
    "warningColor": "#ffa726",
    "warningColorHover": "#fb8c00",
    "warningColorPressed": "#f57c00",
    "warningColorSuppl": "#ffe0b2",
    "errorColor": "#ef5350",
    "errorColorHover": "#e53935",
    "errorColorPressed": "#d32f2f",
    "errorColorSuppl": "#ffcdd2",

    "textColorBase": "#212121",
    "textColor1": "#212121",
    "textColor2": "#424242",
    "textColor3": "#616161",
    "textColorDisabled": "#bdbdbd",
    "placeholderColor": "#9e9e9e",
    "placeholderColorDisabled": "#bdbdbd",
    "iconColor": "#757575",
    "iconColorHover": "#616161",
    "iconColorPressed": "#424242",
    "iconColorDisabled": "#bdbdbd",

    "opacity1": "0.05",
    "opacity2": "0.1",
    "opacity3": "0.2",
    "opacity4": "0.3",
    "opacity5": "0.4",

    "dividerColor": "#e0e0e0",
    "borderColor": "#e0e0e0",
    
    "closeIconColor": "#9e9e9e",
    "closeIconColorHover": "#616161",
    "closeIconColorPressed": "#424242",
    "closeColor": "#bdbdbd",
    "closeColorHover": "#616161",
    "closeColorPressed": "#424242",
    "clearColor": "#bdbdbd",
    "clearColorHover": "#616161",
    "clearColorPressed": "#424242",

    "scrollbarColor": "#bdbdbd",
    "scrollbarColorHover": "#616161",
    "scrillbarWidth": "8px",
    "scrollbarHeight": "8px",
    "scrollbarBorderRadius": "4px",
    "progressRailColor": "#e0e0e0",
    "railColor": "#e0e0e0",

    "popoverColor": "#ffffff",

    "tableColor": "#ffffff",
    "cardColor": "#ffffff",
    "modalColor": "#ffffff",
    "bodyColor": "#ffffff",
    "tagColor": "#ffffff",
    "avatarColor": "#ffffff",
    "invertedColor": "#212121",
    "inputColor": "#ffffff",
    "codeColor": "#f5f5f5",
    "tabColor": "#ffffff",
    "actionColor": "#ffffff",
    "tableHeaderColor": "#f5f5f5",
    "hoverColor": "#f5f5f5",
    "tableColorHover": "#f5f5f5",
    "tableColorStriped": "#f5f5f5",
    "pressedColor": "#e0e0e0",
    "opacityDisabled": "0.5",
    "inputColorDisabled": "#f5f5f5",
    "buttonColor2": "#f5f5f5",
    "buttonColor2Hover": "#e0e0e0",
    "buttonColor2Pressed": "#d0d0d0",
    "boxSahdow1": "0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1)",
    "boxSahdow2": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.1)",
    "boxSahdow3": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.1), 0 1px 12px rgba(0, 0, 0, 0.1)"
  }
}