Tutorial IDE Color Schemes

Discussion in 'Tutorials & Examples' started by Erel, Jan 12, 2012.

  1. Erel

    Erel Administrator Staff Member Licensed User

    Starting with Basic4androdi v1.8 it is possible to modify the code editor colors.
    This is done by editing the file B4A.xml that is located in the installation folder.

    The colors are set in the "styles" node.
    You should restart the IDE for the changes to take effect.

    You are welcomed to share your schemes.

    The default values are:
    Code:
    <!-- Highlighting Styles -->   
       <Styles>
          <Style Key=
    "IdeBackground" ForeColor="White"/>
          <Style Key=
    "ContentDivider" ForeColor="ControlDark"/>
          <Style Key=
    "LineNumber" ForeColor="Teal" />
          <Style Key=
    "ToolTipBackground" ForeColor="Info" />
          <Style Key=
    "ToolTipDefaultStyle" ForeColor="Black" />
          <Style Key=
    "DefaultStyle" ForeColor="Black"/>
          <Style Key=
    "GlobalVariablesStyle" ForeColor="#6600CC"/>
          <Style Key=
    "ReservedWordStyle" ForeColor="Blue" />
          <Style Key=
    "NumberStyle" ForeColor="Purple" />
          <Style Key=
    "TypeWordStyle" ForeColor="DarkCyan" />
          <Style Key=
    "StringDefaultStyle" ForeColor="Maroon" />
          <Style Key=
    "CommentDefaultStyle" ForeColor="Green" />
          <Style Key=
    "SelectionHighlight" ForeColor="PaleTurquoise" />
          <Style Key=
    "ReferenceHighlight" ForeColor="#00FFEF" />
          <Style Key=
    "UndeclaredIdentifier" ForeColor="Red" />
          <Style Key=
    "PreProcessorDirectiveKeywordStyle" Name="Pre-Processor Directive Keyword" ForeColor="Gray" />
       </Styles>
    COBRASoft has created a soft color scheme:
    Code:
    <Styles>
            <Style Key=
    "IdeBackground" ForeColor="#1D314C"/>
            <Style Key=
    "ContentDivider" ForeColor="#C2D5DC"/>
            <Style Key=
    "LineNumber" ForeColor="#58859B" />
            <Style Key=
    "ToolTipBackground" ForeColor="#36598A" />
            <Style Key=
    "ToolTipDefaultStyle" ForeColor="#F0F0F0"/>
            <Style Key=
    "DefaultStyle" ForeColor="#F0F0F0"/>
            <Style Key=
    "GlobalVariablesStyle" ForeColor="#D8CFA0"/>
            <Style Key=
    "ReservedWordStyle" ForeColor="#9CC4D2" />
            <Style Key=
    "NumberStyle" ForeColor="#F4AF82" />
            <Style Key=
    "TypeWordStyle" ForeColor="#45B6DC" />
            <Style Key=
    "StringDefaultStyle" ForeColor="#F4AF82" />
            <Style Key=
    "CommentDefaultStyle" ForeColor="#85DE6D" />
            <Style Key=
    "SelectionHighlight" ForeColor="#2B70B6" />
            <Style Key=
    "ReferenceHighlight" ForeColor="#E0E0E0" />
            <Style Key=
    "UndeclaredIdentifier" ForeColor="#FF1E1E" />
            <Style Key=
    "PreProcessorDirectiveKeywordStyle" Name="Pre-Processor Directive Keyword" ForeColor="#FFE5C2" />
    </Styles>
    Which looks like:
    [​IMG]

    The following attributes are supported (IdeBackground, LineNumber, ContentDivider and UndeclaredIdentifier are treated specially and do not support additional attributes):

    [​IMG]
     
    cyiwin and Mivo like this.
  2. droman

    droman Member Licensed User

    Really nice!
     
  3. alwaysbusy

    alwaysbusy Active Member Licensed User

    Nice one COBRASoft, very easy on the eyes!
     
  4. rbsoft

    rbsoft Active Member Licensed User

    The CobraSoft look is very pleasant.

    Rolf
     
  5. vb1992

    vb1992 Well-Known Member Licensed User

    more on the unix/vt100 Black/Green scheme here:

    Code:
    <Styles>
            <Style Key=
    "IdeBackground" ForeColor="#212121"/>
            <Style Key=
    "ContentDivider" ForeColor="#7CFF85"/>
            <Style Key=
    "LineNumber" ForeColor="#7CFF85" />


               <Style Key=
    "ToolTipBackground" ForeColor="#6C9861" />
            <Style Key=
    "ToolTipDefaultStyle" ForeColor="#FFFFFF"/>


            <Style Key=
    "DefaultStyle" ForeColor="#FFFFFF"/>
            <Style Key=
    "GlobalVariablesStyle" ForeColor="#FFFF91"/>
            <Style Key=
    "ReservedWordStyle" ForeColor="#7CFF85" />
            <Style Key=
    "NumberStyle" ForeColor="#7CFF85" />
            <Style Key=
    "TypeWordStyle" ForeColor="#F7FF00" />
            <Style Key=
    "StringDefaultStyle" ForeColor="#7CFF85" />
            <Style Key=
    "CommentDefaultStyle" ForeColor="#AEADB0" />
            <Style Key=
    "SelectionHighlight" ForeColor="#FFEF00" />
            <Style Key=
    "ReferenceHighlight" ForeColor="#292929" />
            <Style Key=
    "UndeclaredIdentifier" ForeColor="#cccccc" />
            <Style Key=
    "PreProcessorDirectiveKeywordStyle" Name="Pre-Processor Directive Keyword" ForeColor="#FF0000" />
    </Styles>



    Darker look

     

    Attached Files:

    Last edited: Jan 12, 2012
  6. COBRASoft

    COBRASoft Active Member Licensed User

    Thx Erel and other :). Nice ones vb1992. Erel, I have 1 more setting I would like to have. The default color for the tooltips is only working for the first line (parameters). The explanation is still in black. Perhaps you could add another setting for this one for the next update :).
     
  7. vb1992

    vb1992 Well-Known Member Licensed User


    That would be helpful..
     
  8. clx

    clx Member Licensed User

    These are great, Thanks! :sign0098:
     
  9. ScarBelly

    ScarBelly Member Licensed User

    Thanks

    My old eyes very much appreciate this. Thank you, sir.
     
  10. COBRASoft

    COBRASoft Active Member Licensed User

    I'm working on a colorscheme editor (VB.Net 4.0). It's based on HTML + CSS. The VB part will be in changing the CSS file and changing the color of some pictures (collapsed/expanded).
     
  11. straybullet

    straybullet Member Licensed User

    I work late in to the night many times and need all the help I can get. The default white can be blinding at 3am. I like the black terminal look, but need brighter text to stand out at me.

    So here is my "enchanced" terminal style for the IDE, which allows me to see what I need to easier when I barely can stay awake.



    PHP:

    <Styles>
            <
    Style Key="IdeBackground" ForeColor="#000000"/>
            <
    Style Key="ContentDivider" ForeColor="#C2D5DC"/>
            <
    Style Key="LineNumber" ForeColor="#58859B" />
            <
    Style Key="ToolTipBackground" ForeColor="#36598A" />
            <
    Style Key="ToolTipDefaultStyle" ForeColor="#F0F0F0"/>
            <
    Style Key="DefaultStyle" ForeColor="#F0F0F0"/>
            <
    Style Key="GlobalVariablesStyle" ForeColor="Yellow"/>
            <
    Style Key="ReservedWordStyle" ForeColor="#9CC4D2" />
            <
    Style Key="NumberStyle" ForeColor="#F4AF82" />
            <
    Style Key="TypeWordStyle" ForeColor="#45B6DC" />
            <
    Style Key="StringDefaultStyle" ForeColor="Red" />
            <
    Style Key="CommentDefaultStyle" ForeColor="#85DE6D" />
            <
    Style Key="SelectionHighlight" ForeColor="#2B70B6" />
            <
    Style Key="ReferenceHighlight" ForeColor="#E0E0E0" />
            <
    Style Key="UndeclaredIdentifier" ForeColor="#FF1E1E" />
            <
    Style Key="PreProcessorDirectiveKeywordStyle" Name="Pre-Processor Directive Keyword" ForeColor="#FFE5C2" />
    </
    Styles>

     

    Attached Files:

  12. Erel

    Erel Administrator Staff Member Licensed User

    Thank you for sharing. Here is a larger screenshot image:
    [​IMG]

    I find it a bit difficult to distinguish between strings and undeclared identifiers.
     
  13. COBRASoft

    COBRASoft Active Member Licensed User

    I have a problem with red for string, it looks like an error. I like it for the rest though.
     
  14. vb1992

    vb1992 Well-Known Member Licensed User

    Cobra, or anyone else, interested in finishing this Color Editor App?
    This can get someone going in the right direction..

    Click on the Text/labels on the screen to change the colors
     

    Attached Files:

  15. vb1992

    vb1992 Well-Known Member Licensed User

    Also, changing your font using bold can make a difference
    with a color scheme:

    Tools / Ide Options / Change Font


    [​IMG]
     

    Attached Files:

  16. COBRASoft

    COBRASoft Active Member Licensed User

    Hi,

    My first beta version of a colorscheme editor is ready. It is written in VB.Net 4.0 and uses some DevExpress components (hence the huge zipfile).

    Please use the link below to download this program. Just unpack the content where you want and doubleclick on 'COBRASoft.B4AColorScheme.exe'.

    Once started, you'll be able to open the 'B4A.xml' file. Clicking on the radiobuttons allows you to change the colors for the different parts. At the right you can see the changes instantly. I made a html file + css to make this happen. Use the 'Save' to place the 'styles' part on the clipboard so you can replace them in your B4A.xml file. This way, you can also make new files yourself and keep different versions around :).

    I've you're not interested in this app, but would like an easy way to change the colors visually, you can use the html + css file (after applying the colors in the css file).

    http://www.cobrasoft.biz/images/B4AColorSchemeEditor.zip

    Hope you like it, and please, comments and ideas are more than welcome!

    Greetings,
    Sigurd
     
  17. tremara1

    tremara1 Active Member Licensed User

    nice tool

    I like your IDE color designer, I have 1 suggestion for people like me who like to play with these things would be an option to reset all settings to default. (In case I completely stuff it up without a backup). This could also apply to creating preset designs to one click.
    Great Job.
     
  18. Erel

    Erel Administrator Staff Member Licensed User

    I've uploaded a table to post #1 with all the supported attributes.
     
  19. COBRASoft

    COBRASoft Active Member Licensed User

    Erel: thx! I'll have to update my app a lot :).
     
  20. COBRASoft

    COBRASoft Active Member Licensed User

    New beta

    Hi,

    I've just uploaded the next beta version of the IDE color scheme editor. This version is almost completely rewritten to support the new properties Erel has added to post #1.

    This beta includes name, forecolor, backcolor, bold, italic, border color, border corner style and border style. You won't be able to change these properties for the items that Erel has posted.

    To change a color, just click in the field of the color you want to change. The colorwheel at the bottom should react better now. I've also changed the size of the thumbs as requested.

    Notes: DashDot is not supported in CSS, but it will work in B4A. BorderCornerStyle is also not available in CSS, but doesn't seem to work in B4A either. To clear a color (or other value), use the button at the top 'Clear Value'. This sets the property to 'nothing' so it won't be included in the 'styles'. Font and FontSize can be supported if requested, but I don't think it's wise to set a different font in your code :). The non-color properties won't show in real-time. You can use the preview button at the top or press F5. The 'New' button starts with the default settings from Erel. No need to load an xml anymore to get started.

    Question: underline and strikeout are not supported yet in this version. Is this even needed? Same goes with Cursor properties.

    The download is available at http://www.cobrasoft.biz/images/B4AColorSchemeEditor.zip.

    Enjoy :D!

    Greetings,
    Sigurd
     
    Last edited: Jan 22, 2012

Share This Page

Loading...