Adding dark/light theme support part-1 97/261997/1
authoraman.jeph <aman.jeph@samsung.com>
Fri, 30 Jul 2021 09:18:48 +0000 (14:48 +0530)
committeraman.jeph <aman.jeph@samsung.com>
Fri, 30 Jul 2021 09:18:48 +0000 (14:48 +0530)
Change-Id: I62bba67864778f1a551b58c89da4dc5b7eb5ae15
Signed-off-by: aman.jeph <aman.jeph@samsung.com>
Common/AppConstants.cs
Common/PlayerCommon.cs
Common/Resources.cs
Models/PlayerModel.cs
MusicPlayer.cs
Views/Utils/MultiStateButton.cs [new file with mode: 0644]
res/themes/dark.xaml [new file with mode: 0644]
res/themes/light.xaml [new file with mode: 0644]

index 3dfb522f0d568e1c6bea8a4c61b2a775a5f1b2e5..104322bf7c6864a58014a1500040aed0d326558f 100755 (executable)
@@ -10,5 +10,7 @@
 
         // string literals
         public const string TimeFormat = @"mm\:ss";
+        public const string LightPlatformThemeId = "org.tizen.default-light-theme";
+        public const string DarkPlatformThemeId = "org.tizen.default-dark-theme";
     }
 }
index 2d51a5666a49a9a92d27542e07c5616f97981bb4..04ba5a23ced35a89315fb9b0d18a7b80edd8b35d 100755 (executable)
@@ -4,6 +4,11 @@ using System.Text;
 
 namespace MusicPlayer.Common
 {
+    public enum ThemeType
+    {
+        Light,
+        Dark
+    };
     public enum RepeatMode
     {
         Off,
@@ -25,6 +30,12 @@ namespace MusicPlayer.Common
         Off,
     }
 
+    public enum Favourite
+    {
+        On,
+        Off,
+    }
+
     public enum EventType
     {
         Error,
index 865883ccd5625bb73d110efa4ccf9792dc0017cc..361c2da8f620af6ce846660fa2488e70b5343b04 100644 (file)
@@ -10,5 +10,10 @@ namespace MusicPlayer.Common
         {
             return Tizen.Applications.Application.Current.DirectoryInfo.Resource + "images/";
         }
+
+        public static string GetThemePath()
+        {
+            return Tizen.Applications.Application.Current.DirectoryInfo.Resource + "themes/";
+        }
     }
 }
index f5335a0a8599c0a05459a6fa3c42ec505746d103..1bc59db5326ba66e26c554926e6a261a5d2b1532 100755 (executable)
@@ -22,7 +22,6 @@ namespace MusicPlayer.Models
                 TrackLength = currentTrack.Duration;
                 PlayingTime = TimeSpan.FromMilliseconds(0).ToString(AppConstants.TimeFormat);
                 ThumbnailPath = currentTrack.ThumbnailPath;
-                PlayingStatus = PlayingStatus.None;
             }
         }
 
@@ -58,14 +57,6 @@ namespace MusicPlayer.Models
             set => SetProperty(ref thumbnailPath, value);
         }
 
-        private PlayingStatus playingStatus;
-
-        public PlayingStatus PlayingStatus
-        {
-            get => playingStatus;
-            set { playingStatus = value; }
-        }
-
         private string playingTime;
 
         public string PlayingTime
