mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-29 16:31:04 +00:00
Make theme reactive
This commit is contained in:
parent
ff032fb861
commit
c2a90d84e0
@ -10,7 +10,7 @@
|
|||||||
import {storage, session, stateKey, relays, getSetting, dufflepud} from "src/engine"
|
import {storage, session, stateKey, relays, getSetting, dufflepud} from "src/engine"
|
||||||
import * as engine from "src/engine"
|
import * as engine from "src/engine"
|
||||||
import {loadAppData} from "src/app/state"
|
import {loadAppData} from "src/app/state"
|
||||||
import {theme, getThemeVariables, appName} from "src/partials/state"
|
import {themeVariables, appName} from "src/partials/state"
|
||||||
import SideNav from "src/app/SideNav.svelte"
|
import SideNav from "src/app/SideNav.svelte"
|
||||||
import Routes from "src/app/Routes.svelte"
|
import Routes from "src/app/Routes.svelte"
|
||||||
import Toast from "src/app/Toast.svelte"
|
import Toast from "src/app/Toast.svelte"
|
||||||
@ -344,7 +344,7 @@
|
|||||||
|
|
||||||
document.head.append(style)
|
document.head.append(style)
|
||||||
|
|
||||||
$: style.textContent = `:root { ${getThemeVariables($theme)}; background: var(--gray-8); }`
|
$: style.textContent = `:root { ${$themeVariables}; background: var(--gray-8); }`
|
||||||
|
|
||||||
// Scroll position
|
// Scroll position
|
||||||
|
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
import Interaction from "@event-calendar/interaction"
|
import Interaction from "@event-calendar/interaction"
|
||||||
import {secondsToDate} from "src/util/misc"
|
import {secondsToDate} from "src/util/misc"
|
||||||
import {Naddr} from "src/util/nostr"
|
import {Naddr} from "src/util/nostr"
|
||||||
import {getThemeColor, theme} from "src/partials/state"
|
import {themeColors, theme} from "src/partials/state"
|
||||||
import {router} from "src/app/router"
|
import {router} from "src/app/router"
|
||||||
import {load, pubkey} from "src/engine"
|
import {load, pubkey} from "src/engine"
|
||||||
|
|
||||||
@ -52,7 +52,7 @@
|
|||||||
title: meta.name,
|
title: meta.name,
|
||||||
start: secondsToDate(meta.start),
|
start: secondsToDate(meta.start),
|
||||||
end: secondsToDate(meta.end),
|
end: secondsToDate(meta.end),
|
||||||
backgroundColor: getThemeColor($theme, isOwn ? "accent" : "gray-2"),
|
backgroundColor: $themeColors[isOwn ? "accent" : "gray-2"],
|
||||||
_ctx: e,
|
_ctx: e,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {tryJson} from "src/util/misc"
|
import {tryJson} from "src/util/misc"
|
||||||
import {getThemeBackgroundGradient} from "src/partials/state"
|
import {themeBackgroundGradient} from "src/partials/state"
|
||||||
import Card from "src/partials/Card.svelte"
|
import Card from "src/partials/Card.svelte"
|
||||||
import Content from "src/partials/Content.svelte"
|
import Content from "src/partials/Content.svelte"
|
||||||
import ImageCircle from "src/partials/ImageCircle.svelte"
|
import ImageCircle from "src/partials/ImageCircle.svelte"
|
||||||
@ -11,9 +11,10 @@
|
|||||||
|
|
||||||
const {pubkey, content} = note
|
const {pubkey, content} = note
|
||||||
const {name, picture, about, banner} = tryJson(() => JSON.parse(content))
|
const {name, picture, about, banner} = tryJson(() => JSON.parse(content))
|
||||||
const {rgba} = getThemeBackgroundGradient()
|
|
||||||
const bannerUrl = imgproxy(banner)
|
const bannerUrl = imgproxy(banner)
|
||||||
|
|
||||||
|
$: ({rgba} = $themeBackgroundGradient)
|
||||||
|
|
||||||
const showPerson = () =>
|
const showPerson = () =>
|
||||||
router
|
router
|
||||||
.at("people")
|
.at("people")
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
import {whereEq, assocPath, without, uniq} from "ramda"
|
import {whereEq, assocPath, without, uniq} from "ramda"
|
||||||
import {noteKinds} from "src/util/nostr"
|
import {noteKinds} from "src/util/nostr"
|
||||||
import {getKey} from "src/util/router"
|
import {getKey} from "src/util/router"
|
||||||
import {getThemeBackgroundGradient} from "src/partials/state"
|
import {themeBackgroundGradient} from "src/partials/state"
|
||||||
import Content from "src/partials/Content.svelte"
|
import Content from "src/partials/Content.svelte"
|
||||||
import Tabs from "src/partials/Tabs.svelte"
|
import Tabs from "src/partials/Tabs.svelte"
|
||||||
import Anchor from "src/partials/Anchor.svelte"
|
import Anchor from "src/partials/Anchor.svelte"
|
||||||
@ -35,7 +35,6 @@
|
|||||||
|
|
||||||
export let address, activeTab
|
export let address, activeTab
|
||||||
|
|
||||||
const {rgb, rgba} = getThemeBackgroundGradient()
|
|
||||||
const group = deriveGroup(address)
|
const group = deriveGroup(address)
|
||||||
const access = deriveGroupAccess(address)
|
const access = deriveGroupAccess(address)
|
||||||
const status = deriveGroupStatus(address)
|
const status = deriveGroupStatus(address)
|
||||||
@ -62,6 +61,8 @@
|
|||||||
return () => sub.close()
|
return () => sub.close()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
$: ({rgb, rgba} = $themeBackgroundGradient)
|
||||||
|
|
||||||
$: members = uniq(
|
$: members = uniq(
|
||||||
without([$group?.pubkey], ($sharedKey?.members || []).concat($adminKey?.members || [])),
|
without([$group?.pubkey], ($sharedKey?.members || []).concat($adminKey?.members || [])),
|
||||||
)
|
)
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
import {info} from "src/util/logger"
|
import {info} from "src/util/logger"
|
||||||
import {ensureProto} from "src/util/misc"
|
import {ensureProto} from "src/util/misc"
|
||||||
import {noteKinds} from "src/util/nostr"
|
import {noteKinds} from "src/util/nostr"
|
||||||
import {getThemeBackgroundGradient} from "src/partials/state"
|
import {themeBackgroundGradient} from "src/partials/state"
|
||||||
import Tabs from "src/partials/Tabs.svelte"
|
import Tabs from "src/partials/Tabs.svelte"
|
||||||
import Anchor from "src/partials/Anchor.svelte"
|
import Anchor from "src/partials/Anchor.svelte"
|
||||||
import Content from "src/partials/Content.svelte"
|
import Content from "src/partials/Content.svelte"
|
||||||
@ -34,13 +34,13 @@
|
|||||||
|
|
||||||
const tabs = ["notes", "likes", $env.FORCE_RELAYS.length === 0 && "relays"].filter(identity)
|
const tabs = ["notes", "likes", $env.FORCE_RELAYS.length === 0 && "relays"].filter(identity)
|
||||||
const person = derivePerson(pubkey)
|
const person = derivePerson(pubkey)
|
||||||
const {rgb, rgba} = getThemeBackgroundGradient()
|
|
||||||
|
|
||||||
let activeTab = "notes"
|
let activeTab = "notes"
|
||||||
let loading = true
|
let loading = true
|
||||||
|
|
||||||
$: ownRelays = getPubkeyRelays(pubkey)
|
$: ownRelays = getPubkeyRelays(pubkey)
|
||||||
$: banner = imgproxy($person.profile?.banner, {w: window.innerWidth})
|
$: banner = imgproxy($person.profile?.banner, {w: window.innerWidth})
|
||||||
|
$: ({rgb, rgba} = $themeBackgroundGradient)
|
||||||
|
|
||||||
info("Person", npub, pubkey, $person)
|
info("Person", npub, pubkey, $person)
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import {prop, last, fromPairs} from "ramda"
|
import {prop, last, fromPairs} from "ramda"
|
||||||
import {randomId, range} from "hurdak"
|
import {randomId, range} from "hurdak"
|
||||||
import type {Writable} from "svelte/store"
|
import type {Writable} from "svelte/store"
|
||||||
import {writable, get} from "svelte/store"
|
import {writable, derived, get} from "svelte/store"
|
||||||
import {parseHex} from "src/util/html"
|
import {parseHex} from "src/util/html"
|
||||||
import {shadeColor, synced} from "src/util/misc"
|
import {shadeColor, synced} from "src/util/misc"
|
||||||
|
|
||||||
@ -38,13 +38,13 @@ toast.show = (type, message, timeout = 5) => {
|
|||||||
// Themes
|
// Themes
|
||||||
|
|
||||||
const THEME = fromPairs(
|
const THEME = fromPairs(
|
||||||
import.meta.env.VITE_THEME.split(",").map((x: string) => x.split(":"))
|
import.meta.env.VITE_THEME.split(",").map((x: string) => x.split(":")),
|
||||||
) as Record<string, string>
|
) as Record<string, string>
|
||||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
|
||||||
export const theme = synced("ui/theme", prefersDark ? "dark" : "light")
|
export const theme = synced("ui/theme", prefersDark ? "dark" : "light")
|
||||||
|
|
||||||
export const getThemeColors = ($theme: string) => {
|
export const themeColors = derived(theme, $theme => {
|
||||||
for (const x of range(1, 10)) {
|
for (const x of range(1, 10)) {
|
||||||
const lum = $theme === "dark" ? (5 - x) * 25 : (x - 5) * 25
|
const lum = $theme === "dark" ? (5 - x) * 25 : (x - 5) * 25
|
||||||
|
|
||||||
@ -52,22 +52,21 @@ export const getThemeColors = ($theme: string) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return THEME
|
return THEME
|
||||||
}
|
})
|
||||||
|
|
||||||
export const getThemeColor = ($theme: string, k: string) => prop(k, getThemeColors($theme))
|
export const themeVariables = derived(themeColors, $colors => {
|
||||||
|
return Object.entries($colors)
|
||||||
export const getThemeVariables = ($theme: string) =>
|
|
||||||
Object.entries(getThemeColors($theme))
|
|
||||||
.map(([k, v]) => `--${k}: ${v};`)
|
.map(([k, v]) => `--${k}: ${v};`)
|
||||||
.join("\n")
|
.join("\n")
|
||||||
|
})
|
||||||
|
|
||||||
export const getThemeBackgroundGradient = () => {
|
export const themeBackgroundGradient = derived(themeColors, $colors => {
|
||||||
const color = parseHex(getThemeColor(get(theme), "gray-8"))
|
const color = parseHex($colors["gray-8"])
|
||||||
|
|
||||||
return {
|
return {
|
||||||
rgba: `rgba(${color.join(", ")}, 0.5)`,
|
rgba: `rgba(${color.join(", ")}, 0.5)`,
|
||||||
rgb: `rgba(${color.join(", ")})`,
|
rgb: `rgba(${color.join(", ")})`,
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
|
||||||
export const getModal = () => last(Array.from(document.querySelectorAll(".modal-content")))
|
export const getModal = () => last(Array.from(document.querySelectorAll(".modal-content")))
|
||||||
|
Loading…
Reference in New Issue
Block a user