custom light and dark colors

app.R

@@ -4,7 +4,7 @@
 
 # shiny::runApp("./")
 # Setup
-rtemisseq_version <- "0.2.7"
+rtemisseq_version <- "0.2.8"
 library(rtemis)
 library(rtemisbio)
 library(shiny)
@@ -33,8 +33,8 @@ success <- "#B4DC55"
 #' @export
 #' @return A shiny app that can be converted to a shinylive app
 
-seqvizlive <- function(
-    default_theme = "dark",
+rtemisseq <- function(
+    default_theme = "light",
     protein_plotly_height = "900px",
     jsonedit_height = "900px",
     verbosity = 0) {
@@ -91,12 +91,12 @@ seqvizlive <- function(
       theme = bslib::bs_theme(
         bg = "#fff",
         fg = "#000",
-        primary = primary,
+        # primary = primary,
         secondary = "#704071",
         success = success,
-        info = info,
-        `tooltip-bg` = "#303030",
-        `tooltip-color` = helpcol,
+        # info = info,
+        # `tooltip-bg` = "#303030",
+        # `tooltip-color` = helpcol,
         `tooltip-opacity` = 1,
         `tooltip-border-radius` = "10px",
         `tooltip-padding-x` = "1rem",
@@ -419,19 +419,16 @@ seqvizlive <- function(
           style = "text-align: right;",
           class = "rtanihi"
         ),
-        div(
-          rhelplist(
-            c(
-              "Select Data Source (built-in or upload)",
-              "Click 'Plot dataset' to render the plot - repeat after changing datasets.",
-              "Hover over plot to see annotations.",
-              "Click on legend items to toggle visibility of annotations.",
-              "Double-click on legend items to isolate a single annotation type.",
-              "Click on top-right gear icon to change plot settings."
-            )
-          ),
-          style = "text-align: left;"
-        ), # /div rt-tooltip
+        rthelplist(
+          c(
+            "Select Data Source (built-in or upload)",
+            "Click 'Plot dataset' to render the plot - repeat after changing datasets.",
+            "Hover over plot to see annotations.",
+            "Click on legend items to toggle visibility of annotations.",
+            "Double-click on legend items to isolate a single annotation type.",
+            "Click on top-right gear icon to change plot settings."
+          )
+        ),
         placement = "bottom"
       ) # /tooltip
     }) # /ui_a3_tooltip
@@ -518,6 +515,6 @@ seqvizlive <- function(
 
   # Shiny app ----
   shiny::shinyApp(ui = ui, server = server, enableBookmarking = "url")
-} # seqvizlive
+} # rtemisseq
 
-seqvizlive()
+rtemisseq()

globals.R

@@ -1,5 +1,5 @@
 # globals.R
-# seqvizlive
+# ::rtemisseq::
 # EDG rtemis.org
 
 # Themes ----
@@ -56,12 +56,26 @@ rthelp_inline <- function(..., title = NULL, class = "rthelp-inline") {
   rthelp(..., title = title, class = class)
 } # rtemislive::rthelp_inline
 
+#' Create bulleted list
+#' 
+#' @return div
+rthelplist <- function(x, bullet = bsicons::bs_icon("arrow-right-short"), class = "rthelplist") {
+  div(
+    htmltools::HTML(
+      paste0(
+        bullet, "<i>", x, "</i>", "<br>"
+      )
+    ),
+    class = class
+  )
+} # rtemisseq::rthelplist
+
 bold <- function(x) {
   paste0("<b>", x, "</b>")
 }
 
 hilite <- function(x) {
-  paste0("<span style='color: #72CDF4;font-weight: bold;'>", x, "</span>")
+  paste0("<span style='color: var(--bs-primary);font-weight: bold;'>", x, "</span>")
 }
 
 nannot <- function(n) {
@@ -95,13 +109,4 @@ summarize_a3 <- function(x) {
       if (!is.null(x$Reference)) a("Reference", href = x$Reference, target = "_blank")
     )
   )
-} # seqvizlive::summarize_a3
-
-# Create list using custom bullet
-rhelplist <- function(x, bullet = bsicons::bs_icon("arrow-right-short")) {
-  htmltools::HTML(
-    paste0(
-      bullet, "<i>", x, "</i>", "<br>"
-    )
-  )
-} # seqvizlive::rtlist
+} # rtemisseq::summarize_a3

www/rtemislive.scss

@@ -1,12 +1,46 @@
 /* rtemislive.scss */
 
+// Define your custom colors
+// primary color
+$light-primary: #1295D8;
+$dark-primary: #72CDF4;
+// info color
+$light-info: #E44C9A; // Default Bootstrap info color
+$dark-info: #FEB2E0; // Darker shade for better contrast in dark mode
+// 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: #{red($light-primary)}, #{green($light-primary)}, #{blue($light-primary)};
+  // info color
+  --bs-info: #{$light-info};
+  --bs-info-rgb: #{red($light-info)}, #{green($light-info)}, #{blue($light-info)};
+
+  --rt-tooltipbg: #{$light-tooltipbg};
+}
+
+@include color-mode(dark) {
+  // primary color
+  --bs-primary: #{$dark-primary};
+  --bs-primary-rgb: #{red($dark-primary)}, #{green($dark-primary)}, #{blue($dark-primary)};
+  // info color
+  --bs-info: #{$dark-info};
+  --bs-info-rgb: #{red($dark-info)}, #{green($dark-info)}, #{blue($dark-info)};
+
+  --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 +49,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,6 +57,13 @@
   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;
@@ -47,15 +88,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 +108,21 @@
   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;
+}