index 1a0a01e2d68d7367fbe529d758f983a368b09578..cb65d24266a556456b097044ea33bc9278b34d7c 100755 (executable)
@@ -7,6 +7,10 @@ namespace MusicPlayer
 {
     public class Application : NUIApplication
     {
+        public Application() : base(ThemeOptions.PlatformThemeEnabled)
+        {
+
+        }
         protected override void OnCreate()
         {
             Tizen.Log.Info(AppConstants.LogTag, "OnCreate statrted");
diff --git a/Views/Utils/MultiStateButton.cs b/Views/Utils/MultiStateButton.cs
new file mode 100644 (file)
index 0000000..e605dc0
--- /dev/null
@@ -0,0 +1,93 @@
+using System.Collections.Generic;
+using Tizen.NUI;
+using Tizen.NUI.Binding;
+using Tizen.NUI.Components;
+using MusicPlayer.Common;
+
+namespace MusicPlayer.Views.Utils
+{
+    class MultiStateButton: Button
+    {
+        public static readonly BindableProperty CustomStateProperty = BindableProperty.Create(nameof(CusotmState), typeof(string), typeof(MultiStateButton), null, propertyChanged: (bindable, oldValue, newValue) =>
+        {
+            var instance = (MultiStateButton)bindable;
+            if (newValue != null)
+            {
+                string newCustomState = (string)newValue;
+                instance.UpdateCustomState(newCustomState);
+            }
+        },
+        defaultValueCreator: (bindable) =>
+        {
+            var instance = (MultiStateButton)bindable;
+            return instance.customState;
+        });
+
+        public MultiStateButton() : base()
+        {
+            ThemeChangeSensitive = true;
+            EnableControlState = true;
+            BackgroundColor = Color.Transparent;
+        }
+
+        private Dictionary<ThemeType, Dictionary<string, StringSelector>> iconResources;
+
+        public Dictionary<ThemeType, Dictionary<string, StringSelector>> IconResources
+        {
+            get => iconResources;
+            set => iconResources = value;
+        }
+
+        private string customState;
+        public string CusotmState
+        {
+            get => (string)GetValue(CustomStateProperty);
+            set => SetValue(CustomStateProperty, value);
+        }
+
+        private void UpdateCustomState(string customStatevalue)
+        {
+            if (IconResources == null)
+            {
+                Tizen.Log.Error(AppConstants.LogTag, "ThemesIconState needs to be set first");
+                return;
+            }
+            ThemeType type = GetCurrentThemeType();
+            if (iconResources.ContainsKey(type) == false)
+            {
+                Tizen.Log.Error(AppConstants.LogTag, "Theme state doesn't exists: " + type.ToString());
+                return;
+            }
+            Dictionary<string, StringSelector> stateResource = iconResources[type];
+            if (stateResource.ContainsKey(customStatevalue) == false)
+            {
+                Tizen.Log.Error(AppConstants.LogTag, "Invalid state: " + customStatevalue);
+                return;
+            }
+            IconURLSelector = stateResource[customStatevalue];
+            customState = customStatevalue;
+        }
+
+        private ThemeType GetCurrentThemeType()
+        {
+            ThemeType type;
+            string id = ThemeManager.PlatformThemeId;
+            if (id.Equals(AppConstants.LightPlatformThemeId))
+            {
+                type = ThemeType.Light;
+            }
+            else
+            {
+                type = ThemeType.Dark;
+            }
+            return type;
+        }
+
+        protected override void OnThemeChanged(object sender, ThemeChangedEventArgs e)
+        {
+            base.OnThemeChanged(sender, e);
+            UpdateCustomState(CusotmState);
+        }
+    }
+}
+
diff --git a/res/themes/dark.xaml b/res/themes/dark.xaml
new file mode 100644 (file)
index 0000000..1ad5b52
--- /dev/null
@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Theme
+xmlns="http://tizen.org/Tizen.NUI/2018/XAML"
+xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+xmlns:c="clr-namespace:Tizen.NUI.Components;assembly=Tizen.NUI.Components"
+Id="LightTheme">
+
+  <ViewStyle x:Key="AppBackground" BackgroundColor="#0E1017" />
+
+  <c:ButtonStyle x:Key="PrevButton" Size="48, 48" Position="168, 196" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/dark/prev.png" Pressed="*Resource*/images/prev_pressed.png" Disabled="*Resource*/images/prev_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="NextButton" Size="48, 48" Position="424, 196" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/dark/next.png" Pressed="*Resource*/images/next_pressed.png" Disabled="*Resource*/images/next_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="ShuffleButton" Size="48, 48" Position="0, 196" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/next.png" Pressed="*Resource*/images/next_pressed.png" Disabled="*Resource*/images/next_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="RepeatButton" Size="48, 48" Position="592, 196" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/next.png" Pressed="*Resource*/images/next_pressed.png" Disabled="*Resource*/images/next_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="ListButton" Size="48, 48" Position="0, 0" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/dark/playing_queue.png" Pressed="*Resource*/images/playing_queue_pressed.png" Disabled="*Resource*/images/playing_queue_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="PlaylistButton" Size="48, 48" Position="88, 0" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/dark/addtoplaylist.png" Pressed="*Resource*/images/addtoplaylist_pressed.png" Disabled="*Resource*/images/addtoplaylist_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="FavouriteButton" Size="48, 48" Position="176, 0" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/next.png" Pressed="*Resource*/images/next_pressed.png" Disabled="*Resource*/images/next_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="PlayAll" Size="48, 48" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/dark/addtoplaylist.png" Pressed="*Resource*/images/addtoplaylist_pressed.png" Disabled="*Resource*/images/addtoplaylist_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="PlaylistAdd" Size="48, 48" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/dark/shuffle_on.png" Pressed="*Resource*/images/shuffle_on_pressed.png" Disabled="*Resource*/images/shuffle_on_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:SliderStyle x:Key="Slider" TrackThickness="8" IndicatorType="Image">
+    <c:SliderStyle.Track>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>*Resource*/images/empty_track.png</ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:SliderStyle.Track>
+    <c:SliderStyle.Progress>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>*Resource*/images/dark/progress_track.png</ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:SliderStyle.Progress>
+    <c:SliderStyle.Thumb>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>*Resource*/images/dark/nomal_slider_handler.png</ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:SliderStyle.Thumb>
+  </c:SliderStyle>
+
+  <c:ButtonStyle x:Key="BackButton" Size="48, 48" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/dark/back.png" Pressed="*Resource*/images/back_pressed.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="MoreButton" Size="48, 48" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/dark/more.png" Pressed="*Resource*/images/more_pressed.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <ImageViewStyle x:Key="LeftVolume" Size="48, 48" Position="0, 336">
+    <ImageViewStyle.ResourceUrl>*Resource*/images/dark/left_sound_icon.png</ImageViewStyle.ResourceUrl>
+  </ImageViewStyle>
+
+  <ImageViewStyle x:Key="RightVolume" Size="48, 48" Position="592, 336">
+    <ImageViewStyle.ResourceUrl>*Resource*/images/dark/right_sound_icon.png</ImageViewStyle.ResourceUrl>
+  </ImageViewStyle>
+
+  <TextLabelStyle x:Key="LabelText" TextColor="#FFFFFF"></TextLabelStyle>
+
+  <TextLabelStyle x:Key="ItemLabel">
+    <TextLabelStyle.TextColor>
+      <Selector x:TypeArguments="Color" Normal="#FFFFFF" Selected="#1473E6"/>
+    </TextLabelStyle.TextColor>
+  </TextLabelStyle>
+
+</Theme>
\ No newline at end of file
diff --git a/res/themes/light.xaml b/res/themes/light.xaml
new file mode 100644 (file)
index 0000000..552ec81
--- /dev/null
@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Theme
+xmlns="http://tizen.org/Tizen.NUI/2018/XAML"
+xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+xmlns:c="clr-namespace:Tizen.NUI.Components;assembly=Tizen.NUI.Components"
+Id="LightTheme">
+
+  <ViewStyle x:Key="AppBackground" BackgroundColor="#EEEFF1" />
+
+  <c:ButtonStyle x:Key="PrevButton" Size="48, 48" Position="168, 196" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/light/prev.png" Pressed="*Resource*/images/prev_pressed.png" Disabled="*Resource*/images/prev_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="NextButton" Size="48, 48" Position="424, 196" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent" >
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/light/next.png" Pressed="*Resource*/images/next_pressed.png" Disabled="*Resource*/images/next_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="ShuffleButton" Size="48, 48" Position="0, 196" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/next.png" Pressed="*Resource*/images/next_pressed.png" Disabled="*Resource*/images/next_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="RepeatButton" Size="48, 48" Position="592, 196" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/next.png" Pressed="*Resource*/images/next_pressed.png" Disabled="*Resource*/images/next_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="ListButton" Size="48, 48" Position="0, 0" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/light/playing_queue.png" Pressed="*Resource*/images/playing_queue_pressed.png" Disabled="*Resource*/images/playing_queue_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="PlaylistButton" Size="48, 48" Position="88, 0" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/light/addtoplaylist.png" Pressed="*Resource*/images/addtoplaylist_pressed.png" Disabled="*Resource*/images/addtoplaylist_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="FavouriteButton" Size="48, 48" Position="176, 0" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/next.png" Pressed="*Resource*/images/next_pressed.png" Disabled="*Resource*/images/next_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="PlayAll" Size="48, 48" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/light/addtoplaylist.png" Pressed="*Resource*/images/addtoplaylist_pressed.png" Disabled="*Resource*/images/addtoplaylist_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="PlaylistAdd" Size="48, 48" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/light/shuffle_on.png" Pressed="*Resource*/images/shuffle_on_pressed.png" Disabled="*Resource*/images/shuffle_on_disabled.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:SliderStyle x:Key="Slider" TrackThickness="8" IndicatorType="Image">
+    <c:SliderStyle.Track>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>*Resource*/images/empty_track.png</ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:SliderStyle.Track>
+    <c:SliderStyle.Progress>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>*Resource*/images/light/progress_track.png</ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:SliderStyle.Progress>
+    <c:SliderStyle.Thumb>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>*Resource*/images/light/nomal_slider_handler.png</ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:SliderStyle.Thumb>
+  </c:SliderStyle>
+
+  <c:ButtonStyle x:Key="BackButton" Size="48, 48" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/light/back.png" Pressed="*Resource*/images/back_pressed.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <c:ButtonStyle x:Key="MoreButton" Size="48, 48" IsSelectable="false" IsEnabled="true" BackgroundColor="Transparent">
+    <c:ButtonStyle.Icon>
+      <ImageViewStyle>
+        <ImageViewStyle.ResourceUrl>
+          <Selector x:TypeArguments="x:String" Normal="*Resource*/images/light/more.png" Pressed="*Resource*/images/more_pressed.png" />
+        </ImageViewStyle.ResourceUrl>
+      </ImageViewStyle>
+    </c:ButtonStyle.Icon>
+  </c:ButtonStyle>
+
+  <ImageViewStyle x:Key="LeftVolume" Size="48, 48" Position="0, 336">
+    <ImageViewStyle.ResourceUrl>*Resource*/images/light/left_sound_icon.png</ImageViewStyle.ResourceUrl>
+  </ImageViewStyle>
+
+  <ImageViewStyle x:Key="RightVolume" Size="48, 48" Position="592, 336">
+    <ImageViewStyle.ResourceUrl>*Resource*/images/light/right_sound_icon.png</ImageViewStyle.ResourceUrl>
+  </ImageViewStyle>
+
+  <TextLabelStyle x:Key="LabelText" TextColor="#001447"/>
+
+  <TextLabelStyle x:Key="ItemLabel">
+    <TextLabelStyle.TextColor>
+      <Selector x:TypeArguments="Color" Normal="#001447" Selected="#1473E6"/>
+    </TextLabelStyle.TextColor>
+  </TextLabelStyle>
+
+</Theme>
\ No newline at end of file