Dark Theme Tutorial for Power BI
Вставка
- Опубліковано 6 жов 2024
- Here’s how to create a dark mode / dark theme for Power BI with translucent side navigation. We’re using Figma to create the background, but that’s not a requirement - just an option!
Related videos:
INTRO to using Figma with Power BI:
• Figma Basics Tutorial ...
DIY Report background for Power BI with Shapes & Glassmorphism:
• Create a "Glass Effect...
The Figma part of this tutorial is courtesy of Vijay Verma, whose tutorial I followed to create this (tutorial-ception going on in here!). He has some crazy cool stuff, here’s the specific one I’m using in the video - it’s the page 9 sidebar inside the file: www.figma.com/...
The specific photo we used can be found here, thanks Jay:
unsplash.com/p...
0:28 Create the theme
4:28 Visual settings
7:33 Figma
8:30 Where to get photos
11:40 Vijay Verma’s Figma tutorial attribution
19:00 Export/import the background
20:50 Page navigator/menu
Sidenote, if you have visually-impaired users, you will want to use button text on the Power BI side vs in Figma so that screen readers can read it. :)
Thank you for the content! I’ve recently started watching your videos and I absolutely love the way you explain things. Your explanations are very simple and straightforward.
@@MohamedRedaAbada-tg1jw Thank you for your kind words! 😄
Nice ❤
Awesome christine
Ahhhh I love it.
I know the button was set in figma as part of the background, but you can do it with native buttons! I'll make a video on that sometime, but this one was a really nice cleanvideo. Good job!
Can you get a gradient on the native buttons?
@@bi-ome yes exactly! 😁
Hi Christine,
How to integrate SharePoint online list with Power BI and setup automatic refresh of the report as the data is updated daily?
I am currently given a downloaded Excel file of the SharePoint data and building a report. Once the report is developed, I would have to replace the data source with SharePoint and set up the refresh.
P.S. I am new to SharePoint and this is the first time I will be working with its integration. So, I would like to learn about all the stuff related to it, to be ready if any other situation arises.
You can schedule refresh on Excel sources if you upload them to SharePoint and reference them from there - I have a video on how to do that here: ua-cam.com/video/ba1Akv63GDQ/v-deo.html
SharePoint lists are great as a source too, but you would need to completely rebuild your queries to switch to it from what you're using now because the data structure is very different.
Thanks for the video and nice design!
You have created the darker boxes directly on the background image instead of creating them on Power BI.
Why is that? How do you deal with responsiveness in this case?
When you have Power BI set to “scale to fit” on the width and/or height, it scales the entire thing including visuals down, so it’s not really an issue. You could do it in Power BI, too, but since we are already making a background I just put it in there. When you’re working with the more shapey layouts, it’s a lotttt easier to align things and get equal spacing in Figma than in PBI. But you can do it on the other side too. I will say that this does not work for the mobile views, but then you usually have to start from scratch on those anyway.
Will you please made detailed video of designing the report using figma .
Is there a particular part that didn't have enough detail? I went through the full process for the Figma end of it in the video unless I'm missing something. 😅
The visuals are just standard line chart, stacked bar chart, and the "new" card visual - nothing fancy.
Very Nice
Thanks!
To anyone having issues finding the "apply" button in the theme editor, there's apparently a bug right now where it's missing (thought I was losing my mind just now!):
community.fabric.microsoft.com/t5/Issues/Apply-and-close-is-not-visible-in-Customize-current-them/idi-p/3795970#M103516
... it'll probably be fixed soon. 🥲
i do export but it doesn't export the actual background, its not blured when i export it
It sounds like you don't have the frame selected when exporting. If you select the frame, it exports all the items in the frame as a flat image--