dotnet
/
GraphicsControls
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge pull request #70 from dotnet/darktheme-material 

Dark theme support in Material drawables
This commit is contained in:
Javier Suárez 2021-10-14 15:45:59 +02:00 коммит произвёл GitHub
Родитель 485099caf5 b1f0d36afc
Коммит 9e5ba9b992
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
12 изменённых файлов: 203 добавлений и 61 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

8
src/GraphicsControls/Handlers/Button/MaterialButtonDrawable.cs
Просмотреть файл

@ -1,4 +1,5 @@
using Microsoft.Maui.Animations;
using Microsoft.Maui.Controls;
namespace Microsoft.Maui.Graphics.Controls
{
@ -22,7 +23,12 @@ namespace Microsoft.Maui.Graphics.Controls
canvas.FillColor = Material.Color.Blue.ToColor();
}
else
canvas.FillColor = Material.Color.Gray3.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = Material.Color.Light.Gray3.ToColor();
else
canvas.FillColor = Material.Color.Dark.Gray4.ToColor();
}
var x = dirtyRect.X;
var y = dirtyRect.Y;

25
src/GraphicsControls/Handlers/CheckBox/MaterialCheckBoxDrawable.cs
Просмотреть файл

@ -1,4 +1,6 @@
namespace Microsoft.Maui.Graphics.Controls
using Microsoft.Maui.Controls;
namespace Microsoft.Maui.Graphics.Controls
{
public class MaterialCheckBoxDrawable : ViewDrawable<ICheckBox>, ICheckBoxDrawable
{
@ -18,7 +20,12 @@
if (checkBox.IsEnabled)
canvas.FillColor = Material.Color.Blue.ToColor();
else
canvas.FillColor = Material.Color.Gray3.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = Material.Color.Light.Gray3.ToColor();
else
canvas.FillColor = Material.Color.Dark.Gray3.ToColor();
}
canvas.FillRoundedRectangle(x, y, size, size, 2);
}
@ -27,7 +34,12 @@
var strokeWidth = 2;
canvas.StrokeSize = strokeWidth;
canvas.StrokeColor = Material.Color.Gray1.ToColor();
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.StrokeColor = Material.Color.Light.Gray1.ToColor();
else
canvas.StrokeColor = Material.Color.Dark.Gray1.ToColor();
canvas.DrawRoundedRectangle(x + strokeWidth / 2, y + strokeWidth / 2, size - strokeWidth, size - strokeWidth, 2);
}
@ -48,7 +60,12 @@
if (VirtualView.IsEnabled)
canvas.StrokeColor = Material.Color.White.ToColor();
else
canvas.StrokeColor = Material.Color.Gray1.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.StrokeColor = Material.Color.Light.Gray1.ToColor();
else
canvas.StrokeColor = Material.Color.Dark.Gray6.ToColor();
}
canvas.DrawPath(path);

22
src/GraphicsControls/Handlers/DatePicker/MaterialDatePickerDrawable.cs
Просмотреть файл

