TABLE OF CONTENTS
The science is out, and it’s been proven that blue light, late at night, can keep us awake longer. We here at DAKboard care about your rest and well-being, so we’re excited to show you how to add a blue light filter to your DAKboard screens at night, so you can wake up well-rested and ready for the new day. Read on to learn how!
Enable Night Shift:
Start by adding a Shape block to your custom screen. See our article How to use the Shapes Block to learn how to do this. Resize it to fill the whole screen, and make sure it’s the top layer:
Edit the block, and set the background color to an orang-ish yellow with a low opacity. We find that the color of rgba(255, 192, 0, 0.08) works well for our taste:
Save your changes and preview your screen to see the blue light filter in action!
Before:
And after, with the shape (blue light filter) block:
Lastly, edit the shape block again and set a schedule under the “Schedule” tab above so the block is only visible at night from 7 PM to 7 AM (or whatever time you like) and save your changes. For more details on the Content Scheduler, see our article Content Scheduling.
You can also achieve other effects with different colors, shapes, and opacities. For example, if you use Black and set the opacity lower, you can use it to dim the screen or even hide the screen entirely.
Touchscreen Modification:
With DAKOS now supporting Touchscreens and customers utilizing this option, this layer will block your screen's content when it is on, preventing touch functions. See our article Block Layers and How to Use Them for more details on this. However, with your Paid Subscription, you can use Custom CSS to make this block function with your Touchscreen even when it is on. The CSS code for this is below:
.block-shape {pointer-events: none;}This code disables the Shape block's touch functions, allowing you access to the layers behind it. To add this to your Custom Screen, click the Styles dropdown in the upper left corner of the Live Editor, and click the Add Custom CSS Rule button. See below:
Once clicked, copy the code above, and put it in the space provided:
Click SAVE to apply this code to your Screen, then use the Refresh Displays button, to the right of the Add A Block button, to push the change to your Display. With this code in place, you can continue to interact with the blocks behind your filter.
This code will affect all shape blocks on your Screen. To target a specific block, you can name it in the Formatting tab, then target the block using the name by changing the code as follows:
.block--BlockName {ponter-events: none;}The .block -- denotes that the following is the name you supplied to the block, where the BlockName will be the name you created. For more information on Custom Styles and how to use Custom CSS, see our article Applying Custom Styles to Screens.
Helpful Articles:
Having trouble? See if these articles help.
How to Use the Custom Screen Live Editor
Advanced Features of the Custom Screen Editor