... change the color of the titlebar ...

Change the color of titlebar can be done by specifying the WindowStyle of WebDialogBox-WindowSettings.

Example:

<ISWebDesktop:WebDialogBox ID="WebDialogBox1" runat="server" Height="150px" Width="400px"
    Text="Metro Style DialogBox">
    <WindowSettings CaptionButtonSpacing="0" WindowHeaderHeight="28" ApplyContainerStyle="true">
        <WindowStyle>
            <Active BaseStyle="Normal" BackColor="Red" BorderColor="#5386BD" BorderWidth="1px"
                BorderStyle="Solid">
                <Padding Bottom="4px" Top="4px" Left="4px" Right="4px" />
                <BorderSettings>
                    <Top Style="none" />
                </BorderSettings>
            </Active>
            <Normal BackColor="#E9E8EE" BorderColor="#E9E8EE" BorderStyle="Solid" BorderWidth="1px"
                Font-Names="Segoe UI, Arial" Font-Size="8pt" Height="100%" Overflow="Auto" OverflowX="Auto"
                OverflowY="Auto" Width="100%">
                <BorderSettings>
                    <Top Style="none" />
                </BorderSettings>
            </Normal>
        </WindowStyle>
        ...
    </WindowSettings>
    ...
</ISWebDesktop:WebDialogBox>

Result:

... and the color of the titlebar text of my webdialogbox ...

Change the color of titlebar text can be done by specifying the CaptionStyle of WebDialogBox-WindowSettings.

Example:

<ISWebDesktop:WebDialogBox ID="WebDialogBox1" runat="server" Height="150px" Width="400px"
    Text="Metro Style DialogBox">
    <WindowSettings CaptionButtonSpacing="0" WindowHeaderHeight="28" ApplyContainerStyle="true">
        <CaptionStyle>
            <Active BaseStyle="Normal" ForeColor="White">
            </Active>
            <Normal Cursor="Default" Font-Bold="True" Font-Names="Segoe UI, Arial" Font-Size="10pt"
                ForeColor="Gainsboro">
            </Normal>
        </CaptionStyle>
        ...
    </WindowSettings>
    ...
</ISWebDesktop:WebDialogBox>

Result:

This should helps.