@ -1,4 +1,6 @@
namespace Microsoft.Maui.Graphics.Controls
using Microsoft.Maui.Controls;
namespace Microsoft.Maui.Graphics.Controls
{
public class MaterialDatePickerDrawable : ViewDrawable<IDatePicker>, IDatePickerDrawable
{
@ -9,7 +11,12 @@
if (datePicker.Background != null)
canvas.SetFillPaint(datePicker.Background, dirtyRect);
else
canvas.FillColor = datePicker.IsEnabled ? Material.Color.Gray5.ToColor() : Material.Color.Gray3.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = datePicker.IsEnabled ? Material.Color.Light.Gray5.ToColor() : Material.Color.Light.Gray3.ToColor();
else
canvas.FillColor = datePicker.IsEnabled ? Material.Color.Dark.Gray5.ToColor() : Material.Color.Dark.Gray3.ToColor();
}
const float cornerRadius = 4.0f;
@ -29,7 +36,7 @@
canvas.SaveState();
var strokeWidth = 1.0f;
canvas.FillColor = Material.Color.Black.ToColor();
canvas.FillColor = (Application.Current?.RequestedTheme == OSAppTheme.Light) ? Material.Color.Black.ToColor() : Material.Color.Light.Gray6.ToColor().WithAlpha(0.5f);
var x = dirtyRect.X;
var y = 53.91f;
@ -46,7 +53,7 @@
{
canvas.SaveState();
canvas.FontColor = datePicker.TextColor.WithDefault(Material.Color.Dark);
canvas.FontColor = datePicker.TextColor.WithDefault(Material.Color.DarkBackground, Material.Color.LightBackground);
canvas.FontSize = 16f;
float margin = 12f;
@ -75,7 +82,12 @@
canvas.SaveState();
if (datePicker.TextColor == null)
canvas.FontColor = Material.Color.Gray1.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FontColor = Material.Color.Light.Gray1.ToColor();
else
canvas.FontColor = Material.Color.Light.Gray6.ToColor();
}
else
canvas.FontColor = datePicker.TextColor.WithAlpha(0.75f);

12
src/GraphicsControls/Handlers/Editor/MaterialEditorDrawable.cs
Просмотреть файл

@ -1,4 +1,5 @@
using Microsoft.Maui.Animations;
using Microsoft.Maui.Controls;
namespace Microsoft.Maui.Graphics.Controls
{
@ -20,7 +21,12 @@ namespace Microsoft.Maui.Graphics.Controls
if (editor.Background != null)
canvas.SetFillPaint(editor.Background, dirtyRect);
else
canvas.FillColor = editor.IsEnabled ? Material.Color.Gray5.ToColor() : Material.Color.Gray3.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = editor.IsEnabled ? Material.Color.Light.Gray5.ToColor() : Material.Color.Light.Gray3.ToColor();
else
canvas.FillColor = editor.IsEnabled ? Material.Color.Dark.Gray5.ToColor() : Material.Color.Dark.Gray3.ToColor();
}
const float cornerRadius = 4.0f;
@ -40,7 +46,7 @@ namespace Microsoft.Maui.Graphics.Controls
canvas.SaveState();
var strokeWidth = 1.0f;
canvas.FillColor = Material.Color.Black.ToColor();
canvas.FillColor = (Application.Current?.RequestedTheme == OSAppTheme.Light) ? Material.Color.Black.ToColor() : Material.Color.Light.Gray6.ToColor().WithAlpha(0.5f);
if (editor.IsEnabled && HasFocus)
{
@ -63,7 +69,7 @@ namespace Microsoft.Maui.Graphics.Controls
{
canvas.SaveState();
canvas.FontColor = editor.PlaceholderColor.WithDefault(Material.Color.Dark);
canvas.FontColor = editor.PlaceholderColor.WithDefault(Material.Color.DarkBackground, Material.Color.LightBackground);
var materialPlaceholderFontSize = UnfocusedPlaceholderFontSize.Lerp(FocusedPlaceholderFontSize, AnimationPercent);

15
src/GraphicsControls/Handlers/Entry/MaterialEntryDrawable.cs
Просмотреть файл

@ -1,4 +1,5 @@
using Microsoft.Maui.Animations;
using Microsoft.Maui.Controls;
namespace Microsoft.Maui.Graphics.Controls
{
@ -26,7 +27,12 @@ namespace Microsoft.Maui.Graphics.Controls
if (entry.Background != null)
canvas.SetFillPaint(entry.Background, dirtyRect);
else
canvas.FillColor = entry.IsEnabled ? Material.Color.Gray5.ToColor() : Material.Color.Gray3.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = entry.IsEnabled ? Material.Color.Light.Gray5.ToColor() : Material.Color.Light.Gray3.ToColor();
else
canvas.FillColor = entry.IsEnabled ? Material.Color.Dark.Gray5.ToColor() : Material.Color.Dark.Gray3.ToColor();
}
const float cornerRadius = 4.0f;
@ -46,7 +52,7 @@ namespace Microsoft.Maui.Graphics.Controls
canvas.SaveState();
var strokeWidth = 1.0f;
canvas.FillColor = Material.Color.Black.ToColor();
canvas.FillColor = (Application.Current?.RequestedTheme == OSAppTheme.Light) ? Material.Color.Black.ToColor() : Material.Color.Light.Gray6.ToColor().WithAlpha(0.5f);
if (entry.IsEnabled && HasFocus)
{
@ -149,7 +155,10 @@ namespace Microsoft.Maui.Graphics.Controls
{
canvas.SaveState();
canvas.FontColor = Material.Color.Dark.ToColor();
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FontColor = Material.Color.DarkBackground.ToColor();
else
canvas.FontColor = Material.Color.LightBackground.ToColor();
var materialPlaceholderFontSize = UnfocusedPlaceholderFontSize.Lerp(FocusedPlaceholderFontSize, AnimationPercent);

18
src/GraphicsControls/Handlers/ProgressBar/MaterialProgressBarDrawable.cs
Просмотреть файл

@ -1,4 +1,6 @@
namespace Microsoft.Maui.Graphics.Controls
using Microsoft.Maui.Controls;
namespace Microsoft.Maui.Graphics.Controls
{
public class MaterialProgressBarDrawable : ViewDrawable<IProgress>, IProgressBarDrawable
{
@ -11,7 +13,12 @@
if (progressBar.IsEnabled)
canvas.FillColor = Material.Color.Blue.ToColor();
else
canvas.FillColor = Material.Color.Gray3.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = Material.Color.Light.Gray3.ToColor();
else
canvas.FillColor = Material.Color.Dark.Gray6.ToColor();
}
var x = dirtyRect.X;
var y = (float)((dirtyRect.Height - MaterialTrackHeight) / 2);
@ -30,7 +37,12 @@
if (progressBar.Background != null)
canvas.SetFillPaint(progressBar.Background, dirtyRect);
else
canvas.FillColor = Fluent.Color.Background.NeutralLight.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = Fluent.Color.Background.NeutralLight.ToColor();
else
canvas.FillColor = Fluent.Color.Background.NeutralDark.ToColor();
}
var x = dirtyRect.X;
var y = (float)((dirtyRect.Height - MaterialTrackHeight) / 2);

17
src/GraphicsControls/Handlers/Slider/MaterialSliderDrawable.cs
Просмотреть файл

@ -12,7 +12,10 @@
{
canvas.SaveState();
canvas.FillColor = slider.MaximumTrackColor.WithDefault(VirtualView.IsEnabled ? Material.Color.LightBlue : Material.Color.Gray3);
if (slider.IsEnabled)
canvas.FillColor = slider.MaximumTrackColor.WithDefault(Material.Color.LightBlue);
else
canvas.FillColor = slider.MaximumTrackColor.WithDefault(Material.Color.Light.Gray3, Material.Color.Dark.Gray3);
var x = dirtyRect.X;
@ -32,8 +35,11 @@
public virtual void DrawTrackProgress(ICanvas canvas, RectangleF dirtyRect, ISlider slider)
{
canvas.SaveState();
canvas.FillColor = slider.MinimumTrackColor.WithDefault(slider.IsEnabled ? Material.Color.Blue : Material.Color.Gray1);
if (slider.IsEnabled)
canvas.FillColor = slider.MinimumTrackColor.WithDefault(Material.Color.Blue);
else
canvas.FillColor = slider.MinimumTrackColor.WithDefault(Material.Color.Light.Gray1, Material.Color.Dark.Gray1);
var x = dirtyRect.X;
@ -66,7 +72,10 @@
var y = (float)((dirtyRect.Height - MaterialFloatThumb) / 2);
canvas.FillColor = slider.ThumbColor.WithDefault(slider.IsEnabled ? Material.Color.Blue : Material.Color.Gray1);
if (slider.IsEnabled)
canvas.FillColor = slider.ThumbColor.WithDefault(Material.Color.Blue);
else
canvas.FillColor = slider.ThumbColor.WithDefault(Material.Color.Light.Gray1, Material.Color.Dark.Gray1);
touchTargetRect.Center(new PointF(x, y));

22
src/GraphicsControls/Handlers/Stepper/MaterialStepperDrawable.cs
Просмотреть файл

@ -1,4 +1,5 @@
using Microsoft.Maui.Animations;
using Microsoft.Maui.Controls;
namespace Microsoft.Maui.Graphics.Controls
{
@ -26,7 +27,12 @@ namespace Microsoft.Maui.Graphics.Controls
if (stepper.Background != null)
canvas.SetFillPaint(stepper.Background, dirtyRect);
else
canvas.FillColor = stepper.IsEnabled ? Material.Color.White.ToColor() : Material.Color.Gray6.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = stepper.IsEnabled ? Material.Color.White.ToColor() : Material.Color.Light.Gray6.ToColor();
else
canvas.FillColor = stepper.IsEnabled ? Material.Color.Dark.Gray1.ToColor().WithAlpha(0.25f) : Material.Color.Dark.Gray2.ToColor().WithAlpha(0.25f);
}
var x = dirtyRect.X;
var y = dirtyRect.Y;
@ -54,7 +60,7 @@ namespace Microsoft.Maui.Graphics.Controls
canvas.SaveState();
canvas.StrokeSize = 1;
canvas.StrokeColor = Material.Color.Gray6.ToColor();
canvas.StrokeColor = Application.Current?.RequestedTheme == OSAppTheme.Light ? Material.Color.Light.Gray6.ToColor() : Material.Color.Dark.Gray6.ToColor();
var x = dirtyRect.X;
var y = dirtyRect.Y;
@ -69,10 +75,10 @@ namespace Microsoft.Maui.Graphics.Controls
var vBuilder = new PathBuilder();
var path = vBuilder.BuildPath(MaterialStepperMinusIcon);
if (VirtualView.IsEnabled)
canvas.FillColor = Material.Color.Black.ToColor();
if (stepper.IsEnabled)
canvas.FillColor = Application.Current?.RequestedTheme == OSAppTheme.Light ? Material.Color.Black.ToColor() : Material.Color.White.ToColor().WithAlpha(0.5f);
else
canvas.FillColor = Material.Color.Gray3.ToColor();
canvas.FillColor = Application.Current?.RequestedTheme == OSAppTheme.Light ? Material.Color.Light.Gray3.ToColor() : Material.Color.White.ToColor().WithAlpha(0.25f);
canvas.FillPath(path);
@ -86,7 +92,7 @@ namespace Microsoft.Maui.Graphics.Controls
canvas.SaveState();
canvas.StrokeSize = 1;
canvas.StrokeColor = Material.Color.Gray6.ToColor();
canvas.StrokeColor = Application.Current?.RequestedTheme == OSAppTheme.Light ? Material.Color.Light.Gray6.ToColor() : Material.Color.Dark.Gray6.ToColor();
var x = MaterialStepperWidth / 2 + MaterialButtonMargin;
var y = dirtyRect.Y;
@ -102,9 +108,9 @@ namespace Microsoft.Maui.Graphics.Controls
var path = vBuilder.BuildPath(MaterialStepperPlusIcon);
if (stepper.IsEnabled)
canvas.FillColor = Material.Color.Black.ToColor();
canvas.FillColor = Application.Current?.RequestedTheme == OSAppTheme.Light ? Material.Color.Black.ToColor() : Material.Color.White.ToColor().WithAlpha(0.5f);
else
canvas.FillColor = Material.Color.Gray3.ToColor();
canvas.FillColor = Application.Current?.RequestedTheme == OSAppTheme.Light ? Material.Color.Light.Gray3.ToColor() : Material.Color.White.ToColor().WithAlpha(0.25f);
canvas.FillPath(path);

29
src/GraphicsControls/Handlers/Switch/MaterialSwitchDrawable.cs
Просмотреть файл

@ -1,4 +1,5 @@
using Microsoft.Maui.Animations;
using Microsoft.Maui.Controls;
namespace Microsoft.Maui.Graphics.Controls
{
@ -16,13 +17,23 @@ namespace Microsoft.Maui.Graphics.Controls
canvas.SaveState();
if (view.IsOn)
canvas.FillColor = view.TrackColor.WithDefault(view.IsEnabled ? Material.Color.LightBlue : Material.Color.Gray4);
{
if (view.IsEnabled)
canvas.FillColor = view.TrackColor.WithDefault(Material.Color.LightBlue);
else
canvas.FillColor = view.TrackColor.WithDefault(Material.Color.Light.Gray4, Material.Color.Dark.Gray4);
}
else
{
if (view.Background != null)
canvas.SetFillPaint(view.Background, dirtyRect);
else
canvas.FillColor = view.IsEnabled ? Material.Color.Gray2.ToColor() : Material.Color.Gray3.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = view.IsEnabled ? Material.Color.Light.Gray2.ToColor() : Material.Color.Light.Gray3.ToColor();
else
canvas.FillColor = view.IsEnabled ? Material.Color.Dark.Gray2.ToColor() : Material.Color.Dark.Gray3.ToColor();
}
}
canvas.Alpha = 1.0f.Lerp(0.5f, AnimationPercent);
@ -45,9 +56,19 @@ namespace Microsoft.Maui.Graphics.Controls
canvas.SaveState();
if (view.IsOn)
canvas.FillColor = view.ThumbColor.WithDefault(view.IsEnabled ? Material.Color.Blue : Material.Color.Gray1);
{
if (view.IsEnabled)
canvas.FillColor = view.ThumbColor.WithDefault(Material.Color.Blue);
else
canvas.FillColor = view.ThumbColor.WithDefault(Material.Color.Light.Gray1, Material.Color.Dark.Gray1);
}
else
canvas.FillColor = view.ThumbColor.WithDefault(view.IsEnabled ? Material.Color.White : Material.Color.Gray3);
{
if (view.IsEnabled)
canvas.FillColor = view.ThumbColor.WithDefault(Material.Color.White, Material.Color.Black);
else
canvas.FillColor = view.ThumbColor.WithDefault(Material.Color.Light.Gray1, Material.Color.Dark.Gray1);
}
var margin = 2;
var radius = 10;

21
src/GraphicsControls/Handlers/TimePicker/MaterialTimePickerDrawable.cs
Просмотреть файл

@ -1,4 +1,5 @@
using System;
using Microsoft.Maui.Controls;
using System;
namespace Microsoft.Maui.Graphics.Controls
{
@ -11,7 +12,12 @@ namespace Microsoft.Maui.Graphics.Controls
if (timePicker.Background != null)
canvas.SetFillPaint(timePicker.Background, dirtyRect);
else
canvas.FillColor = timePicker.IsEnabled ? Material.Color.Gray5.ToColor() : Material.Color.Gray3.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FillColor = timePicker.IsEnabled ? Material.Color.Light.Gray5.ToColor() : Material.Color.Light.Gray3.ToColor();
else
canvas.FillColor = timePicker.IsEnabled ? Material.Color.Dark.Gray5.ToColor() : Material.Color.Dark.Gray3.ToColor();
}
const float cornerRadius = 4.0f;
@ -31,7 +37,7 @@ namespace Microsoft.Maui.Graphics.Controls
canvas.SaveState();
var strokeWidth = 1.0f;
canvas.FillColor = Material.Color.Black.ToColor();
canvas.FillColor = (Application.Current?.RequestedTheme == OSAppTheme.Light) ? Material.Color.Black.ToColor() : Material.Color.Light.Gray6.ToColor().WithAlpha(0.5f);
var x = dirtyRect.X;
var y = 53.91f;
@ -49,7 +55,12 @@ namespace Microsoft.Maui.Graphics.Controls
canvas.SaveState();
if (timePicker.TextColor == null)
canvas.FontColor = Material.Color.Gray1.ToColor();
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
canvas.FontColor = Material.Color.Light.Gray1.ToColor();
else
canvas.FontColor = Material.Color.Light.Gray6.ToColor();
}
else
canvas.FontColor = timePicker.TextColor.WithAlpha(0.75f);
@ -79,7 +90,7 @@ namespace Microsoft.Maui.Graphics.Controls
{
canvas.SaveState();
canvas.FontColor = timePicker.TextColor.WithDefault(Material.Color.Dark);
canvas.FontColor = timePicker.TextColor.WithDefault(Material.Color.DarkBackground, Material.Color.LightBackground);
canvas.FontSize = 16f;
float margin = 12f;

51
src/GraphicsControls/Platform/ColorExtensions.cs
Просмотреть файл

@ -13,30 +13,43 @@ namespace Microsoft.Maui.Graphics.Controls
return Color.FromArgb(defaultColor);
}
public static Color WithDefault(this Color color, string defaultLightColor, string defaultDarkColor)
{
if (!color.IsDefault())
return color;
else
{
if (Application.Current?.RequestedTheme == OSAppTheme.Light)
return Color.FromArgb(defaultLightColor);
else
return Color.FromArgb(defaultDarkColor);
}
}
public static Color ToColor(this string hex)
{
return Color.FromArgb(hex);
}
const float LighterFactor = 1.1f;
const float DarkerFactor = 0.9f;
const float LighterFactor = 1.1f;
const float DarkerFactor = 0.9f;
public static Color Lighter(this Color color)
{
return new Color(
color.Red * LighterFactor,
color.Green * LighterFactor,
color.Blue * LighterFactor,
color.Alpha);
}
public static Color Lighter(this Color color)
{
return new Color(
color.Red * LighterFactor,
color.Green * LighterFactor,
color.Blue * LighterFactor,
color.Alpha);
}
public static Color Darker(this Color color)
{
return new Color(
color.Red * DarkerFactor,
color.Green * DarkerFactor,
color.Blue * DarkerFactor,
color.Alpha);
}
}
public static Color Darker(this Color color)
{
return new Color(
color.Red * DarkerFactor,
color.Green * DarkerFactor,
color.Blue * DarkerFactor,
color.Alpha);
}
}
}

24
src/GraphicsControls/Platform/Material.cs
Просмотреть файл

@ -29,9 +29,29 @@
public const string Gray6 = "#F2F2F7";
public const string Black = "#000000";
public const string Dark = "#1F1F1F";
public const string DarkBackground = "#1F1F1F";
public const string White = "#FFFFFF";
public const string Light = "#E3E3E3";
public const string LightBackground = "#E3E3E3";
public static class Light
{
public const string Gray1 = "#8E8E93";
public const string Gray2 = "#C7C7CC";
public const string Gray3 = "#D1D1D6";
public const string Gray4 = "#E5E5EA";
public const string Gray5 = "#EFEFF4";
public const string Gray6 = "#F2F2F7";
}
public static class Dark
{
public const string Gray1 = "#121212";
public const string Gray2 = "#1e1e1e";
public const string Gray3 = "#222222";
public const string Gray4 = "#242424";
public const string Gray5 = "#272727";
public const string Gray6 = "#2c2c2c";
}
}
public static class Font