mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-30 00:41:12 +00:00
Simplify theme config
This commit is contained in:
parent
97d37eaca0
commit
f501eb1c29
3
.env
3
.env
@ -1,5 +1,4 @@
|
||||
VITE_THEME_DARK=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-1:#FFFFFF,gray-2:#FAF6F1,gray-3:#F2EBE1,gray-4:#E9E0D3,gray-5:#B3AA98,gray-6:#565249,gray-7:#393530,gray-8:#252422,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1
|
||||
VITE_THEME_LIGHT=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-8:#FFFFFF,gray-7:#FAF6F1,gray-6:#F2EBE1,gray-5:#B3AA98,gray-4:#B3AA98,gray-3:#565249,gray-2:#393530,gray-1:#252422,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1
|
||||
VITE_THEME=transparent:transparent,black:#0f0f0e,white:#FFFFFF,accent:#EB5E28,accent-light:#FB652C,gray-dark:#8D8581,gray-light:#A8A5A4,danger:#ff0000,warning:#ebd112,success:#37ab51,input:#FAF6F1,input-hover:#F2EBE1
|
||||
VITE_DUFFLEPUD_URL=https://dufflepud.onrender.com
|
||||
VITE_DEFAULT_FOLLOWS=97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322,3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,6e468422dfb74a5738702a8823b9b28168abab8655faacb6853cd0ee15deee93
|
||||
VITE_ENABLE_ZAPS=true
|
||||
|
@ -29,7 +29,7 @@
|
||||
</script>
|
||||
|
||||
{#if ready}
|
||||
<div class="pt-16 text-gray-3 lg:ml-56">
|
||||
<div class="pt-16 text-gray-2 lg:ml-56">
|
||||
<Route path="/notifications" component={Notifications} />
|
||||
<Route path="/notifications/:activeTab" component={Notifications} />
|
||||
<Route path="/search">
|
||||
|
@ -28,7 +28,7 @@
|
||||
|
||||
<ul
|
||||
class="fixed top-0 bottom-0 left-0 z-20 mt-16 w-56 overflow-hidden border-r border-gray-6 bg-gray-7 pt-4
|
||||
pb-20 text-gray-3 shadow-xl transition-all lg:mt-0 lg:ml-0"
|
||||
pb-20 text-gray-2 shadow-xl transition-all lg:mt-0 lg:ml-0"
|
||||
class:-ml-56={!$menuIsOpen}>
|
||||
{#if $profile.pubkey}
|
||||
<li>
|
||||
|
@ -15,9 +15,9 @@
|
||||
"pointer-events-auto m-2 ml-16 rounded border p-3 text-center shadow-xl sm:ml-2",
|
||||
"max-w-xl flex-grow transition-all",
|
||||
{
|
||||
"border-gray-6 bg-gray-7 text-gray-3": $toast.type === "info",
|
||||
"border-warning bg-gray-7 text-gray-3": $toast.type === "warning",
|
||||
"border-danger bg-gray-7 text-gray-3": $toast.type === "error",
|
||||
"border-gray-6 bg-gray-7 text-gray-2": $toast.type === "info",
|
||||
"border-warning bg-gray-7 text-gray-2": $toast.type === "warning",
|
||||
"border-danger bg-gray-7 text-gray-2": $toast.type === "error",
|
||||
}
|
||||
)}>
|
||||
{#if is(String, $toast.message)}
|
||||
|
@ -20,7 +20,7 @@
|
||||
|
||||
<div
|
||||
class="fixed top-0 z-10 flex h-16 w-full items-center justify-between border-b
|
||||
border-gray-6 bg-gray-7 p-4 text-gray-3">
|
||||
border-gray-6 bg-gray-7 p-4 text-gray-2">
|
||||
<div class="fa fa-bars fa-2xl -m-6 cursor-pointer p-6 lg:hidden" on:click={toggleMenu} />
|
||||
<div class="flex items-center gap-4">
|
||||
<Anchor
|
||||
|
@ -184,7 +184,7 @@
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute top-0 right-0 z-10 -mt-4 -mr-2 flex h-6 w-6 cursor-pointer items-center
|
||||
justify-center rounded-full border border-solid border-gray-7 bg-gray-8 text-gray-3"
|
||||
justify-center rounded-full border border-solid border-gray-7 bg-gray-8 text-gray-2"
|
||||
on:click={() => {
|
||||
collapsed = !collapsed
|
||||
}}>
|
||||
|
@ -99,14 +99,14 @@
|
||||
class="note-reply relative z-10 my-2 flex flex-col gap-1"
|
||||
bind:this={container}
|
||||
on:click|stopPropagation>
|
||||
<div class={`border border-${borderColor} border-solid rounded-2xl overflow-hidden`}>
|
||||
<div class={`border border-${borderColor} overflow-hidden rounded-2xl border-solid`}>
|
||||
<div class="bg-gray-7" class:rounded-b={data.mentions.length === 0}>
|
||||
<Compose bind:this={reply} onSubmit={send}>
|
||||
<button
|
||||
slot="addon"
|
||||
on:click={send}
|
||||
class="flex cursor-pointer flex-col justify-center gap-2 border-l border-solid
|
||||
border-gray-7 p-4 py-8 text-gray-3 transition-all hover:bg-accent">
|
||||
border-gray-7 p-4 py-8 text-gray-2 transition-all hover:bg-accent">
|
||||
<i class="fa fa-paper-plane fa-xl" />
|
||||
</button>
|
||||
</Compose>
|
||||
@ -121,7 +121,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
<div class={`h-px bg-${borderColor}`} />
|
||||
<div class="flex gap-2 rounded-b bg-gray-7 p-2 text-sm text-gray-3">
|
||||
<div class="flex gap-2 rounded-b bg-gray-7 p-2 text-sm text-gray-2">
|
||||
<div class="inline-block border-r border-solid border-gray-6 py-2 pl-1 pr-3">
|
||||
<div class="flex cursor-pointer items-center gap-3">
|
||||
<ImageInput bind:value={data.image} icon="image" hideInput>
|
||||
@ -136,7 +136,7 @@
|
||||
{displayPerson(getPersonWithFallback(p))}
|
||||
</Chip>
|
||||
{:else}
|
||||
<div class="text-gray-3 inline-block py-2">No mentions</div>
|
||||
<div class="text-gray-2 inline-block py-2">No mentions</div>
|
||||
{/each}
|
||||
<div class="-mb-2" />
|
||||
</div>
|
||||
|
@ -140,11 +140,11 @@
|
||||
bind:this={textarea}
|
||||
on:keypress={onKeyPress}
|
||||
class="w-full resize-none bg-gray-6 p-2
|
||||
text-gray-3 outline-0 placeholder:text-gray-1" />
|
||||
text-gray-2 outline-0 placeholder:text-gray-1" />
|
||||
<button
|
||||
on:click={send}
|
||||
class="flex cursor-pointer flex-col justify-center gap-2 border-l border-solid border-gray-7 p-4
|
||||
py-8 text-gray-3 transition-all hover:bg-accent ">
|
||||
py-8 text-gray-2 transition-all hover:bg-accent ">
|
||||
<i class="fa-solid fa-paper-plane fa-xl" />
|
||||
</button>
|
||||
</div>
|
||||
@ -154,7 +154,7 @@
|
||||
class="fixed bottom-32 flex w-full cursor-pointer justify-center"
|
||||
transition:fly|local={{y: 20}}
|
||||
on:click={scrollToBottom}>
|
||||
<div class="rounded-full bg-accent py-2 px-4 text-gray-3">New messages found</div>
|
||||
<div class="rounded-full bg-accent py-2 px-4 text-gray-2">New messages found</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
@ -4,7 +4,7 @@
|
||||
export let gap = 6
|
||||
export let size = "2xl"
|
||||
|
||||
const className = `flex flex-col m-auto text-gray-3 gap-${gap} overflow-hidden`
|
||||
const className = `flex flex-col m-auto text-gray-2 gap-${gap} overflow-hidden`
|
||||
|
||||
if (!["inherit", "lg", "2xl"].includes(size)) {
|
||||
throw new Error(`Invalid size: ${size}`)
|
||||
|
@ -86,7 +86,7 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="w-full min-w-0 p-2 text-gray-3 outline-0"
|
||||
class="w-full min-w-0 p-2 text-gray-2 outline-0"
|
||||
autofocus
|
||||
contenteditable
|
||||
bind:this={input}
|
||||
|
@ -29,7 +29,7 @@
|
||||
class="absolute top-0 right-0 bottom-0 w-32 rounded-3xl bg-gray-8"
|
||||
style="filter: blur(15px) opacity(0.75)" />
|
||||
{#each actions as { label, icon, onClick }}
|
||||
<div class="relative z-10 cursor-pointer text-gray-3" on:click={onClick}>
|
||||
<div class="relative z-10 cursor-pointer text-gray-2" on:click={onClick}>
|
||||
<span class="absolute right-0 mr-12 mt-2 whitespace-nowrap">{label}</span>
|
||||
<Anchor type="button-circle"><i class={`fa fa-${icon}`} /></Anchor>
|
||||
</div>
|
||||
|
@ -1,10 +1,10 @@
|
||||
import {prop, whereEq, reject, last, fromPairs} from "ramda"
|
||||
import {uuid, switcher} from "hurdak/lib/hurdak"
|
||||
import {uuid, range} from "hurdak/lib/hurdak"
|
||||
import type {Writable} from "svelte/store"
|
||||
import {navigate} from "svelte-routing"
|
||||
import {writable, get} from "svelte/store"
|
||||
import {globalHistory} from "svelte-routing/src/history"
|
||||
import {sleep, synced, WritableList} from "src/util/misc"
|
||||
import {sleep, shadeColor, synced, WritableList} from "src/util/misc"
|
||||
|
||||
// Settings
|
||||
|
||||
@ -94,14 +94,23 @@ location.subscribe($location => {
|
||||
|
||||
// Themes
|
||||
|
||||
const parseTheme = s => fromPairs(s.split(",").map(x => x.split(":")))
|
||||
const THEME_LIGHT = parseTheme(import.meta.env.VITE_THEME_LIGHT)
|
||||
const THEME_DARK = parseTheme(import.meta.env.VITE_THEME_DARK)
|
||||
const THEME = fromPairs(import.meta.env.VITE_THEME.split(",").map(x => x.split(":")))
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
|
||||
export const theme = synced("ui/theme", prefersDark ? "dark" : "light")
|
||||
|
||||
export const getThemeColors = $theme => switcher($theme, {light: THEME_LIGHT, dark: THEME_DARK})
|
||||
export const getThemeColors = $theme => {
|
||||
for (const x of range(1, 10)) {
|
||||
// const lum = $theme === 'dark' ? (x - 5) * 30 : (4 - x) * 30
|
||||
const lum = $theme === "dark" ? (5 - x) * 25 : (x - 5) * 25
|
||||
|
||||
console.log(lum, shadeColor(THEME[`gray-${$theme}`], lum))
|
||||
|
||||
THEME[`gray-${x}`] = shadeColor(THEME[`gray-${$theme}`], lum)
|
||||
}
|
||||
|
||||
return THEME
|
||||
}
|
||||
|
||||
export const getThemeColor = ($theme, k) => prop(k, getThemeColors($theme))
|
||||
|
||||
|
@ -370,3 +370,27 @@ export class WritableList<T> {
|
||||
this._store.update(xs => (xs.includes(x) ? without([x], xs) : xs.concat(x)))
|
||||
}
|
||||
}
|
||||
|
||||
export const shadeColor = (color, percent) => {
|
||||
let R = parseInt(color.substring(1, 3), 16)
|
||||
let G = parseInt(color.substring(3, 5), 16)
|
||||
let B = parseInt(color.substring(5, 7), 16)
|
||||
|
||||
R = (R * (100 + percent)) / 100
|
||||
G = (G * (100 + percent)) / 100
|
||||
B = (B * (100 + percent)) / 100
|
||||
|
||||
R = R < 255 ? R : 255
|
||||
G = G < 255 ? G : 255
|
||||
B = B < 255 ? B : 255
|
||||
|
||||
R = Math.round(R)
|
||||
G = Math.round(G)
|
||||
B = Math.round(B)
|
||||
|
||||
const RR = R.toString(16).length == 1 ? "0" + R.toString(16) : R.toString(16)
|
||||
const GG = G.toString(16).length == 1 ? "0" + G.toString(16) : G.toString(16)
|
||||
const BB = B.toString(16).length == 1 ? "0" + B.toString(16) : B.toString(16)
|
||||
|
||||
return "#" + RR + GG + BB
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user