 Let's make a Plasma theme together, shall we? The first task is to create a project folder. Let's go to .local slash share slash Plasma. There you will find a folder called desktop theme. If it's not there, make it yourself. Inside it you will find all the themes you have downloaded. Let's make a new one. Let's create a new folder with the name of your theme, I'll call it Sonya in honor of my daughter. The first thing to do in your project folder is create the metadata file. So a new file called metadata.desktop. The metadata file will contain all the important information about your theme. So first of all let's say desktop entry and then we can say the name of the theme which in this case is Sonya and then the comment which is the description of the theme. Then there is the author of the theme which in this case is Nikola Venorandi. Then there is the email of the author which in this case is Nikola at Venorandi.com, asset.com. Then there is the name of the theme as before it's Sonya. There is the version of the theme which is let's say 0.1 and finally the license which is Creative Commons 0. The Plasma API line is a magic tool that we'll use later. Then we have the contrast effect which is something you should only include if you want your theme to be transparent. If you do want your theme to be transparent you love to set the contrast intensity and saturation values of the contrast effect. If you do not know what those is go to this link and I've made a little tool to help you visualize what happens if you change the contrast, the saturation or the brightness. Back to work. After the metadata file we can create all the directories of our project. The first one is dialogue which is the applet kickoff and so on. Then there are the icons of your Plasma theme and then we have the widgets which is basically everything else. We will fill those directories of SVGs to customize our Plasma theme. However we need two more. The first one is a pack which is used when compositing is disabled. Inside the pack we will have to have copies of the dialogue and of the widgets. Next up is transparent. Contrast effect is used when contrast effect is enabled either by you or by the user. Again we need to create the dialogues and widgets folders inside them. And that's pretty much it. We can begin editing our first SVG. Let's open Inkscape and then we'll set up some document properties. First off is display units which shall go pixel. When scale X shall be 1 then we can change the background color a bit not to use white on white and then finally we add a grid. Let's save this file in the Sonya directory we created under dialogues slash background.svg. We are now defining the hysterical appearance of kickoff or Krunner or all widgets like that. We shall create 9 elements a center one, a bottom one, a right one, a top one, a left one plus the four corners which we'll work on later. I want this theme to have a 1 pixel solid border around it. So I will create with the path tool a 1 pixel border on the left then I will copy paste it to the bottom and to the right and to the top. As soon as we've done that we'll start working on the corners. The corners will use again the path tool to create triangles which shall be colored white and then again the path tool will use to make them rounded just like corners. This looks pretty good so we'll copy paste it into the other four corners. Now let's work on the 1 pixel line in the corner. Again path tool and again we shall round this using those little squares that appear when you click on the rhomboid. This looks good so again copy paste it onto the other four corners. Now we shall group together the elements in the sides and the elements in the corners. So we'll click on the white background and then on the black border and then right click group. So now if you try to drag them they should come off all together and not piece by piece. Then we have to give each element the right name. So the top left one will be called top left, the top one will be called top, the top right one will be called top right and so on. Now let's work on the margins. We shall create a rectangle let's make them purple so we can distinguish them and there are four of them, one for each side. We will then go and edit their ID so they will be hint top margin, hint right margin, hint bottom margin and hint left margin. Now let's work on the shadow. Let's select each element we've done and then copy paste it to the right. The side shadows will be done with the rectangle tool. We can select the field to be a gradient and then going from black to transparent, possibly transparent black. And then we can select the amount of transparency the shadow should have. When we are done we can copy paste it to the other sides as well. For the corner shadow we shall use the bathroom to draw this weird shape. When we are done with that we can again use the bathroom to make the top right element a bit rounded just like the corner. And make it purple just to recognize it a bit more easily. When it's rounded we can again go to the field type and select radius. We can play a bit with this effect to get the same shadow as we see in the sides but as a corner. We shall try to be as close as possible in color and the gradient. Quick side note, if you want your corner gradient to be perfect, click on the edit gradient button then double click on the corner of the shadow to create a new gradient node. Then go see what was the transparency value used for the linear shadow and use the same value for the gradient node you just created. See it's perfect. When we are done copy paste, copy paste, copy paste. Now let's make the margins of the shadow. The margins of the shadow should be just as big as the element of the shadow. Again four of them, one for each corner and we'll see that the idea is shadow-hint top-margin, shadow-hint left-margin, shadow-hint bottom-margin, shadow-hint right-margin. Then we have to give names to the shadow. We will have shadow-top-left, shadow-top, shadow-top right and so on. Done with the shadows we can actually remove the elements that are inside it because they're basically useless. If your theme is transparent and uses the contrast effect or the bluer effect then copy again what we've done and paste it onto the right. We will now do the mask for those effects. For the mask remove the one pixel border and then make everything black. And then you guessed it, mask top left, mask top, mask top right and so on. Finally I want my theme to be a bit transparent, so I'll take the white background that we've done before and I will change the alpha value of it a little bit. And then we can finally try out our new theme. Let's open system settings, appearance, plasma theme, let's search for Sonia and then let's apply it. And this is how it looks, a bit transparent with one pixel outline and a quite dark shadow actually. However, our journey has just begun. There are a lot more SVGs to make which I will cover in the next episodes. If you are interested in this content please subscribe so that you won't miss out when new episodes come out. So I publish devlog here of what I'm doing with plasma. That was it, bye bye.