feature: Light mode (#401)

* updated docs with higher res screenshots and to fix typos/errors in code * minor docs updates and saving/reading as python file * made slight change to handle multine cell definitions in parser * excluding notebook.py from reload in dev cli * notebook saves as a bunch of python functions * playing around with light theme * added zt_backend from master * light mode is roughly working... need to diff with main and refactor * removed custom theming for radio and text area * changes to support light mode * chore(miantain-ui): Solve UI bugs in the theme changing for notebook (#403) chore(miantain-ui): Solve UI bugs in the theme changing for notebook * fix(light-theme-ui): Fixed issues with light theme UI (#404) * chore(miantain-ui): Solve UI bugs in the theme changing for notebook * fix(light-theme-ui): Fixed issues with light theme UI --------- Co-authored-by: Red-Giuliano <44534590+Red-Giuliano@users.noreply.github.com> * restored yarn.lock * added types to fix build error * Delete zt_backend/utils/nb_python.py * removing conditional cell header render * fix: Bump test dependencies --------- Co-authored-by: Red Giuliano <red.giuliano@zero-true.com> Co-authored-by: Priya Kanabar <119392691+priyakanabar-crest@users.noreply.github.com> Co-authored-by: Carson-Shaar <carson.shaar@zero-true.com>
Zero-True · Jan 14, 2025 · da43997 · da43997
1 parent c3a7fe5
commit da43997
Show file tree

Hide file tree

Showing 21 changed files with 1,114 additions and 833 deletions.
diff --git a/setup.cfg b/setup.cfg
@@ -30,8 +30,8 @@ python_requires = >=3.9
 
 [options.extras_require]
 test =
-    pytest==8.3.3
-    selenium==4.24.0
+    pytest==8.3.4
+    selenium==4.27.1
     pandas<=2.2.3
 
 components =

diff --git a/zt_dev_cli/cli.py b/zt_dev_cli/cli.py
@@ -72,6 +72,7 @@ def app(
         "zt_backend.main:app",
         "--ws-max-size=209715200",
         "--reload",
+        "--reload-exclude ./notebook*.py",
         f"--log-config={log_path}",
     ]
     if os.name == "nt":
@@ -102,6 +103,7 @@ def notebook(
         "zt_backend.main:app",
         "--ws-max-size=209715200",
         "--reload",
+        "--reload-exclude=./notebook*.py",
         f"--log-config={log_path}",
     ]
     if os.name == "nt":

diff --git a/zt_frontend/src/App.vue b/zt_frontend/src/App.vue
@@ -56,17 +56,18 @@
             to="/"
             id="notebookBtn"
           >
-            Notebook</v-btn
-          >
+            Notebook
+          </v-btn>
           <v-btn
             :color="isAppRoute ? 'primary' : 'bluegrey-darken-1'"
             :variant="isAppRoute ? 'flat' : 'text'"
             :class="{ 'text-bluegrey-darken-4': isAppRoute }"
             :prepend-icon="`ztIcon:${ztAliases.monitor}`"
             to="/app"
             id="appBtn"
-            >App</v-btn
           >
+            App
+          </v-btn>
         </v-btn-toggle>
       </div>
 
@@ -76,18 +77,19 @@
             <!-- <v-btn :icon="`ztIcon:${ztAliases.undo}`"></v-btn>
             <v-btn :icon="`ztIcon:${ztAliases.redo}`"></v-btn>
             <v-btn :icon="`ztIcon:${ztAliases.message}`"></v-btn> -->
-            <v-tooltip text="Run All" location="bottom" color="primary">
+            <v-tooltip text="Run All" location="bottom" content-class="theme-tooltip">
               <template v-slot:activator="{ props }">
-                <v-btn
-                  v-if="$devMode && !isAppRoute"
-                  :icon="`ztIcon:${ztAliases.play}`"
-                  v-bind="props"
-                  variant="flat"
-                  ripple
-                  color="bluegrey-darken-4"
-                  @click="runCode('')"
-                >
-                </v-btn>
+            <v-btn
+              v-if="$devMode && !isAppRoute"
+              icon
+              v-bind="props"
+              variant="flat"
+              ripple
+              color="bluegrey-darken-4"
+              @click="runCode('')"
+            >
+              <v-icon :icon="`ztIcon:${ztAliases.play}`" color="bluegrey-darken-1"></v-icon>
+            </v-btn>
               </template>
             </v-tooltip>
             <v-menu
@@ -129,6 +131,20 @@
           </div>
         </v-col>
       </template>
+      <!-- Spacer to push the toggle to the right -->
+      <v-spacer></v-spacer>
+
+      <!-- Right-aligned theme toggle with icon -->
+      <v-btn
+        icon
+        class="align-self-center"
+        @click="toggleTheme"
+        :aria-label="`Switch to ${isLightTheme ? 'dark' : 'light'} mode`"
+      >
+        <v-icon color='bluegrey-darken-1'>
+          {{ isLightTheme ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
+        </v-icon>
+      </v-btn>
     </v-app-bar>
     <v-navigation-drawer
       v-if="$devMode && !isMobile && !isAppRoute"
@@ -142,9 +158,9 @@
             color="bluegrey-darken-4"
             icon="mdi-folder-multiple-outline"
             @click="drawer = !drawer"
-            class="text-bluegrey"
+            class="text-bluegrey-darken-1"
           >
-          <v-icon :color="drawer ? 'primary' : 'white'">mdi-folder-multiple-outline</v-icon>
+          <v-icon :color="drawer ? 'primary' : 'bluegrey-darken-1'">mdi-folder-multiple-outline</v-icon>
           </v-btn>
         </v-list-item>
         <v-list-item>
@@ -170,7 +186,7 @@
                   v-bind="props"
                   color="bluegrey-darken-4"
                 >
-                  <v-icon color="white">mdi-cog</v-icon>
+                  <v-icon color="bluegrey-darken-1">mdi-cog</v-icon>
                 </v-btn>
               </template>
               <v-list bg-color="bluegrey-darken-4">
@@ -239,7 +255,7 @@
     </v-main>
     <v-footer
       app
-      class="footer bg-bluegrey-darken-4 text-bluegrey"
+      class="footer bg-bluegrey-darken-4 text-bluegrey-darken-1"
       v-if="!isMobile"
     >
       <div class="footer__left-container">
@@ -277,7 +293,7 @@
                   :key="i"
                   class="footer__queue-list-item"
                 >
-                  <span class="text-bluegrey">Python #2</span>
+                  <span class="text-bluegrey-darken-1">Python #2</span>
                   <template v-slot:append>
                     <v-icon icon="$done" color="success" />
                   </template>
@@ -310,11 +326,11 @@
             v-if="isCodeRunning"
             density="comfortable"
             :icon="`ztIcon:${ztAliases.stop}`"
-            color="bluegrey"
             variant="plain"
             :ripple="false"
             @click="stopCodeExecution()"
             rounded
+            class="stop-btn"
           >
           </v-btn>
         </div>
@@ -355,8 +371,10 @@ import { DependencyRequest } from "./types/dependency_request";
 import SidebarComponent from "@/components/FileExplorer.vue";
 import { WebSocketManager } from "@/websocket_manager";
 import { useCommentsStore } from "@/stores/comments";
+import { toggleTheme } from "@/plugins/vuetify";
 
 export default {
+
   components: {
     CodeComponent,
     MarkdownComponent,
@@ -370,8 +388,15 @@ export default {
     Comments,
   },
 
+  watch: {
+    isLightTheme(newValue) {
+      toggleTheme();
+    },
+  },
+
   data() {
     return {
+      isLightTheme: true, 
       editingProjectName: false,
       errorMessage: "" as string,
       notebook: {} as Notebook,
@@ -469,6 +494,9 @@ export default {
   },
 
   methods: {
+    toggleTheme() {
+      toggleTheme();
+    },
     async connectSockets() {
       this.notebook_socket = new WebSocketManager(this.ws_url + "ws/notebook", {
         onMessage: (message: any) => this.notebookOnMessage(message),
@@ -1117,6 +1145,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "@/styles/mixins.scss";
+
 .zt-app-bar {
   padding-top: 3px;
   padding-bottom: 3px;
@@ -1260,6 +1289,10 @@ export default {
   }
   &__queue-length-btn {
     margin: 0 2px 0 2px;
+    background-color: rgb(var(--v-theme-background));
+    .v-theme--light & {
+      background-color: rgb(var(--v-theme-on-surface));
+    }
     @include md {
       margin: 0 8px 0 24px;
     }
@@ -1293,11 +1326,59 @@ export default {
   }
 }
 
+.toggle-group {
+  .v-btn-toggle {
+    .v-btn {
+      /* Use Vuetify's text-on-surface color for unselected/normal state. */
+      color: rgb(var(--v-theme-on-surface)) !important;
+      border-color: rgb(var(--v-theme-on-surface)) !important;
+      
+      /* Icon color (normal/unselected). */
+      .v-icon {
+        color: rgb(var(--v-theme-on-primary)) !important;
+      }
+
+      /* Active (selected), or hover state uses primary color scheme. */
+      &.v-btn--selected,
+      &.v-btn--active,
+      &:hover {
+        background-color: rgb(var(--v-theme-primary)) !important;
+        color: rgb(var(--v-theme-on-primary)) !important;
+        
+        .v-icon {
+          color: rgb(var(--v-theme-on-surface)) !important;
+        }
+      }
+    }
+  }
+}
+
+:deep(.theme-tooltip) {
+  color: var(--v-theme-on-primary) !important;
+}
+
 .toggle-group {
   display: flex;
   justify-content: center;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }
-</style>
+.stop-btn.v-btn--icon {
+  --v-btn-size: 1rem;
+  color: rgb(var(--v-theme-bluegrey)) !important;
+  
+  :deep(.v-icon) {
+    color: rgb(var(--v-theme-bluegrey)) !important;
+  }
+
+  .v-theme--light & {
+    color: rgb(var(--v-theme-surface-varient)) !important;
+    
+    :deep(.v-icon) {
+      color: rgb(var(--v-theme-surface-varient)) !important;
+    }
+  }
+}
+
+</style>
diff --git a/zt_frontend/src/components/AddCell.vue b/zt_frontend/src/components/AddCell.vue
@@ -4,12 +4,12 @@
       <div v-bind="cellId ? { ...props, id: 'addCell' + cellId } : props" class="activator-area-push">
         <div class="divider-container">
           <div class="divider">
-            <v-divider class="divider__line" color="bluegrey-darken-2"></v-divider>
+            <v-divider class="divider__line" color="bluegrey-darken-1"></v-divider>
             <span class="divider__text">
               <v-btn :prepend-icon="`ztIcon:${ztAliases.circleAdd}`" variant="plain" density="compact" :ripple="false"
               class="divider__btn bg-background">Add cell</v-btn>
             </span>
-            <v-divider class="divider__line" color="bluegrey-darken-2"></v-divider>
+            <v-divider class="divider__line" color="bluegrey-darken-1"></v-divider>
           </div>
         </div>
       </div>
@@ -79,6 +79,12 @@ const addCellItems = ref<{
   }
 }
 
+.divider__btn {
+  // The Vuetify 3 variable for body text color:
+  color: var(--v-theme-on-surface) !important;
+}
+
+
 .divider {
   display: flex;
   align-items: center;
@@ -93,7 +99,7 @@ const addCellItems = ref<{
     display: flex;
     align-items: center;
     margin: 0 8px;
-    color: bluegrey-darken-2;
+    color: bluegrey-darken-1;
     transition: color 0.2s ease;
   }
 
@@ -104,7 +110,7 @@ const addCellItems = ref<{
 
 .divider:hover {
   .divider__btn {
-    color: white !important;
+    color: blugrey-darken-1 !important;
   }
 }
 </style>
diff --git a/zt_frontend/src/components/Cell.vue b/zt_frontend/src/components/Cell.vue
@@ -15,7 +15,7 @@
       :thickness="4"
     ></v-divider>
     <div class="content">
-      <header v-if=" isFocused || isMenuOpen || showHeader" class="header">
+      <header v-if="true" class="header">
         <div class="click-edit" v-if="isDevMode && keepCodeInAppModel">
           <div class="click-edit__show-text" v-if="!editingCellName">
             <div class="loading-wrapper">
@@ -83,9 +83,6 @@
         <v-spacer v-else></v-spacer>
         <v-defaults-provider
           :defaults="{
-            VIcon: {
-              color: 'bluegrey',
-            },
             VBtn: {
               variant: 'text',
               size: 'small',
@@ -513,6 +510,12 @@ const saveCellName = async () => {
   display: flex;
   justify-content: space-between;
   margin-bottom: 2px;
+  :deep(.v-btn) {
+    color: rgba(var(--v-theme-bluegrey)) !important;
+    .v-theme--light & {
+      color: rgba(var(--v-theme-on-surface)) !important;
+  }
+  }
 }
 
 .code,