up colors

app.R

@@ -23,12 +23,6 @@ builtin_names <- readLines("data.R") |>
   (\(z) grep("<-", x = z, value = TRUE))() |>
   (\(z) gsub(" <-.*", "", x = z))()
 
-# Colors
-primary <- "#72CDF4"
-secondary <- "#704071"
-info <- helpcol <- "#B43880"
-success <- "#B4DC55"
-
 #' Create timeseries visualization shiny
 #' Visualize timeseries data using `dplot3_xt()`
 #'
@@ -98,21 +92,11 @@ xtlive <- function(
       ),
       # Theme ----
       theme = bslib::bs_theme(
-        bg = "#fff",
-        fg = "#000",
-        primary = primary,
-        secondary = secondary,
-        success = success,
-        info = info,
-        `tooltip-bg` = "#303030",
-        `tooltip-color` = helpcol,
         `tooltip-opacity` = 1,
         `tooltip-border-radius` = "10px",
         `tooltip-padding-x` = "1rem",
         `tooltip-padding-y` = "1rem",
         `tooltip-font-size` = "1rem"
-        # base_font = bslib::font_google("Inter"), # doesn't work in shinylive
-        # code_font = bslib::font_google("Fira Code")
       ) |>
         bs_add_rules(sass::sass_file("www/rtemislive.scss")),
       # Window title ----

www/rtemislive.scss

@@ -1,12 +1,63 @@
 /* rtemislive.scss */
 
+// Define your custom colors
+// primary color
+$light-primary: #1295D8;
+$dark-primary: #1295D8;
+$light-primary-rgb: #{red($light-primary)}, #{green($light-primary)}, #{blue($light-primary)};
+$dark-primary-rgb: #{red($dark-primary)}, #{green($dark-primary)}, #{blue($dark-primary)};
+// info color
+$light-info: #E44C9A;
+$light-info-rgb: #{red($light-info)}, #{green($light-info)}, #{blue($light-info)};
+$dark-info: #FEB2E0;
+$dark-info-rgb: #{red($dark-info)}, #{green($dark-info)}, #{blue($dark-info)};
+// tooltip-bg
+$light-tooltipbg: #cdcdcd;
+$dark-tooltipbg: #333333;
+
+// Customize the theme colors
+@include color-mode(light) {
+  // primary color
+  --bs-primary: #{$light-primary};
+  --bs-primary-rgb: #{$light-primary-rgb};
+  // info color
+  --bs-info: #{$light-info};
+  --bs-info-rgb: #{$light-info-rgb};
+  // button color
+  --bs-button: #{$light-primary};
+  --bs-button-rgb: #{$light-primary-rgb};
+  // link color
+  --bs-link-color: #{$light-primary};
+  --bs-link-color-rgb: #{$light-primary-rgb};
+
+
+  --rt-tooltipbg: #{$light-tooltipbg};
+}
+
+@include color-mode(dark) {
+  // primary color
+  --bs-primary: #{$dark-primary};
+  --bs-primary-rgb: #{$dark-primary-rgb};
+  // info color
+  --bs-info: #{$dark-info};
+  --bs-info-rgb: #{$dark-info-rgb};
+  // button color
+  --bs-button: #{$dark-primary};
+  --bs-button-rgb: #{$dark-primary-rgb};
+  // link color
+  --bs-link-color: #{$dark-primary};
+  --bs-link-color-rgb: #{$dark-primary-rgb};
+
+  --rt-tooltipbg: #{$dark-tooltipbg};
+}
+
 /* rthelp */
 .rthelp {
   position: fixed !important;
   top: 33% !important;
   left: 50% !important;
   transform: translate(-50%, -50%);
-  color: $info !important;
+  color: var(--bs-info) !important;
   margin: 11px;
   border: 0.5px solid transparent;
   border-radius: 10px;
@@ -15,7 +66,7 @@
 
 .rthelp-inline {
   display: inline-block;
-  color: $info !important;
+  color: var(--bs-info) !important;
   margin: 11px;
   border: 0.5px solid transparent;
   border-radius: 10px;
@@ -23,16 +74,23 @@
   text-align: left;
 }
 
+.rthelplist {
+  color: var(--bs-info) !important;
+  background-color: var(--rt-tooltipbg) !important;
+  text-align: left;
+}
+
+
 // modify bs link color only for body links
 // card-body a {
 //   color: $primary !important;
 // }
 
-.rt-tooltip {
-  background-color: #282828aa;
-  color: orange;
-  border-radius: 10px;
-}
+// .rt-tooltip {
+//   background-color: #282828aa;
+//   color: orange;
+//   border-radius: 10px;
+// }
 
 // Border animation
 .rthelp,
@@ -47,15 +105,18 @@
 
 @keyframes highlight-border {
   0% {
-    border-color: transparent;
+    // border-color: transparent;
+    // Make border-color var(--bs-info) at 10% transparency
+    border-color: rgba(var(--bs-info-rgb), 0.10);
   }
 
   50% {
-    border-color: $info;
+    border-color: var(--bs-info);
   }
 
   100% {
-    border-color: transparent;
+    // border-color: transparent;
+    border-color: rgba(var(--bs-info-rgb), 0.10);
   }
 }
 
@@ -64,3 +125,72 @@
   margin-top: auto;
   margin-bottom: auto;
 }
+
+// Bootstrap tooltips
+// set tooltip, tooltip-inner and tooltip-arrow colors to rt-tooltipbg
+.tooltip {
+  --bs-tooltip-bg: var(--rt-tooltipbg);
+  --bs-tooltip-arrow-color: var(--rt-tooltipbg);
+  border-radius: 10px;
+}
+
+.tooltip-inner {
+  background-color: var(--rt-tooltipbg);
+  color: var(--bs-info) !important;
+}
+
+// Remove underscore from all links
+a {
+  text-decoration: none;
+}
+
+// Define a SCSS variable that uses the CSS custom property
+$primary-color: var(--bs-primary);
+
+// Customize Bootstrap buttons
+.btn-primary {
+  background-color: $primary-color;
+  border-color: $primary-color;
+
+  // &:hover,
+  // &:focus,
+  // &:active {
+  //   background-color: rgba($primary-color, 0.8);
+  //   border-color: rgba($primary-color, 0.8);
+  // }
+}
+
+.btn-outline-primary {
+  color: $primary-color;
+  border-color: $primary-color;
+
+  // &:hover,
+  // &:focus,
+  // &:active {
+  //   background-color: $primary-color;
+  //   border-color: $primary-color;
+  // }
+}
+
+// Customize radio buttons
+.form-check-input {
+  &:checked {
+    background-color: $primary-color;
+    border-color: $primary-color;
+  }
+
+  // &:focus {
+  //   border-color: $primary-color;
+  //   box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25);
+  // }
+}
+
+// Radio buttons
+.form-check-input:checked,
+.shiny-input-container .checkbox input:checked,
+.shiny-input-container .checkbox-inline input:checked,
+.shiny-input-container .radio input:checked,
+.shiny-input-container .radio-inline input:checked {
+  background-color: $primary-color;
+  border-color: $primary-color;
+}