some more theme specific changes

vickeykumar · Jun 20, 2024 · 859347f · 859347f
1 parent c62a267
commit 859347f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/src/resources/css/scribbler-global.css b/src/resources/css/scribbler-global.css
@@ -496,4 +496,13 @@ input[type=text],[type=email], select, textarea, email {
 
 .opaq:hover {
   opacity: 1;
-}
+}
+
+/* theme specific class */
+.accent-background {
+  background: var(--accent-color);
+}
+.rev-accent-background {
+  background: var(--rev-accent-color);
+}
+/* them classes ends */
diff --git a/src/resources/index.html b/src/resources/index.html
@@ -671,7 +671,12 @@ <h3 class="section__title">Share/Collaborate</h3>
     <!-- chatgpt Section start -->
     <script src="./js/chat-widget.js" defer></script>
     <script>
-      window.addEventListener("load", () => {
+      $(document).ready(function() {
+        $('#select-theme').on('change', function() {
+            processtheme();
+        });
+        processtheme();
+        /* chatwidget */
         window.ChatWidget.config.widgetTitle = "Ask GPT";
         window.ChatWidget.config.greetingMessage =
           "Hello there! Welcome to openrepl.com.\nAn opensource platform to write and run your code snippets in REPL.";

diff --git a/src/resources/js/scribbler.js b/src/resources/js/scribbler.js
@@ -170,6 +170,20 @@ function ToggleFunction() {
 
 var einst = null;
 var direction = null;
+// process dark and bright theme
+const processtheme = () => {
+  var selectedOption = $('#select-theme').find(':selected');
+  var themedetected = selectedOption.closest('optgroup').attr('label');
+
+  if (themedetected === 'Bright') {
+      console.log('Bright theme selected.');
+      // want to add dark background for buttons for tooltip only if direction is vertical 
+      if (direction==='vertical') $('.fullscreen-toggle').addClass('rev-accent-background');
+  } else if (themedetected === 'Dark') {
+      console.log('Dark theme selected.');
+      $('.fullscreen-toggle').removeClass('rev-accent-background');
+  }
+};
 
 // updates editor content by ID
 function updateEditorContent(cmd="", content="/* Welcome to openrepl! */", forceupdate=false) {
@@ -245,7 +259,7 @@ function SaveSelectedNodeToFile(oldSelectedNodeId, errcallback=null) {
     }
 }
 
-function ToggleEditor(direction=null) {
+function ToggleEditor() {
     if (direction===null) {
       // first time
       if (ismob()) {
@@ -324,7 +338,7 @@ function ToggleRotateEditor() {
   }
   einst.destroy();
   einst = null; // destroy and reset splitter
-  ToggleEditor(direction);
+  ToggleEditor();
 }
 
 function ToggleReconnect() {