Lissy93 · jordolang · Feb 17, 2025
@@ -1,43 +1,58 @@
----
-# Welcome to Dashy! To get started, run `docker compose up -d`
-# You can configure your container here, by modifying this file
-version: "3.8"
-services:
-  dashy:
-    container_name: Dashy
-
-    # Pull latest image from DockerHub
-    image: lissy93/dashy
-
-    # To build from source, replace 'image: lissy93/dashy' with 'build: .'
-    # build: .
-
-    # You can also use an image with a different tag, or pull from a different registry, e.g:
-    # image: ghcr.io/lissy93/dashy or image: lissy93/dashy:3.0.0
-
-    # Pass in your config file below, by specifying the path on your host machine
-    # volumes:
-      # - /path/to/my-config.yml:/app/user-data/conf.yml
-      # - /path/to/item-icons:/app/user-data/item-icons/
-
-    # Set port that web service will be served on. Keep container port as 8080
-    ports:
-      - 4000:8080
-
-    # Set any environmental variables
-    environment:
-      - NODE_ENV=production
-    # Specify your user ID and group ID. You can find this by running `id -u` and `id -g`
-    #  - UID=1000
-    #  - GID=1000
-
-    # Specify restart policy
-    restart: unless-stopped
-
-    # Configure healthchecks
-    healthcheck:
-      test: ['CMD', 'node', '/app/services/healthcheck']
-      interval: 1m30s
-      timeout: 10s
-      retries: 3
-      start_period: 40s
+---
+# Welcome to Dashy! To get started, run `docker compose up -d`
+# You can configure your container here, by modifying this file
+version: "3.8"
+services:
+  dashy:
+    container_name: Dashy
+
+    # Pull latest image from DockerHub
+    image: lissy93/dashy
+
+    # To build from source, replace 'image: lissy93/dashy' with 'build: .'
+    # build: .
+
+    # You can also use an image with a different tag, or pull from a different registry, e.g:
+    # image: ghcr.io/lissy93/dashy or image: lissy93/dashy:3.0.0
+
+    # Pass in your config file below, by specifying the path on your host machine
+    volumes:
+      - /path/to/my-config.yml:/app/user-data/conf.yml
+      - /path/to/item-icons:/app/user-data/item-icons/
+      - ./src/styles/user-defined-themes.scss:/app/src/styles/user-defined-themes.scss
+
+    # Set port that web service will be served on. Keep container port as 8080
+    ports:
+      - 4000:8080
+
+    # Set any environmental variables
+    environment:
+      - NODE_ENV=production
+    # Specify your user ID and group ID. You can find this by running `id -u` and `id -g`
+    #  - UID=1000
+    #  - GID=1000
+
+    # Specify restart policy
+    restart: unless-stopped
+
+    # Configure healthchecks
+    healthcheck:
+      test: ['CMD', 'node', '/app/services/healthcheck']
+      interval: 1m30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  grafana:
+    image: grafana/grafana
+    container_name: grafana
+    ports:
+      - "3000:3000"
+    volumes:
+      - grafana-storage:/var/lib/grafana
+    environment:
+      - GF_SECURITY_ADMIN_PASSWORD=admin
+    restart: unless-stopped
+
+volumes:
+  grafana-storage:
@@ -1,4 +1,3 @@
-
 html[data-theme='callisto'] {
   --primary: #00CCB4;
   --background: #141b33;
@@ -886,7 +885,7 @@ html[data-theme='material-dark'] {
     margin: 0.25rem 0;
     padding: 0.5rem;
   }
-  .minimal-widget-wrap .widget-base { box-shadow:  none; }
+  .minimal-widget-wrap .widget-base { box-shadow:  none; border: none; }
 }
 
 html[data-theme='minimal-light'] {
@@ -2113,3 +2112,47 @@ html[data-theme="tama"] {
     transform: scale(1.22);  
   }
 }
