Skip to content

Latest commit

 

History

History
96 lines (83 loc) · 4.69 KB

README.md

File metadata and controls

96 lines (83 loc) · 4.69 KB

MoneyManager EX Themes

MMEX supports themes that can change the HTML layout and icons used within the application. The application is shipped with a number of 'system' themes, the content of which can be viewed within the system-themes folder

Feel free to share your themes here in the User Themes area.

Theme contents

A theme consists of the following files which must be present in the theme. The theme itself should have an .mmextheme extension and by built as a zip file. Within the file any folder hierachy can be used.

  • Theme Meta Data
    • _theme.json (see below for valid JSON)
    • _theme.png (A 300x150 image that showcases the theme and will be displayed against the theme in the application Theme Manager)
  • A master.css file used for HTML formatting, accompanyimng files for the master.css file may also be included (e.g. background.png files)
  • Icons that make up the theme (see Default Theme for detail on the full list of icons)

A theme file can hold two variants of master.css and icons, one use for the OS 'Light/Normal' mode and one for 'Dark' mode. The actual use of the 'Dark' mode variant depends upon the OS version. At time of writing this is only supported on MacOs 10.14+.

Notes for 'Dark' Mode

  • The name of the the master.css file and icon names for this mode should be prefixed by dark-
  • The JSON for this mode is within a 'dark' section, see below.

JSON content

Example JSON

{
    "theme": { 
        "name": "MMEX Theme",
        "author": "MMEX Team",
        "description": "This is a sample theme",
        "url": "https://github.com/moneymanagerex/moneymanagerex/blob/master/resources/themes/default/readme.md"
    },
    "colors": {
        "navigationPanel": "#F0F0F0",
        "listFutureDate": "#FF0000",
        "reports": {
            "credit": "#00FF00",
            "debit": "#FF0000"
        }
    },
    "dark": {
      "colors": {
        "navigationPanelFont": "#FFFFFF",
        "navigationPanel": "#444444",
        "list": "#1D1D1D",
        "listPanel": "#1D1D1D",
        "listAlternative1": "#343434",
        "listAlternative2": "#343434",
        "listTotal": "#2D2D2D",
        "listBorder": "#000000",
        "listFutureDate": "#AAAAAA",
        "htmlPanel": {
            "background": "#1D1D1D",
            "foreColor": "#FFFFFF"
        },
        "reports": {
            "altRow": "#343434",
            "credit": "#50B381",
            "debit": "#F75E51",
            "delta": "#008FFB",
            "foreColor": "#FFFFFF"           
        }
      }
    }
}

JSON Options supported

entry Mandatory? Default Usage
/theme/name Y The full theme name
theme/author N Empty The name of the team or individual responsible for theme creation
theme/description Y A short description of the theme
theme/url N Empty A URL that links to more detail about the theme
/colors/navigationPanelFont N Empty (System default) Color for the navigation panel background
/colors/navigationPanel N Empty (System default) Color for the navigation panel background
/colors/listPanel N Empty (System default) Color for the list panel background
/colors/list N #FFFFFF Color for the standard list row background color
/colors/listAlternative1 N #F0F5EB Color for the list alternative row background color (used in all but "All Transactions" view)
/colors/listAlternative2 N #E0E7F0 Color for the list alternative row cbackgroundolor (used in "All Transactions" view)
/colors/listTotal N #7486A8 Color for total rows in list views
/colors/listBorder N #000000 NOTE: Not currently used
/colors/listFutureDate N #7486A8 Color for future transactions
/colors/htmlPanel/background N Empty (System default) Color for background of HTML (wxHtmlWindow) panels
/colors/htmlPanel/foreColor N Empty (System default) Color for foreground of HTML (wxHtmlWindow) panels
/colors/reports/altRow N #F5F5F5 Color used for alternate rows in HTML reports
/colors/reports/credit N #50B381 Color for representing income/credits in reports
/colors/reports/debit N #F75E51 Color for representing expense/debits in reports
/colors/reports/delta N #008FFB Color for representing difference between income and expense in reports
/colors/reports/foreColor N #373D3F Color used for apexcharts graph report foreground font
/colors/reports/palette N #008FFB #00E396 #FEB019 #FF4560 #775DD0 #3F51B5 #03A9F4 #4cAF50 #F9CE1D #FF9800 #33B2DF #546E7A #D4526E #13D8AA #A5978B #4ECDC4 #81D4FA #546E7A #FD6A6A #2B908F #F9A3A4 #90EE7E #FA4443 #69D2E7 #449DD1 #F86624 The range of colors used when drawing graphs in the reports