We Keep Coding

What is the correct way to change the Value of multiple Styles?

I am currently trying to implement a Dark Mode to my application. I have multiple ResourceDictionaries, one Window and multiple UserControls. In my MainWindow I've created a Command that is supposed to change the Design during runtime.
One of my ResourceDictionaries looks like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="SecondaryBorder" TargetType="Border">
<Style.Setters>
<Setter Property="Background" Value="#272726"/>
</Style.Setters>
</Style>
<Style x:Key="WindowTheme" TargetType="Window">
<Style.Setters>
<Setter Property="Background" Value="#3c3c3b"/>
</Style.Setters>
</Style>
<Style x:Key="HeadlineReports" TargetType="TextBlock">
<Style.Setters>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontFamily" Value="Rubik Light"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style.Setters>
</Style>
</ResourceDictionary>
Here I would like to change the following values: #272726 → #55ffff and #3c3c3b → #FFFFFF.
At first, I thought that I could create a global value for each colour and simply change the value with code-behind, however, I now learned that you are not supposed to do that with ResourceDictionaries.
What would be the correct way to change the colour throughout the whole application?

Create a copy of the existing ResourceDictionary and edit the values in this copy.
When you want to switch theme, you then remove the existing resource dictionary and merge the new one. Something like this:
App.Current.Resources.MergedDictionaries.Clear();
App.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
{
Source = new Uri("dark.xaml")
});

Applying style to Autosuggest box crashes the App: Cannot apply a Style with TargetType 'FormsCustomizableTextBox' to an object of type 'TextBox'

