Flyout changes Page's theme

Question

I'm fighting with little problem on WP8.1 - it took some time, but finally I've managed to localize it - let say that we have a button with a flyout:

<Grid x:Name="LayoutRoot">
    <Button Content="reset" VerticalAlignment="Center">
        <Button.Flyout>
            <MenuFlyout Placement="Top">
                <MenuFlyoutItem Text="first item"/>
                <MenuFlyoutItem Text="second item"/>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
</Grid>

It works fine, but if we set the DataContext of a page:

public MainPage()
{
    this.InitializeComponent();
    this.DataContext = this; // without this works fine every button click
}

then there is a problem - the first time we click our button - works fine, but when we click it the second time, along with flyout, the page's theme changes to Light (the changed theme persists after we dismiss the flyout, you will have to reload the page). It looks more or less like in the images below:

Does anybody know what can cause the problem? Any workarounds?

If somebody wants to try - here is a sample code.

Answer 1

I don't know why it's happening, but you can force your page's RequestedTheme when the page is loaded:

XAML

<Page
...
x:Name="myPage">

C#

public MainPage()
{
    this.InitializeComponent();
    this.DataContext = this;

    if (App.Current.RequestedTheme == ApplicationTheme.Dark)
    {
        myPage.RequestedTheme = ElementTheme.Dark;
    }
    else
    {
        myPage.RequestedTheme = ElementTheme.Light;
    }
}