Upstream

README.md

@@ -93,8 +93,8 @@
 
 **Theming:** [Customize now ✨](https://hoppscotch.io/settings)
 
-- Choose theme: Kinda Dark (default), Clearly White, Just Black and System theme
-- Choose accent color: Green (default), Yellow, Pink, Red, Purple, Orange, Cyan and Blue
+- Choose theme: System, Light, Dark (default) and Black
+- Choose accent color: Blue, Green (default), Teal, Purple, Orange, Pink, Red, and Yellow
 - Toggle multi-colored headings
 - Toggle auto-scroll to response
 

assets/scss/styles.scss

@@ -87,9 +87,6 @@ a {
   @apply inline-flex;
   @apply text-current;
   @apply no-underline;
-  @apply transition;
-  @apply ease-in-out;
-  @apply duration-200;
   @apply outline-none;
 
   &.link {
@@ -361,6 +358,7 @@ button {
   &:not([disabled]):focus {
     @apply text-actColor;
     @apply fill-current;
+    @apply outline-none;
     box-shadow: inset 0 0 0 2px var(--fg-color);
   }
 

assets/scss/themes.scss

@@ -1,18 +1,9 @@
 @mixin baseTheme {
-  --font-body: 'Poppins', 'sans-serif';
-  --font-mono: 'Roboto Mono', 'monoscpace';
-  --font-icon: 'Material Icons';
+  --font-body: "Poppins", "sans-serif";
+  --font-mono: "Roboto Mono", "monoscpace";
+  --font-icon: "Material Icons";
 }
 
-/**
-  Main Themes:
-  - dark (default)
-  - light
-  - black
-  - auto
- */
-
-// Dark is the default theme variant.
 @mixin darkTheme {
   // Background color
   --bg-color: rgba(32, 33, 36, 1);
@@ -28,14 +19,10 @@
   --brd-color: rgba(255, 255, 255, 0.05);
   // Error color
   --err-color: rgba(255, 255, 255, 0.05);
-  // Acent color
-  --ac-color: rgba(80, 250, 123, 1);
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
-  // Auto-complete color
-  --atc-color: rgba(32, 33, 36, 1);
   // Tooltip color
   --tt-color: rgba(53, 53, 53, 1);
+  // Editor theme
+  --editor-theme: "twilight";
 }
 
 @mixin lightTheme {
@@ -53,14 +40,10 @@
   --brd-color: rgba(0, 0, 0, 0.1);
   // Error color
   --err-color: rgba(0, 0, 0, 0.1);
-  // Acent color
-  --ac-color: rgba(80, 250, 123, 1);
-  // Active text color
-  --act-color: rgba(255, 255, 255, 1);
-  // Auto-complete color
-  --atc-color: rgba(255, 255, 255, 1);
   // Tooltip color
   --tt-color: rgba(220, 220, 220, 1);
+  // Editor theme
+  --editor-theme: "iplastic";
 }
 
 @mixin blackTheme {
@@ -78,37 +61,107 @@
   --brd-color: rgba(255, 255, 255, 0.05);
   // Error color
   --err-color: rgba(255, 255, 255, 0.05);
-  // Acent color
-  --ac-color: rgba(80, 250, 123, 1);
-  // Active text color
-  --act-color: rgba(0, 0, 0, 1);
-  // Auto-complete color
-  --atc-color: rgba(0, 0, 0, 1);
   // Tooltip color
   --tt-color: rgba(18, 18, 18, 1);
+  // Editor theme
+  --editor-theme: "vibrant_ink";
+}
+
+@mixin blueTheme {
+  // Acent color
+  --ac-color: theme("colors.blue.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin greenTheme {
+  // Acent color
+  --ac-color: theme("colors.green.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin tealTheme {
+  // Acent color
+  --ac-color: theme("colors.teal.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin purpleTheme {
+  // Acent color
+  --ac-color: theme("colors.purple.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin orangeTheme {
+  // Acent color
+  --ac-color: theme("colors.orange.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin pinkTheme {
+  // Acent color
+  --ac-color: theme("colors.pink.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin redTheme {
+  // Acent color
+  --ac-color: theme("colors.red.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+}
+
+@mixin yellowTheme {
+  // Acent color
+  --ac-color: theme("colors.yellow.400");
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
 }
 
 :root {
   @include baseTheme;
   @include darkTheme;
+  @include greenTheme;
 }
 
 :root.light {
   @include lightTheme;
 }
 
+:root.dark {
+  @include darkTheme;
+}
+
 :root.black {
   @include blackTheme;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root.auto {
-    @include darkTheme;
-  }
+:root[data-accent="blue"] {
+  @include blueTheme;
 }
-
-@media (prefers-color-scheme: light) {
-  :root.auto {
-    @include lightTheme;
-  }
+:root[data-accent="green"] {
+  @include greenTheme;
+}
+:root[data-accent="teal"] {
+  @include tealTheme;
+}
+:root[data-accent="purple"] {
+  @include purpleTheme;
+}
+:root[data-accent="orange"] {
+  @include orangeTheme;
+}
+:root[data-accent="pink"] {
+  @include pinkTheme;
+}
+:root[data-accent="red"] {
+  @include redTheme;
+}
+:root[data-accent="yellow"] {
+  @include yellowTheme;
 }

components/collections/index.vue

@@ -85,7 +85,7 @@ TODO:
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 245px);
+  max-height: calc(100vh - 232px);
 }
 </style>
 

components/environments/index.vue

@@ -44,7 +44,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 245px);
+  max-height: calc(100vh - 232px);
 }
 </style>
 

components/firebase/feeds.vue

@@ -31,7 +31,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 298px);
+  max-height: calc(100vh - 296px);
 }
 
 .clamb-3 {

components/graphql/queryeditor.vue

@@ -17,8 +17,6 @@
 </style>
 
 <script>
-const DEFAULT_THEME = "twilight"
-
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
@@ -38,7 +36,7 @@ export default {
     theme: {
       type: String,
       required: false,
-      default: null
+      default: null,
     },
     onRunGQLQuery: {
       type: Function,
@@ -177,9 +175,11 @@ export default {
     defineTheme() {
       if (this.theme) {
         return this.theme
-      } else {
-        return this.$store.state.postwoman.settings.THEME_ACE_EDITOR || DEFAULT_THEME
       }
+      const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
+      return strip(
+        window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
+      )
     },
 
     setValidationSchema(schema) {

components/layout/contributors.vue

@@ -229,9 +229,7 @@
   @apply items-center;
   @apply flex-no-wrap;
   @apply overflow-auto;
-  @apply py-4;
   @apply my-4;
-  max-width: calc(100vw - 72px);
 }
 </style>
 

components/layout/history.vue

@@ -245,7 +245,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 290px);
+  max-height: calc(100vh - 288px);
 
   [readonly] {
     @apply cursor-default;

components/layout/pw-header.vue

@@ -3,8 +3,8 @@
     <div class="row-wrapper">
       <span class="slide-in">
         <nuxt-link :to="localePath('index')">
-          <h1 class="logo hide-on-small-screen">Hoppscotch</h1>
-          <h1 class="logo show-on-small-screen">Hs</h1>
+          <h1 class="text-xl hide-on-small-screen hover:text-acColor">Hoppscotch</h1>
+          <h1 class="text-xl show-on-small-screen hover:text-acColor">Hs</h1>
         </nuxt-link>
       </span>
       <span>
@@ -293,14 +293,6 @@ kbd {
   animation: slideIn 0.2s forwards ease-in-out;
 }
 
-.logo {
-  @apply text-xl;
-
-  &:hover {
-    @apply text-acColor;
-  }
-}
-
 .show-on-small-screen {
   @apply hidden;
 }
@@ -346,7 +338,7 @@ export default {
   mounted() {
     // Initializes the PWA code - checks if the app is installed,
     // etc.
-    (async () => {
+    ;(async () => {
       this.showInstallPrompt = await intializePwa()
       let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes"
       if (!cookiesAllowed) {