pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add black and white themes

Browse Source
This commit is contained in:
Wim Brand
2026-04-03 15:48:51 +02:00
parent 373bf5c786
commit 2fb0947077
10 changed files with 55 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/filesystem/Toolbar.svelte
View File

@@ -21,7 +21,7 @@ let {
let share_dialog: ShareDialog = $state()
let link_copied = $state(false)
let toolbar_expanded = $state(false)
let toolbar_expanded = $state(true)
export const copy_link = () => {
const share_url = fs_share_url($nav.path)

19
svelte/src/filesystem/edit_window/Branding.ts
View File

@@ -4,6 +4,9 @@ import hsl2rgb from "pure-color/convert/hsl2rgb";
import rgb2hex from "pure-color/convert/rgb2hex";
import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";
const text_contrast = 75
const body_alpha = 0.9
type Style = {
input_background?: string,
input_hover_background?: string,
@@ -69,12 +72,12 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
if (properties.brand_input_color) {
style.input_background = properties.brand_input_color
style.input_hover_background = properties.brand_input_color
style.input_text = add_contrast(properties.brand_input_color, 75)
style.input_text = add_contrast(properties.brand_input_color, text_contrast)
}
if (properties.brand_highlight_color) {
style.highlight_color = properties.brand_highlight_color
style.highlight_background = properties.brand_highlight_color
style.highlight_text_color = add_contrast(properties.brand_highlight_color, 75)
style.highlight_text_color = add_contrast(properties.brand_highlight_color, text_contrast)
// If we have a body colour to compare it to we use the highlight colour
// to generate the link colour
@@ -84,20 +87,20 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
}
if (properties.brand_danger_color) {
style.danger_color = properties.brand_danger_color
style.danger_text_color = add_contrast(properties.brand_danger_color, 75)
style.danger_text_color = add_contrast(properties.brand_danger_color, text_contrast)
}
if (properties.brand_background_color) {
style.background_color = properties.brand_background_color
style.background = properties.brand_background_color
style.background_text_color = add_contrast(properties.brand_background_color, 75)
style.background_text_color = add_contrast(properties.brand_background_color, text_contrast)
style.background_pattern_color = properties.brand_background_color
}
if (properties.brand_body_color) {
style.body_color = properties.brand_body_color
style.body_background = properties.brand_body_color
style.body_text_color = add_contrast(properties.brand_body_color, 75)
style.shaded_background = set_alpha(properties.brand_body_color, 0.9)
style.separator = add_contrast(properties.brand_body_color, 8)
style.body_background = set_alpha(properties.brand_body_color, body_alpha)
style.body_text_color = add_contrast(properties.brand_body_color, text_contrast)
style.shaded_background = set_alpha(properties.brand_body_color, body_alpha)
style.separator = add_contrast(properties.brand_body_color, 15)
style.shadow_color = darken(properties.brand_body_color, 0.8)
}
if (properties.brand_card_color) {

28
svelte/src/filesystem/edit_window/ThemePresets.svelte
View File

@@ -29,7 +29,7 @@ const themes = [
brand_danger_color: "#821b3f",
brand_background_color: "#141414",
brand_body_color: "#1e1e1e",
brand_card_color: "#282828"
brand_card_color: "#282828",
}, {
name: "Nord (dark)",
brand_input_color: "#4f596d",
@@ -37,7 +37,7 @@ const themes = [
brand_danger_color: "#bd5f69",
brand_background_color: "#2f3541",
brand_body_color: "#3b4252",
brand_card_color: "#434c5f"
brand_card_color: "#434c5f",
}, {
name: "Nord (light)",
brand_input_color: "#cad2e1",
@@ -45,7 +45,23 @@ const themes = [
brand_danger_color: "#bd5f69",
brand_background_color: "#d7dde8",
brand_body_color: "#ebeef3",
brand_card_color: "#e5e9f0"
brand_card_color: "#e5e9f0",
}, {
name: "Black",
brand_input_color: "#202020",
brand_highlight_color: "#57e389",
brand_danger_color: "#ed333b",
brand_background_color: "#000000",
brand_body_color: "#080808",
brand_card_color: "#101010",
}, {
name: "White",
brand_input_color: "#f4f4f4",
brand_highlight_color: "#2ec27e",
brand_danger_color: "#c01c28",
brand_background_color: "#f8f8f8",
brand_body_color: "#ffffff",
brand_card_color: "#f0f0f0",
}, {
name: "Solarized (dark)",
brand_input_color: "#084453",
@@ -53,7 +69,7 @@ const themes = [
brand_danger_color: "#db302d",
brand_background_color: "#002c38",
brand_body_color: "#063540",
brand_card_color: "#073c49"
brand_card_color: "#073c49",
}, {
name: "Solarized (light)",
brand_input_color: "#e7dfc5",
@@ -61,7 +77,7 @@ const themes = [
brand_danger_color: "#db302d",
brand_background_color: "#ede7d3",
brand_body_color: "#fdf5e2",
brand_card_color: "#fcf2d8"
brand_card_color: "#fcf2d8",
}, {
name: "Mocha",
brand_input_color: "#313244",
@@ -69,7 +85,7 @@ const themes = [
brand_danger_color: "#f38ba8",
brand_background_color: "#1e1e2e",
brand_body_color: "#181825",
brand_card_color: "#313244"
brand_card_color: "#313244",
}
]
</script>

2
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -64,7 +64,7 @@ onMount(() => {
{@render children?.()}
<div bind:this={background_div} class="background_div">
<TextBlock width="1000px">
<TextBlock width="auto">
<audio
bind:this={player}
class="player"