+
+html[data-theme="newone"] {
+  // Main colors
+  --primary: #87c2d9;
+  --background: #03586e;
+  --background-darker: #05070e35;
+  // Typography
+  --font-headings: 'Roboto', serif;
+  --font-body: 'Roboto', serif;
+  // Items
+  --item-background: #181c3a80;
+  --item-background-hover: #181c3a99;
+  --item-shadow: 1px 1px 2px #130f23;
+  --item-hover-shadow: 2px 2px 4px #130f23;
+  // Sections
+  --item-group-heading-text-color: var(--white);
+  --item-group-heading-text-color-hover: var(--primary);
+  --item-group-shadow: none;
+  --item-group-background: none;
+  --item-group-outer-background: none;
+  // Background Image
+  body {
+    background: url('https://dashy.rpi-lite.lan/item-icons/icons/background.jpg');
+    background-size: cover;
+  }
+  // Remove background from certain components
+  div.home, div.options-outer, div.options-container, section.filter-container,
+  section.settings-outer, div.show-hide-container.hide-btn, div.show-hide-container.show-btn  {
+    background: none;
+  }
+  // Style overides
+  label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
+  .content-inner { border-top: 1px dashed var(--primary); }
+  a.item.size-large:hover { border-left: 3px solid var(--white); }
+  .item.size-large .tile-title p.description { height: 3rem; }
+  .is-collapsed {
+    background: var(--item-background);
+    box-shadow: var(--item-shadow);
+    &:hover {
+      background: var(--item-background-hover);
+      box-shadow: var(--item-hover-shadow);
+    }
+  }
+}
@@ -1,12 +1,50 @@
-// Put your custom themes here.
-// Don't forget to also put your theme name into the config
-// E.g: appConfig: cssThemes: [ 'my-theme' ]
-
-// Example theme:
-// html[data-theme='my-theme'] {
-//   --primary: #00CCB4;
-//   --background: #141b33;
-//   --background-darker: #060913;
-// }
-
-// For more info, see: https://github.com/Lissy93/dashy/blob/master/docs/theming.md
+/* Custom theme for Raspberry PI docker dashboard */
+html[data-theme="newone"] {
+  /* Main colors */
+  --primary: #87c2d9;
+  --background: #03586e;
+  --background-darker: #05070e35;
+
+  /* Typography */
+  --font-headings: 'Roboto', serif;
+  --font-body: 'Roboto', serif;
+
+  /* Items */
+  --item-background: #181c3a80;
+  --item-background-hover: #181c3a99;
+  --item-shadow: 1px 1px 2px #130f23;
+  --item-hover-shadow: 2px 2px 4px #130f23;
+
+  /* Sections */
+  --item-group-heading-text-color: var(--white);
+  --item-group-heading-text-color-hover: var(--primary);
+  --item-group-shadow: none;
+  --item-group-background: none;
+  --item-group-outer-background: none;
+
+  /* Background Image */
+  body {
+    background: url('https://dashy.rpi-lite.lan/item-icons/icons/background.jpg');
+    background-size: cover;
+  }
+
+  /* Remove background from certain components */
+  div.home, div.options-outer, div.options-container, section.filter-container,
+  section.settings-outer, div.show-hide-container.hide-btn, div.show-hide-container.show-btn {
+    background: none;
+  }
+
+  /* Style overrides */
+  label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
+  .content-inner { border-top: 1px dashed var(--primary); }
+  a.item.size-large:hover { border-left: 3px solid var(--white); }
+  .item.size-large .tile-title p.description { height: 3rem; }
+  .is-collapsed {
+    background: var(--item-background);
+    box-shadow: var(--item-shadow);
+    &:hover {
+      background: var(--item-background-hover);
+      box-shadow: var(--item-hover-shadow);
+    }
+  }
+}
@@ -11,7 +11,7 @@ pageInfo:
 
 # Optional app settings and configuration
 appConfig:
-  theme: colorful
+  theme: newone
 
 # Main content - An array of sections, each containing an array of items
 sections:
@@ -44,4 +44,21 @@ sections:
     description: Get help with Dashy, raise a bug, or get in contact
     url: https://github.com/Lissy93/dashy/blob/master/.github/SUPPORT.md
     icon: far fa-hands-helping
-
+
+- name: Grafana dashboard 3 hours
+  icon: hl-grafana
+  widgets:
+  - type: iframe
+    useProxy: false
+    timeout: 8000
+    options:
+      url: >-
+        https://grafana.rpi-lite.lan/d/Ss3q6hSZk001/docker-and-os-metrics-for-raspberry-pi-16-april2022?orgId=1&refresh=30s&kiosk
+      frameHeight: 400
+    id: 0_2332_iframe
+  displayData:
+    sortBy: default
+    rows: 1
+    cols: 4
+    collapsed: false
+    hideForGuests: false