Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added base dark theme #2078

Merged
merged 9 commits into from Nov 7, 2018

Conversation

Projects
None yet
3 participants
@wieslawsoltes
Copy link
Contributor

wieslawsoltes commented Nov 5, 2018

  • What does the pull request do?
    Adds new default themw dark accent.
  • What is the current behavior?
    Default theme only has light accent.
  • What is the updated/expected behavior with this PR?
    Adds dark theme accent to default theme.

To apply theme application wide:

<Application xmlns="https://github.com/avaloniaui">
  <Application.Styles>
    <StyleInclude Source="resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"/>
    <StyleInclude Source="resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"/>
  </Application.Styles>
</Application>

To apply theme to part of application like UserControl:

<UserControl xmlns="https://github.com/avaloniaui"
        Background="{DynamicResource ThemeBackgroundBrush}"
        TextBlock.Foreground="{DynamicResource ThemeForegroundBrush}"
        TextBlock.FontSize="{DynamicResource FontSizeNormal}">
  <UserControl.Styles>
    <StyleInclude Source="resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"/>
  </UserControl.Styles>
</UserControl>

or use style:

<Application xmlns="https://github.com/avaloniaui">
  <Application.Styles>
    <StyleInclude Source="resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"/>
    <StyleInclude Source="resm:Avalonia.Themes.Default.Accents.BaseLight.xaml?assembly=Avalonia.Themes.Default"/>
    <Style Selector="UserControl.themed">
      <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
      <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
      <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}"/>
    </Style>
  </Application.Styles>
</Application>
<UserControl xmlns="https://github.com/avaloniaui" Classes="themed">
  <UserControl.Styles>
    <StyleInclude Source="resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"/>
  </UserControl.Styles>
</UserControl>

Demo:
2018-11-05_22-41-26

@wieslawsoltes wieslawsoltes requested a review from AvaloniaUI/core Nov 5, 2018

@jmacato

This comment has been minimized.

Copy link
Contributor

jmacato commented Nov 6, 2018

@wieslawsoltes i think the Headers on the content of ControlCatalog is missing the accent theme? I can't them on this dark mode

@wieslawsoltes

This comment has been minimized.

Copy link
Contributor Author

wieslawsoltes commented Nov 6, 2018

@wieslawsoltes i think the Headers on the content of ControlCatalog is missing the accent theme? I can't them on this dark mode

It is part of control catalog:

<Style Selector="TextBlock.h1">
<Setter Property="Foreground" Value="#212121"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontWeight" Value="Medium"/>
</Style>
<Style Selector="TextBlock.h2">
<Setter Property="Foreground" Value="#727272"/>
<Setter Property="FontSize" Value="13"/>
</Style>
<Style Selector="TextBlock.h3">
<Setter Property="Foreground" Value="#a2a2a2"/>
<Setter Property="FontSize" Value="13"/>
</Style>

That probably needs to be changed to:

<Style Selector="TextBlock.h1">
    <Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}"/>
    <Setter Property="FontWeight" Value="Medium"/>
</Style>
<Style Selector="TextBlock.h2">
    <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}"/>
</Style>
<Style Selector="TextBlock.h3">
    <Setter Property="FontSize" Value="{DynamicResource FontSizeSmall}"/>
</Style>
@wieslawsoltes

This comment has been minimized.

Copy link
Contributor Author

wieslawsoltes commented Nov 6, 2018

@jmacato Pushed header changes and enabled the full theme support for main view in control catalog, so dark theme looks good out of the box.

@grokys

This comment has been minimized.

Copy link
Member

grokys commented Nov 7, 2018

We already have this in the default Window style:

<Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
<Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}"/>

If you were to add Foreground to this, then a Window would just work out of the box right?

@wieslawsoltes

This comment has been minimized.

Copy link
Contributor Author

wieslawsoltes commented Nov 7, 2018

We already have this in the default Window style:

<Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
<Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}"/>

If you were to add Foreground to this, then a Window would just work out of the box right?

@grokys I did a lot of hacks before I got things working in the theme editor and before 0.7 release so need to test this and will let you know what works and what not 😄

@wieslawsoltes

This comment has been minimized.

Copy link
Contributor Author

wieslawsoltes commented Nov 7, 2018

We already have this in the default Window style:

<Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
<Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}"/>

If you were to add Foreground to this, then a Window would just work out of the box right?

@grokys I have included changes in PR.

wieslawsoltes added some commits Nov 7, 2018

@grokys

grokys approved these changes Nov 7, 2018

Copy link
Member

grokys left a comment

This is excellent! I've been wanting this for such a long time, thanks @wieslawsoltes!

@grokys grokys merged commit daca341 into AvaloniaUI:master Nov 7, 2018

@wieslawsoltes wieslawsoltes deleted the wieslawsoltes:BaseDarkTheme branch Nov 7, 2018

@grokys grokys added this to the 0.8.0 milestone Apr 3, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.