btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Color modes (#1181)

Browse Source
This commit is contained in:
Liyas Thomas
2020-09-24 08:22:54 +05:30
committed by GitHub
parent 91677a41d4
commit e94fdcad32
33 changed files with 239 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -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

4
assets/scss/styles.scss
View File

@@ -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);
}

131
assets/scss/themes.scss
View File

@@ -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;
}

2
components/collections/index.vue
View File

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

2
components/environments/index.vue
View File

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

2
components/firebase/feeds.vue
View File

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

8
components/graphql/queryeditor.vue
View File

@@ -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"
@@ -176,9 +174,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) {

2
components/layout/contributors.vue
View File

@@ -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>

2
components/layout/history.vue
View File

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

12
components/layout/pw-header.vue
View File

@@ -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;
}

29
components/layout/pw-section.vue
View File

@@ -2,7 +2,7 @@
<fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
<legend @click.prevent="collapse">
<span>{{ label }}</span>
<i class="material-icons">
<i class="ml-2 align-middle material-icons">
{{ isCollapsed(label) ? "expand_more" : "expand_less" }}
</i>
</legend>
@@ -30,47 +30,38 @@ fieldset {
@apply transition;
@apply ease-in-out;
@apply duration-200;
i {
@apply ml-2;
@apply align-middle;
}
}
&.blue legend {
color: #57b5f9;
}
&.gray legend {
color: #bcc2cd;
@apply text-blue-400;
}
&.green legend {
color: #50fa7b;
@apply text-green-400;
}
&.cyan legend {
color: #8be9fd;
&.teal legend {
@apply text-teal-400;
}
&.purple legend {
color: #bd93f9;
@apply text-purple-400;
}
&.orange legend {
color: #ffb86c;
@apply text-orange-400;
}
&.pink legend {
color: #ff79c6;
@apply text-pink-400;
}
&.red legend {
color: #ff5555;
@apply text-red-400;
}
&.yellow legend {
color: #f1fa8c;
@apply text-yellow-400;
}
}

7
components/layout/sidenav.vue
View File

