Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/blog/dark-mode-for-a-dashboard.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ In this article, we’ll explore the dark mode implementation in ThingsBoard usi

Currently, the TB platform does not offer a built-in dark mode by default (though this may change in the future!). However, you can enhance the look of your dashboard by customizing it with a dark mode theme.

To see an example in action, check out our “[Smart Energy](/use-cases/smart-energy/)” use case on the website. Simply click the “Try Demo” button to explore [the dashboard](https://demo.thingsboard.io/dashboard/e8e409c0-f2b5-11e6-a6ee-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0). In the top-right corner, the “sun” icon can be found, which allows to toggle between light and dark modes effortlessly.
To see an example in action, check out our “[Smart Energy](/use-cases/smart-energy/)” use case on the website. Simply click the “Try Demo” button to explore [the dashboard](https://thingsboard.cloud/dashboard/d6a89f80-cc6e-11f1-8752-fd5e7804cfb4?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14). In the top-right corner, the “sun” icon can be found, which allows to toggle between light and dark modes effortlessly.

<video
autoPlay
Expand Down Expand Up @@ -238,7 +238,7 @@ The power of this method is in its flexibility. You can customize the color sche

### Try it on your instance:

1. **Download JSON**: Download the JSON file from [the Demo dashboard](https://demo.thingsboard.io/dashboard/e8e409c0-f2b5-11e6-a6ee-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0).
1. **Download JSON**: Download the JSON file from [the Demo dashboard](https://thingsboard.cloud/dashboard/d6a89f80-cc6e-11f1-8752-fd5e7804cfb4?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14).

![Custom dark mode colors applied to ThingsBoard widgets](/images/blog/dark-mode-for-a-dashboard/img-4.webp)

Expand Down
4 changes: 2 additions & 2 deletions src/data/use-cases/smart-energy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const data: UseCaseData = {
'The ThingsBoard platform provides a powerful technology stack for building such systems. It supports data collection from various types of devices and protocols (MQTT, CoAP, HTTP, etc.), dashboard visualizations, and advanced automation through its rule engine and alerting system. This enables real-time energy monitoring and rapid response to anomalies, reducing costs and improving operational efficiency.',
],
demoUrl:
'https://demo.thingsboard.io/dashboard/e8e409c0-f2b5-11e6-a6ee-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0',
'https://thingsboard.cloud/dashboard/d6a89f80-cc6e-11f1-8752-fd5e7804cfb4?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
demoButtonId: 'UseCases_SmartEnergy_ViewLiveDemo',
},
overview: {
Expand Down Expand Up @@ -135,7 +135,7 @@ export const data: UseCaseData = {
},
],
demoUrl:
'https://demo.thingsboard.io/dashboard/e8e409c0-f2b5-11e6-a6ee-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0',
'https://thingsboard.cloud/dashboard/d6a89f80-cc6e-11f1-8752-fd5e7804cfb4?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
demoButtonId: 'UseCases_SmartEnergy_ViewLiveDemo',
contactUsId: 'UseCases_SmartEnergy_ContactUs',
},
Expand Down
4 changes: 2 additions & 2 deletions src/data/use-cases/smart-farming.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const data: UseCaseData = {
'By leveraging ThingsBoard, agribusinesses gain full control over assets and infrastructure — from temperature and humidity sensors to automated aeration systems. With real-time dashboards, rule-based alerts, and remote control features, the platform helps reduce waste, improve crop quality, and lower operational costs.',
],
demoUrl:
'https://demo.thingsboard.io/dashboard/1f9828d0-058e-11e7-87f7-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0',
'https://thingsboard.cloud/dashboard/c77eed60-cc6a-11f1-adf1-29dbfc808686?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
demoButtonId: 'UseCases_SmartFarming_ViewLiveDemo',
},
overview: {
Expand Down Expand Up @@ -88,7 +88,7 @@ export const data: UseCaseData = {
},
],
demoUrl:
'https://demo.thingsboard.io/dashboard/1f9828d0-058e-11e7-87f7-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0',
'https://thingsboard.cloud/dashboard/c77eed60-cc6a-11f1-adf1-29dbfc808686?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
demoButtonId: 'UseCases_SmartFarming_ViewLiveDemo',
contactUsId: 'UseCases_SmartFarming_ContactUs',
},
Expand Down
4 changes: 2 additions & 2 deletions src/data/use-cases/smart-metering.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const data: UseCaseData = {
'This use case showcases how ThingsBoard empowers organizations to build robust, end-to-end smart metering solutions. By combining protocol versatility, intuitive dashboards, and powerful rule engines, ThingsBoard makes it easy to monitor energy and water usage across residential, commercial, and municipal environments—enhancing sustainability and operational control.',
],
demoUrl:
'https://demo.thingsboard.io/dashboard/3a1026e0-83f6-11e7-b56d-c7f326cba909?publicId=322a2330-7c36-11e7-835d-c7f326cba909',
'https://thingsboard.cloud/dashboard/4a4f5380-cc87-11f1-adf1-29dbfc808686?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
demoButtonId: 'UseCases_SmartMetering_ViewLiveDemo',
},
overview: {
Expand Down Expand Up @@ -123,7 +123,7 @@ export const data: UseCaseData = {
},
],
demoUrl:
'https://demo.thingsboard.io/dashboard/3a1026e0-83f6-11e7-b56d-c7f326cba909?publicId=322a2330-7c36-11e7-835d-c7f326cba909',
'https://thingsboard.cloud/dashboard/4a4f5380-cc87-11f1-adf1-29dbfc808686?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
demoButtonId: 'UseCases_SmartMetering_ViewLiveDemo',
contactUsId: 'UseCases_SmartMetering_ContactUs',
},
Expand Down
8 changes: 4 additions & 4 deletions src/pages/services/development-services/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ const clientData = [
name: 'Jeppe Walther, CTO at Supertech Agroline',
nameNoMargin: false,
demoLink:
'https://demo.thingsboard.io/dashboard/e8e409c0-f2b5-11e6-a6ee-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0',
'https://thingsboard.cloud/dashboard/d6a89f80-cc6e-11f1-8752-fd5e7804cfb4?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
},
{
hasImage: true,
Expand Down Expand Up @@ -246,7 +246,7 @@ const clientData = [
name: 'Patricia Crispim, Super Bock Group',
nameNoMargin: false,
demoLink:
'https://demo.thingsboard.io/dashboard/3a1026e0-83f6-11e7-b56d-c7f326cba909?publicId=322a2330-7c36-11e7-835d-c7f326cba909',
'https://thingsboard.cloud/dashboard/4a4f5380-cc87-11f1-adf1-29dbfc808686?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
},
{
hasImage: true,
Expand Down Expand Up @@ -401,7 +401,7 @@ function clientInfoHtml(c: (typeof clientData)[number]) {
imageWidth: 1376,
imageHeight: 694,
demoLink:
'https://demo.thingsboard.io/dashboard/e8e409c0-f2b5-11e6-a6ee-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0',
'https://thingsboard.cloud/dashboard/d6a89f80-cc6e-11f1-8752-fd5e7804cfb4?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
tags: ['Manufacturing', 'Retail', 'Utilities', 'Industry'],
projects: '48+',
text: 'Energy monitoring system provides clarity on your real-time energy usage, enabling smart energy management by highlighting hidden inefficiencies and anomalies. Tailored dashboards, alerts, and analytics help businesses reduce costs, improve transparency, and meet energy efficiency goals — from industrial operations to commercial buildings.',
Expand Down Expand Up @@ -434,7 +434,7 @@ function clientInfoHtml(c: (typeof clientData)[number]) {
imageWidth: 1376,
imageHeight: 748,
demoLink:
'https://demo.thingsboard.io/dashboard/3a1026e0-83f6-11e7-b56d-c7f326cba909?publicId=322a2330-7c36-11e7-835d-c7f326cba909',
'https://thingsboard.cloud/dashboard/4a4f5380-cc87-11f1-adf1-29dbfc808686?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14',
tags: ['Manufacturing', 'Real Estate', 'Utilities', 'Smart Cities', 'Energy'],
projects: '33+',
text: 'Smart metering transforms utility management by automating the collection of electricity, water, and gas consumption data, converting it into actionable, real-time insights. It automates invoicing workflows and delivers precise usage metrics for transparent, reliable billing. With anomaly detection for leaks or unusual usage patterns, facility managers can effectively minimize losses and significantly enhance sustainability efforts.',
Expand Down
4 changes: 2 additions & 2 deletions src/pages/smart-farming-demo/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import ContactModal from '@components/ContactModal.astro';
<h1 class="title">Agriculture & Farm management Software</h1>
<h3 class="sub-title">Smart Farming and Agriculture software solution designed to manage a farm or livestock business. Organize, integrate, monitor and improve all aspects of your farm on one platform.</h3>
<div class="info-block">
<a class="filled-button print:hidden" target="_blank" href="https://demo.thingsboard.io/dashboard/1f9828d0-058e-11e7-87f7-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0" rel="noopener noreferrer">Live demo</a>
<a class="filled-button print:hidden" target="_blank" href="https://thingsboard.cloud/dashboard/c77eed60-cc6a-11f1-adf1-29dbfc808686?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14" rel="noopener noreferrer">Live demo</a>
<input class="outline-button print:hidden" type="button" value="Contact us" data-contact-modal-open />
</div>
</div>
Expand Down Expand Up @@ -139,7 +139,7 @@ import ContactModal from '@components/ContactModal.astro';
</div>
<img class="print-panel-image print:only" src="/images/usecases/smart-farming/alert-management.webp" alt="Alert management dashboard" loading="lazy" />
</div>
<a target="_blank" class="try-demo-button print:hidden" href="https://demo.thingsboard.io/dashboard/1f9828d0-058e-11e7-87f7-bb0136cc33d0?publicId=963ab470-34c9-11e7-a7ce-bb0136cc33d0" rel="noopener noreferrer">View live demo</a>
<a target="_blank" class="try-demo-button print:hidden" href="https://thingsboard.cloud/dashboard/c77eed60-cc6a-11f1-adf1-29dbfc808686?publicId=7aa99e80-8acd-11ef-a59e-a9c993dbec14" rel="noopener noreferrer">View live demo</a>
</div>
<div class="images print:hidden"></div>
</div>
Expand Down
Loading