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

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) {