@@ -204,6 +204,9 @@ nav.primary-nav {
@apply text-fgLightColor;
@apply fill-current;
@apply outline-none;
@apply transition;
@apply ease-in-out;
@apply duration-200;
&:hover {
@apply text-fgColor;
@@ -248,6 +251,7 @@ nav.secondary-nav {
@apply flex-col;
@apply flex-no-wrap;
@apply space-y-2;
@apply py-1;
li {
@apply flex;
@@ -259,6 +263,9 @@ nav.secondary-nav {
@apply text-fgLightColor;
@apply fill-current;
@apply outline-none;
@apply transition;
@apply ease-in-out;
@apply duration-200;
&:hover {
@apply text-fgColor;

67
components/settings/swatch.vue
View File

@@ -1,67 +0,0 @@
<template>
<div
class="color"
:data-color="color"
:class="{ active: active }"
v-tooltip="{ content: name || color }"
:style="{ backgroundColor: color }"
>
<i v-if="active" class="material-icons activeTick">done</i>
</div>
</template>
<style scoped lang="scss">
.color {
@apply inline-flex;
@apply items-center;
@apply justify-center;
@apply relative;
@apply m-2;
@apply p-4;
@apply rounded-full;
@apply border-2;
@apply border-bgDarkColor;
@apply cursor-pointer;
@apply transition;
@apply ease-in-out;
@apply duration-200;
&.fg {
@apply text-actColor;
}
&.active {
@apply border-2;
@apply border-acColor;
}
&.fg.active {
@apply border-2;
@apply border-fgColor;
}
.activeTick {
@apply absolute;
@apply m-auto;
@apply inset-0;
}
}
</style>
<script>
export default {
props: {
color: {
type: String,
required: true,
},
name: {
type: String,
},
active: {
type: Boolean,
default: false,
},
},
}
</script>

39
components/ui/accent-mode-picker.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<li>
<label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
<div class="space-x-2">
<span
v-for="(color, index) of colors"
:key="`color-${index}`"
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
:class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
@click="setActiveColor(color)"
>
<i class="material-icons">lens</i>
</span>
</div>
</li>
</template>
<script>
export default {
data() {
return {
active: localStorage.getItem("THEME_COLOR") || "green",
colors: ["blue", "green", "teal", "purple", "orange", "pink", "red", "yellow"],
}
},
methods: {
setActiveColor(color) {
document.documentElement.setAttribute("data-accent", color)
this.active = color
},
},
watch: {
active(color) {
localStorage.setItem("THEME_COLOR", color)
},
},
}
</script>

7
components/ui/ace-editor.vue
View File

@@ -19,8 +19,6 @@
</style>
<script>
const DEFAULT_THEME = "twilight"
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import jsonParse from "~/helpers/jsonParse"
@@ -117,7 +115,10 @@ export default {
if (this.theme) {
return this.theme
}
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")
)
},
provideLinting: debounce(function (code) {

2
components/ui/autocomplete.vue
View File

@@ -41,7 +41,7 @@
ul.suggestions {
@apply hidden;
@apply bg-atcColor;
@apply bg-actColor;
@apply absolute;
@apply mx-2;
@apply left-0;

54
components/ui/color-mode-picker.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<li>
<label>
<ColorScheme placeholder="..." tag="span">
{{ $t("background") }}:
{{ $colorMode.preference.charAt(0).toUpperCase() + $colorMode.preference.slice(1) }}
<span v-if="$colorMode.preference === 'system'">
({{ $colorMode.value }} mode detected)
</span>
</ColorScheme>
</label>
<div class="space-x-2">
<span
v-for="(color, index) of colors"
:key="`color-${index}`"
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
:class="[
{ 'bg-bgDarkColor': color === $colorMode.preference },
{ 'text-acColor hover:text-acColor': color === $colorMode.value },
]"
@click="$colorMode.preference = color"
>
<i class="material-icons">{{ getIcon(color) }}</i>
</span>
</div>
</li>
</template>
<script>
export default {
data() {
return {
colors: ["system", "light", "dark", "black"],
}
},
methods: {
getIcon(color) {
switch (color) {
case "system":
return "desktop_windows"
case "light":
return "wb_sunny"
case "dark":
return "nights_stay"
case "black":
return "bedtime"
default:
return "desktop_windows"
}
},
},
}
</script>

7
components/ui/js-editor.vue
View File

@@ -19,8 +19,6 @@
</style>
<script>
const DEFAULT_THEME = "twilight"
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import jsonParse from "~/helpers/jsonParse"
@@ -106,7 +104,10 @@ export default {
if (this.theme) {
return this.theme
}
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")
)
},
provideLinting: debounce(function (code) {

12
lang/en-US.json
View File

@@ -165,18 +165,6 @@
"no_url": "No URL",
"run_query": "Run Query",
"copy_query": "Copy Query",
"kinda_dark": "Kinda Dark",
"clearly_white": "Clearly White",
"just_black": "Just Black",
"auto_system": "Auto (system)",
"green": "Green",
"yellow": "Yellow",
"pink": "Pink",
"red": "Red",
"purple": "Purple",
"orange": "Orange",
"cyan": "Cyan",
"blue": "Blue",
"loading": "Loading...",
"fetching": "Fetching...",
"waiting_send_req": "(waiting to send request)",

12
lang/es-ES.json
View File

@@ -158,18 +158,6 @@
"no_url": "Sin URL",
"run_query": "Ejecutar consulta",
"copy_query": "Copiar consulta",
"kinda_dark": "Un poco oscuro",
"clearly_white": "Claramente blanco",
"just_black": "Solo negro",
"auto_system": "Autenticación (sistema)",
"green": "Verde",
"yellow": "Amarillo",
"pink": "Rosado",
"red": "Rojo",
"purple": "Púrpura",
"orange": "Anaranjado",
"cyan": "Cian",
"blue": "Azul",
"loading": "Cargando...",
"fetching": "Recuperando...",
"waiting_send_req": "(esperando para enviar la petición)",

12
lang/fr-FR.json
View File

@@ -158,18 +158,6 @@
"no_url": "Aucune URL",
"run_query": "Lancer une recherche",
"copy_query": "Copier la recherche",
"kinda_dark": "Plutôt Sombre",
"clearly_white": "Clairement Blanc",
"just_black": "Seulement Noir",
"auto_system": "Auth (système)",
"green": "Vert",
"yellow": "Jaune",
"pink": "Rose",
"red": "Rouge",
"purple": "Violet",
"orange": "Orange",
"cyan": "Cyan",
"blue": "Bleue",
"loading": "Chargement...",
"fetching": "Récupération...",
"waiting_send_req": "(en attente de l'envoi de la demande)",

12
lang/ja-JP.json
View File

@@ -158,18 +158,6 @@
"no_url": "URL無し",
"run_query": "クエリを実行",
"copy_query": "クエリをコピー",
"kinda_dark": "ちょっと暗い",
"clearly_white": "明らかに白",
"just_black": "ただの黒",
"auto_system": "オート（システム）",
"green": "緑",
"yellow": "黄",
"pink": "ピンク",
"red": "赤",
"purple": "紫",
"orange": "オレンジ",
"cyan": "シヤン",
"blue": "青",
"loading": "ロード中...",
"fetching": "フェッチ中...",
"waiting_send_req": "（リクエスト送信待ち）",

14
lang/ko-KR.json
View File

@@ -165,18 +165,6 @@
"no_url": "URL 없음",
"run_query": "쿼리 실행",
"copy_query": "쿼리 복사",
"kinda_dark": "연한 검정",
"clearly_white": "화이트",
"just_black": "검정",
"auto_system": "자동 (시스템)",
"green": "초록",
"yellow": "노랑",
"pink": "핑크",
"red": "빨강",
"purple": "보라",
"orange": "오렌지",
"cyan": "청록",
"blue": "파랑",
"loading": "로딩중...",
"fetching": "업데이트중...",
"waiting_send_req": "(요청 송신 대기중)",
@@ -303,4 +291,4 @@
"select_post_method": "POST 메소드 선택",
"select_put_method": "PUT 메소드 선택",
"select_delete_method": "DELETE 메소드 선택"
}
}

12
lang/pt-PT.json
View File

@@ -167,18 +167,6 @@
"no_url": "Sem URL",
"run_query": "Correr Query",
"copy_query": "Copiar Query",
"kinda_dark": "Meio escuro",
"clearly_white": "Claramente branco",
"just_black": "Só preto",
"auto_system": "Automático (sistema)",
"green": "Verde",
"yellow": "Amarelo",
"pink": "Rosa",
"red": "Vermelho",
"purple": "Roxo",
"orange": "Cor de laranja",
"cyan": "Ciano",
"blue": "Azul",
"loading": "A carregar...",
"fetching": "A obter...",
"waiting_send_req": "(a aguardar o envio do request)",

12
lang/tr-TR.json
View File

@@ -165,18 +165,6 @@
"no_url": "URL Yok",
"run_query": "Sorgu Çalıştı",
"copy_query": "Sorgu Kopyala",
"kinda_dark": "Kinda Dark",
"clearly_white": "Açıkça Beyaz",
"just_black": "Sadece Siyah",
"auto_system": "Otomatik (sistem)",
"green": "Yeşil",
"yellow": "Sarı",
"pink": "Pembe",
"red": "Kırmızı",
"purple": "Mor",
"orange": "Turuncu",
"cyan": "Camgöbeği",
"blue": "Mavi",
"loading": "Yükleniyor...",
"fetching": "Getiriliyor...",
"waiting_send_req": "(istek göndermeyi bekliyor)",

12
lang/zh-TW.json
View File

@@ -165,18 +165,6 @@
"no_url": "No URL",
"run_query": "Run Query",
"copy_query": "Copy Query",
"kinda_dark": "有點暗",
"clearly_white": "清晰白",
"just_black": "就是黑",
"auto_system": "自動（使用系統預設）",
"green": "綠",
"yellow": "黃",
"pink": "粉紅",
"red": "紅",
"purple": "紫",
"orange": "橘",
"cyan": "青",
"blue": "藍",
"loading": "載入中...",
"fetching": "正在取得...",
"waiting_send_req": "(正等待傳送請求)",

21
layouts/default.vue
View File

@@ -16,30 +16,13 @@
<script>
export default {
beforeMount() {
// Load theme settings
;(() => {
// Apply theme from settings.
document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || ""
// Load theme color data from settings, or use default color.
let color = this.$store.state.postwoman.settings.THEME_COLOR || "#50fa7b"
let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT || true
document.documentElement.style.setProperty("--ac-color", color)
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
)
})()
let color = localStorage.getItem("THEME_COLOR") || "green"
document.documentElement.setAttribute("data-accent", color)
},
mounted() {
if (process.client) {
document.body.classList.add("afterLoad")
}
document
.querySelector("meta[name=theme-color]")
.setAttribute("content", this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#202124")
console.log(
"%cWe ❤︎ open source!",
"background-color:white;padding:8px 16px;border-radius:8px;font-size:32px;color:red;"

8
nuxt.config.js
View File

@@ -9,9 +9,7 @@ export const options = {
background: "var(--bg-color)",
},
app: {
color: "#ffffff",
background: "#202124",
accent: "#50fa7b",
},
social: {
twitter: "@liyasthomas",
@@ -183,7 +181,11 @@ export default {
Allow: "/",
Sitemap: `${process.env.BASE_URL}sitemap.xml`,
},
colorMode: { preference: "dark" },
colorMode: {
classSuffix: "",
preference: "dark",
fallback: "dark",
},
i18n: {
locales: [
{

2
pages/graphql.vue
View File

@@ -152,7 +152,7 @@
/>
</pw-section>
<pw-section class="cyan" :label="$t('query')" ref="query">
<pw-section class="teal" :label="$t('query')" ref="query">
<div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>

2
pages/index.vue
View File

@@ -520,7 +520,7 @@
</tab>
<tab :id="'authentication'" :label="$t('authentication')">
<pw-section class="cyan" :label="$t('authentication')" ref="authentication">
<pw-section class="teal" :label="$t('authentication')" ref="authentication">
<ul>
<li>
<div class="row-wrapper">

158
pages/settings.vue
View File

@@ -51,42 +51,12 @@
</ul>
</pw-section>
<pw-section class="cyan" :label="$t('theme')" ref="theme">
<pw-section class="teal" :label="$t('theme')" ref="theme">
<ul>
<li>
<label>{{ $t("background") }}</label>
<div class="backgrounds">
<span :key="theme.class" @click="applyTheme(theme)" v-for="theme in themes">
<swatch
:active="settings.THEME_CLASS === theme.class"
:class="{ vibrant: theme.vibrant }"
:color="theme.color"
:name="theme.name"
class="bg"
/>
</span>
</div>
</li>
<color-mode-picker />
</ul>
<ul>
<li>
<label>{{ $t("color") }}</label>
<div class="colors">
<span
:key="entry.color"
@click="setActiveColor(entry.color, entry.vibrant)"
v-for="entry in colors"
>
<swatch
:active="settings.THEME_COLOR === entry.color.toUpperCase()"
:class="{ vibrant: entry.vibrant }"
:color="entry.color"
:name="entry.name"
class="fg"
/>
</span>
</div>
</li>
<accent-mode-picker />
</ul>
<ul>
<li>
@@ -243,16 +213,6 @@
</li>
</ul>
</pw-section>
<!-- <div>
<h1>Color mode: {{ $colorMode.value }}</h1>
<select v-model="$colorMode.preference">
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="sepia">Sepia</option>
</select>
</div> -->
</div>
</template>
@@ -264,84 +224,6 @@ import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
export default {
data() {
return {
// NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
// You should copy the existing light theme as a template and then just
// set the relevant values.
themes: [
{
color: "#202124",
name: this.$t("kinda_dark"),
class: "",
aceEditor: "twilight",
},
{
color: "#ffffff",
name: this.$t("clearly_white"),
vibrant: true,
class: "light",
aceEditor: "iplastic",
},
{
color: "#000000",
name: this.$t("just_black"),
class: "black",
aceEditor: "vibrant_ink",
},
{
color: "var(--ac-color)",
name: this.$t("auto_system"),
vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
class: "auto",
aceEditor: window.matchMedia("(prefers-color-scheme: light)").matches
? "iplastic"
: "twilight",
},
],
// You can define a new color here! It will simply store the color value.
colors: [
// If the color is vibrant, black is used as the active foreground color.
{
color: "#50fa7b",
name: this.$t("green"),
vibrant: true,
},
{
color: "#f1fa8c",
name: this.$t("yellow"),
vibrant: true,
},
{
color: "#ff79c6",
name: this.$t("pink"),
vibrant: true,
},
{
color: "#ff5555",
name: this.$t("red"),
vibrant: false,
},
{
color: "#bd93f9",
name: this.$t("purple"),
vibrant: true,
},
{
color: "#ffb86c",
name: this.$t("orange"),
vibrant: true,
},
{
color: "#8be9fd",
name: this.$t("cyan"),
vibrant: true,
},
{
color: "#57b5f9",
name: this.$t("blue"),
vibrant: false,
},
],
extensionVersion: hasExtensionInstalled()
? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
: null,
@@ -352,11 +234,6 @@ export default {
? this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED
: true,
THEME_CLASS: "",
THEME_COLOR: "",
THEME_TAB_COLOR: "",
THEME_COLOR_VIBRANT: true,
FRAME_COLORS_ENABLED: this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
PROXY_ENABLED: this.$store.state.postwoman.settings.PROXY_ENABLED || false,
PROXY_URL:
@@ -388,31 +265,6 @@ export default {
},
},
methods: {
applyTheme({ class: name, color, aceEditor }) {
this.applySetting("THEME_CLASS", name)
this.applySetting("THEME_ACE_EDITOR", aceEditor)
document.querySelector("meta[name=theme-color]").setAttribute("content", color)
this.applySetting("THEME_TAB_COLOR", color)
document.documentElement.className = name
},
setActiveColor(color, vibrant) {
// By default, the color is vibrant.
if (vibrant === null) vibrant = true
document.documentElement.style.setProperty("--ac-color", color)
document.documentElement.style.setProperty(
"--act-color",
vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
)
this.applySetting("THEME_COLOR", color.toUpperCase())
this.applySetting("THEME_COLOR_VIBRANT", vibrant)
},
getActiveColor() {
// This strips extra spaces and # signs from the strings.
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "")
return `#${strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--ac-color")
).toUpperCase()}`
},
applySetting(key, value) {
this.settings[key] = value
this.$store.commit("postwoman/applySetting", [key, value])
@@ -458,10 +310,6 @@ export default {
}
},
},
beforeMount() {
this.settings.THEME_CLASS = document.documentElement.className
this.settings.THEME_COLOR = this.getActiveColor()
},
computed: {
proxySettings() {
return {

30
store/postwoman.js
View File

@@ -7,36 +7,6 @@ export const SETTINGS_KEYS = [
*/
"SCROLL_INTO_ENABLED",
/**
* The CSS class that should be applied to the root element.
* Essentially, the name of the background theme.
*/
"THEME_CLASS",
/**
* The hex color code for the currently active theme.
*/
"THEME_COLOR",
/**
* The hex color code for browser tab color.
*/
"THEME_TAB_COLOR",
/**
* Whether or not THEME_COLOR is considered 'vibrant'.
*
* For readability reasons, if the THEME_COLOR is vibrant,
* any text placed on the theme color will have its color
* inverted from white to black.
*/
"THEME_COLOR_VIBRANT",
/**
* The Ace editor theme
*/
"THEME_ACE_EDITOR",
/**
* Normally, section frames are multicolored in the UI
* to emphasise the different sections.

3
tailwind.config.js
View File

@@ -7,8 +7,10 @@
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
experimental: "all",
dark: "class",
corePlugins: {
clear: false,
float: false,
@@ -26,7 +28,6 @@ module.exports = {
errColor: "var(--err-color)",
acColor: "var(--ac-color)",
actColor: "var(--act-color)",
atcColor: "var(--atc-color)",
ttColor: "var(--tt-color)",
},
inset: {},