Theming

PXT uses the Semantic UI framework to create the user interface.

Blockly

For Blockly theming, you can overwrite the default Blockly options by configuring blocklyOptions under your target’s appTheme.

See Blockly Configuration for a full list of Blockly configurable options.

Semantic Theming

PXT comes with a default Semantic UI theme. You can however completely override the theme and use all the flexibility of Semantic UI to customize your target.

• copy the _theme folder from the project to the root of your target, and rename it to site
• customize the variables!

You will most likely be updating the site variables under site/globals/site.variables

From more information on theming, visit http://semantic-ui.com/usage/theming.html

pxt serve or pxt buildtarget will automatically rebuild semantic.css and override the built-in CSS from the app.

Favicon

Use realfavicongenerator to generate all the relevant favicon icon files and save them under static/icons in the docs folder.

AppTheme

pxtarget.json contains an extensive customization section (appTheme) to control logos, names, colors, etc. Details are below (TBD):

interface AppTheme {
        // naming
        id?: string;
        name?: string;
        title?: string;
        description?: string;
        boardName?: string;

        // associated social/store information
        appStoreID?: string; // Apple iTune Store ID if any
        twitter?: string;

        // localization
        defaultLocale?: string;
        locales?: Map<AppTheme>;
        crowdinProject?: string;
        crowdinBranch?: string; // optional branch specification for pxt
        selectLanguage?: boolean; // add language picker to settings menu
        disableLiveTranslations?: boolean; // don't load translations from crowdin

        // logos
        logoUrl?: string;
        logo?: string;
        portraitLogo?: string;
        rightLogo?: string;
        docsLogo?: string;
        cardLogo?: string;
        appLogo?: string;

        // branding
        organization?: string;
        organizationUrl?: string;
        organizationLogo?: string;
        organizationWideLogo?: string;

        // associated URLs
        homeUrl?: string;
        shareUrl?: string;
        embedUrl?: string;
        privacyUrl?: string;
        termsOfUseUrl?: string;
        contactUrl?: string;
        feedbackUrl?: string; // is set: a feedback link will show in the settings menu
        githubUrl?: string;

        // menu authoring and theming
        docMenu?: DocMenuEntry[];   // help menu
        TOC?: TOCMenuEntry[];       // see SUMMARY.md also
        galleries?: pxt.Map<string>; // list of galleries to display in projects dialog
        hideMenuBar?: boolean; // Hides the main menu bar
        hideEditorToolbar?: boolean; // Hides the bottom editor toolbar

        // getting started and documentation
        sideDoc?: string; // if set: show the getting started button, clicking on getting started button links to that page
        hideSideDocs?: boolean;
        hideDocsSimulator?: boolean; // do not show simulator button in docs
        hideDocsEdit?: boolean; // do not show edit button in docs
        usbDocs?: string;
        htmlDocIncludes?: Map<string>;
        htmlTemplates?: Map<string>;

        // editor theming
        accentColor?: string;
        blocksOnly?: boolean; // blocks only workspace
        invertedMenu?: boolean; // if true: apply the inverted class to the menu

        // blockly theming
        blockColors?: Map<string>; // block namespace colors, used for build in categories
        coloredToolbox?: boolean; // if true: color the blockly toolbox categories
        invertedToolbox?: boolean; // if true: use the blockly inverted toolbox
        blocklyOptions?: Blockly.Options; // Blockly options, see Configuration: https://developers.google.com/blockly/guides/get-started/web
        blockHats?: boolean; // if true, event blocks have hats

        // monaco theming
        invertedMonaco?: boolean; // if true: use the vs-dark monaco theme
        monacoToolbox?: boolean; // if true: show the monaco toolbox when in the monaco editor
        hasReferenceDocs?: boolean; // if true: the monaco editor will add an option in the context menu to load the reference docs

        // simulator theming
        simAnimationEnter?: string; // Simulator enter animation
        simAnimationExit?: string; // Simulator exit animation
        hasAudio?: boolean; // target uses the Audio manager. if true: a mute button is added to the simulator toolbar.
        highContrast?: boolean; // simulator has a high contrast mode

        // running in an iframe
        allowParentController?: boolean; // allow parent iframe to control editor
        extendEditor?: boolean; // whether a target specific editor.js is loaded

        // options around downloading a compiled file
        useUploadMessage?: boolean; // change "Download" text to "Upload"
        downloadIcon?: string; // which icon io use for download
        driveDisplayName?: string; // name of the drive as it shows in the explorer

        // miscellaneous
        hideEmbedEdit?: boolean; // hide the edit button in the embedded view
        mobileSafariDownloadProtocol?: string; // custom protocol to be used on iOS
        sounds?: {
            tutorialStep?: string;
            tutorialNext?: string;
            dialogClick?: string;
        },
    }