I have recently started developing an UWP application.
I have defined a style in my page resources like this:
<Style TargetType="AutoSuggestBox" x:Name="AutoSuggestBoxStyle">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="FontWeight" Value="SemiLight"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="0.5"/>
<Setter Property="PlaceholderText" Value="Type Here"/>
<Setter Property="Margin" Value="0,10,0,0"/>
</Style>
Then I am using this style in the same page like:
<AutoSuggestBox Style="{StaticResource AutoSuggestBoxStyle}"
Name="SchemeSuggestBox"
QuerySubmitted="SchemeSuggestBox_QuerySubmitted"
SuggestionChosen="SchemeSuggestBox_SuggestionChosen"
TextChanged="SchemeSuggestBox_TextChanged"/>
Doing this however crashes the app with exception:
Exception = {"No installed components were detected. (Exception from HRESULT: 0x800F1000)"}
And message:
Message = "Cannot apply a Style with TargetType 'Xamarin.Forms.Platform.UWP.FormsCustomizableTextBox' to an object of type 'Windows.UI.Xaml.Controls.TextBox'."
If I remove the style from my AutoSuggestBox (The following line) the App works as expected:
Style="{StaticResource AutoSuggestBoxStyle}"
What gives? I am not applying this style to any TextBox at all.
I have already read the Official Docs on Autosuggest box (Turns out it isn't even inherited from TextBox class It does have a property as Siva Gopal described and BugFinder hinted. Apparently I was kind of an idiot to miss it).
Relevant discussion on Xamarin forum can be seen here.

I think your style's TargetType should be: TextBox but not: AutoSuggestBox and need to apply it for TextBoxStyle on AutoSuggestBox:
Style:
<Style TargetType="TextBox" x:Name="AutoSuggestBoxStyle">
...
</Style>
Style Application:
<AutoSuggestBox TextBoxStyle={StaticResource AutoSuggestBoxStyle}>
...
</AutoSuggestBox>

Header style datagrid silverlight

I am using silverlight and cant edit the header style of the data grid.
<sdk:DataGridTemplateColumn.HeaderStyle>
<Style>
<Setter Property="FontSize" Value="14" />
<Setter Property="Background" Value="Pink"/>
</Style>
</sdk:DataGridTemplateColumn.HeaderStyle>
It's written that member FontSize and Background are not accessible.
What should i do?

Try changing it to:
<sdk:DataGridTemplateColumn.HeaderStyle>
<Style xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
TargetType="primitives:DataGridColumnHeader">
<Setter Property="FontSize" Value="14" />
<Setter Property="Background" Value="Pink"/>
</Style>
</sdk:DataGridTemplateColumn.HeaderStyle>
It should allow you set the properties with that namespace and target type added. You could also just add the namespace to the user control, instead of putting it in the style.

Variables in XAML Style

I have the following Style:
<Style x:Key="ButtonBase" TargetType="Button">
<Setter Property="Background" Value="#FF007BFF"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value=">
<Setter Property="Background" Value="Yellow" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="False">
<Setter Property="Background" Value="#FF007BFF" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Setter.Value>
</Setter>
</Style>
and an inherited Style:
<Style x:Key="ElementButton" TargetType="Button" BasedOn="{StaticResource ButtonBase}">
<Setter Property="Margin" Value="10"/>
<Setter Property="Height" Value="200"/>
</Style>
What I'd like to do is be able to set an arbitrary variable in the base style:
<Setter Variable="HoverColor" Value="Pink"/>
Then I'd be able to use my triggers as such:
<Trigger Property="IsPressed" Value=">
<Setter Property="Background" Value="{TemplateBinding HoverColor}" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
And finally, I could then override it in my inherited style:
<Style x:Key="ElementButton" TargetType="Button" BasedOn="{StaticResource ButtonBase}">
<Setter Property="Margin" Value="10"/>
<Setter Property="Height" Value="200"/>
<Setter Variable="HoverColor" Value="Red"/>
</Style>
Is there a way to achieve this? I've already looked at static resources but these can't be overridden. Also, I cannot use anything that requires a code-behind because I don't have one!

Its a good question and I've fought through this sort of thing as well. There may be some kind of XAML-only approach that could work, but I have a feeling that if there is, it would feel pretty kludgy. I have a couple of suggestions of how achieve what you want.
First, a quick observation. You say you "don't have a code-behind" and that your view is "XAML-only". Well, I've never seen a UserControl View that doesn't have any code-behind file at least, so I'm assuming you mean you just don't want to put any code in there (other than the obligatory InitializeComponent()). Having said that, the approaches that I'll outline won't require code in your code-behind files.
At the end of the day, it sounds like what you really want is define some custom "variables". These suggestions do just that, albeit maybe not in the way that you originally envisioned doing so.
The first approach that would solve your problem is to subclass the control that you are interested in styling and add any custom dependency properties to it. For example, you could subclass Button, to say something like ButtonWithMyVariables. One of those custom dependency properties would be called "HoverColor", of type Color, or perhaps more appropriately, "HoverBrush" of type Brush (if you're wanting to just apply it directly to the background or foreground property). Then your base Style can set HoverColor to whatever it wants, and your inherited Style can override it, or you can override it directly on the element in your XAML. I'm not providing code samples for this approach (right now, unless requested) since this is a more commonly-used approach that I'm guessing you're already familiar with.
The second approach would be to define a custom attached property. I've not seen this approach used as much for dealing strictly with Styling issues, perhaps because for the attached "behavior" to fully do its job in this case, authors have used Style files to react (bind to) and apply visual changes based on the attached property, rather than the code in the attached property changed callback doing something stylistically (but I suppose it could still be done that way). However, this approach feels "lighter weight" to many, since you don't need to subclass any existing controls.
An example of this second approach can be found in the MahApps.Metro library, specifically the TextboxHelper class (which houses attached properties) and the Controls.TextBox.xaml style file (which binds to those attached properties). For example, we see in the control template for the TextBox, this line that makes use of the Watermark attached property:
<TextBlock x:Name="Message"
Text="{TemplateBinding Controls:TextboxHelper.Watermark}" Visibility="Collapsed"
Foreground="{TemplateBinding Foreground}" IsHitTestVisible="False" Opacity="0.6" HorizontalAlignment="Left" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="6,0,0,0"/>
Now you can imagine that you could set that Watermark value in a base style to something:
<Setter Property="Controls:TextboxHelper.Watermark"
Value="My helpful watermark for all!"/>
And then override it in an inherited style:
<Setter Property="Controls:TextboxHelper.Watermark"
Value="A more specific watermark!"/>
With either approach, we can define any "variable" we want and easily set them in a Style setter, override them in inherited styles, TemplateBind to them within control templates, or Trigger off of them.

How do I know whether to use a style or override a control template?

This question is inspired by this recent question and other situations I've encountered in my WPF development. How do I know whether it is enough to set a style on a control to override some default behavior vs creating a new control template?
More concretely, in the question above, the author wants to change the look of a ListBoxItem when it is selected. (See code reprinted below). Everything works, except the Background property. How is one supposed to know that they should override the Control Template for this?
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Content" Value="{Binding Path=Name}"/>
<Setter Property="Margin" Value="2"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>

As to whether to use a style or template Ray provided a great response.
As to how to solve your problem without creating a template, maybe I can help.
The background color is being set by the SystemColors. Using Blend and creating a template you can see the exact xaml.
So if NO TEMPLATES! is a requirement you can always change what that resource is.
Example :
<ListBox>
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Yellow" />
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Content" Value="{Binding Path=Name}"/>
<Setter Property="Margin" Value="2"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
<ListBoxItem>Test 1</ListBoxItem>
<ListBoxItem>Test 2</ListBoxItem>
<ListBoxItem>Test 3</ListBoxItem>
</ListBox>
That will give you the background color for that given ListBox and not screw up anything else in the app.

Styles can be thought of very closely to CSS styles in HTML. If all you want to do is change the basic properties of a control such as Background, Foreground or whatever properties it exposes then a Style is exactly what you need. Styles also allow you to apply triggers so for animations, a style is also sufficient.
If you're finding you want to change the intrinsice behaviours / inner workings on a control then a control template is what you want. For example, if you want to change how a button is laid out by adding some sort of grid behaviour, then using a control template is the way forward.

Unfortunately, for your specific example, you don't know unless you try it. Basically you first try it with a Style....and if that doesn't work for whatever reason, then you write a ControlTemplate. You usually only end up writing ControlTemplates for the reasons Ray mentioned.
My guess is that the trigger you're trying to set has also been hardcoded in the ControlTemplate...which is bad design imo because it prevents the Style from overriding it.

By "Background" I take it to mean the "blue" rectangle that surrounds the ListBoxItem when it is selected?
This is actually the FocusVisualStyle property, which is a style that describes what the item should look like when it is focused. The Control explicitly sets this property (described here), so in order to override it, you will have to redefine the Control Template, making sure to use a default Style setter to set it to {x:Null}.