/* Copyright (c) 2026 BSC Softworks // Portions Copyright (c) 2026 BACnet International // Licensed under the MIT License. See LICENSE.txt in the project root for license information. */ /* The :root variables define the default theme. To add a new theme, add an entry to the element is used as a class name to add to the document.documentElement.classList. Theme class names must begin with 'theme-' so they can be swapped out programmatically. See Shell.setTheme() and Shell.setBrand() */ :root { /* BACnet palette colors */ --color-logo-blue: #0071b8; /* titles, menu bar */ --color-logo-green: #41af4a; /* title alternate, green means "go", etc. */ --color-black: #000; /* high-contrast text */ --color-darkest-gray: #333; /* dark mode edges */ --color-light-gray: #e8e8e8; /* e.g., alternating table rows */ --color-lightest-gray: #f8f8f8; /* desaturated Light Slate Gray */ --color-medium-slate-gray: #9fa6a9; /* dividers, edges, transitional color */ --color-light-slate-gray: #f0faff; /* backgrounds for graphics and high-contrast text */ --color-white: #fff; /* background for high-contrast text */ --color-dark-blue: #004d7e; /* dark mode borders */ --color-medium-blue: #71b8d5; /* lines, dividers, background without text */ --color-light-blue: #d5f2ff; /* blue background for high-contrast text */ --color-accent-blue: #82B1FF; /*+dr selected text possibilities: google light 82B1FF, microsoft 0078D4, apple 0A84FF; */ --color-darkest-green: #205524; /* dark mode background green */ --color-dark-green: #3d6a3f; /* dark mode selected row */ --color-medium-green: #85b989; /* selections, green background for medium-contrast text */ --color-light-green: #d5f2d7; /* green background for high-contrast text */ --color-red: #f21100; /* errors */ --color-dark-pink: #f2756b; /* dark mode, lighter red for better contrast with black */ --color-light-yellow: #f2eaae; /* tree selection background color */ --color-yellow: #f2d700; /* warnings, text highlights */ --color-orange: #f29500; /* input focus border & outline color */ --color-purple: #7100b8; /* occasional contrast color */ --color-scheme: light; /* set color-scheme on some HTML elements to ensure browsers respect custom styles */ --background-color: var(--color-light-slate-gray); --border-color: #ccc; --focus-border-color: var(--color-orange); --focus-readonly-color: var(--color-logo-blue); --text-color: var(--color-black); --text-title-color: var(--color-dark-blue); --header-logo-image: url('../themes/logo-bsc-light.png'); /* TODO make brandable */ --header-app-chooser-image: url('../themes/app-chooser-light.png'); --header-background: var(--color-light-slate-gray); --header-text-color: var(--color-black); --header-title-color: var(--color-black); --header-title-font: bold 24px/1.2 'Inter', 'Helvetica', sans-serif; --header-dropdown-background: var(--color-white); --header-dropdown-text-color: var(--color-black); --header-dropdown-border: 1px var(--color-medium-slate-gray); --header-dropdown-hover: var(--color-light-green); --footer-background: var(--color-light-slate-gray); --footer-text-color: var(--color-dark-blue); --error-color: var(--color-red); --link-color: var(--color-logo-blue); --button-background: #f0f0f0; --button-text-color: black; --button-border-color: #ccc; --button-padding: 5px 10px; --button-radius: 5px; --button-border: 1px solid var(--button-border-color); --button-disabled-background: #f0f0f0; --button-disabled-text-color: grey; --button-hover-text-color: var(--color-dark-blue); --button-hover-border-color: var(--color-medium-blue); --button-margin: 5px; /* allow breathing room between buttons and other elements */ --input-background: white; --input-text-color: black; --input-padding: 5px; --input-border: 1px solid var(--border-color); --input-radius: 5px; --input-disabled-background: white; --input-disabled-text-color: var(--color-medium-slate-gray); --textarea-background: white; --textarea-text-color: black; --textarea-padding: 5px; --textarea-border: 1px solid var(--border-color); --textarea-radius: 5px; --dropzone-background: var(--color-light-green); --dropzone-border: 1px solid var(--color-medium-green); --dropzone-hover: var(--color-medium-green); --dropzone-padding: 3px 8px; /*~dr 3px */ --dropzone-margin: 5px; --dropzone-radius: 5px; --dropzone-text-color: black; --select-background: #ffffff; --select-text-color: black; --select-border-color: #ccc; --select-padding: 5px 10px; --select-border: 1px solid var(--select-border-color); --select-radius: 5px; --select-focus-background-color: #f0f0f0; --card-background: #fff; --card-shadow: rgba(0, 0, 0, 0.0); --card-radius: 0; --checkbox-mark-color: var(--color-logo-blue); --dialog-background: white; --dialog-text-color: black; --dialog-border-color: black; --dialog-border: 1px solid var(--dialog-border-color); --dialog-radius: 10px; --dialog-padding: 20px; --row-selected-color: var(--color-light-green); --row-odd-color: var(--color-white); --row-even-color: var(--color-light-gray); --tab-background: #f0f0f0; /* Inactive tab background */ --tab-active-background: var(--color-white); /* Active tab background */ --tab-hover-background: var(--color-light-blue); /* midway between active and disabled */ --tab-hover-color: var(--color-white); /* Hover effect for tabs */ --tab-hover-text-color: var(--color-logo-blue); --tab-text-color: #333333; /* Inactive tab text color */ --tab-active-text-color: #000000; /* Active tab text color */ --tab-border-color: var(--color-medium-slate-gray) var(--color-medium-slate-gray) transparent var(--color-medium-slate-gray); /* Border color between tabs */ --tab-active-border-color: var(--color-medium-blue) var(--color-medium-blue) transparent var(--color-medium-blue); --tab-border-radius: 6px 6px 0 0; /* Rounded corners for tabs */ --tab-border-width: 1px; --tab-padding: 8px 8px 8px 8px; /* Padding inside the tabs */ --tab-margin: 2px 3px 0 2px; /* top | right | bottom | left */ --scrollbar-background: white; --scrollbar-thumb-background: var(--color-medium-slate-gray); --scrollbar-border-color: var(--color-medium-slate-gray); --more-button-color: var(--color-logo-blue); --tree-selected-background: var(--color-accent-blue); /*~dr var(--color-light-yellow); */ --tree-selected-color: var(--color-black); --tree-border-width-left: 0; --tree-border-width-right: 0 0 0 1px; /* right element has a left border only - a vertical divider line */ --tree-border-style: solid; --tree-border-color: var(--border-color); --tree-location-font-weight: normal; --tree-node-font-weight: normal; --panel-background-color: white; --panel-border-color: var(--color-medium-blue); --panel-border-radius: 3px; --panel-border-width: 1px; --table-border-color: #ddd; --title-span-color: var(--color-logo-blue); --user-badge-background: var(--color-logo-blue); --copyright-text: "Copyright (C) 2026 BSC Softworks" /* TODO make brandable */ } /* =================================== */ .theme-light { /* by default, use root parameters for light mode */ --color-scheme: light; } .theme-dark { --color-scheme: dark; --background-color: #3a3a3a; --border-color: #444; --focus-border-color: var(--color-orange); --focus-readonly-color: var(--color-logo-blue); --text-color: var(--color-white); --text-title-color: var(--color-medium-blue); --header-logo-image: url('../themes/logo-bsc-dark.png'); /* TODO make brandable */ --header-app-chooser-image: url('../themes/app-chooser-dark.png'); --header-background: #3a3a3a; --header-text-color: var(--color-white); --header-title-color: var(--color-white); --header-title-font: bold 24px/1.2 'Inter', 'Helvetica', sans-serif; --header-dropdown-background: #444; --header-dropdown-text-color: var(--color-white); --header-dropdown-border: 1px solid grey; --header-dropdown-hover: var(--color-darkest-green); --footer-background: #3a3a3a; --footer-text-color: var(--color-medium-slate-gray); --error-color: var(--color-dark-pink); --link-color: var(--color-medium-blue); --button-background: #333; --button-text-color: var(--color-white); --button-border-color: var(--color-medium-slate-gray); /* #fff; */ --button-padding: 5px 10px; --button-radius: 5px; --button-border: 1px solid var(--button-border-color); --button-disabled-background: #333; --button-disabled-text-color: grey; --button-hover-text-color: var(--color-medium-blue); --button-hover-border-color: var(--color-dark-blue); --input-background: #222; --input-text-color: #e0e0e0; --input-padding: 5px; --input-border: 1px solid var(--border-color); --input-disabled-background: #222; --input-disabled-text-color: var(--color-medium-slate-gray); --textarea-background: black; --textarea-text-color: white; --textarea-padding: 5px; --textarea-border: 1px solid var(--border-color); --textarea-radius: 5px; --dialog-background: #333; --dialog-text-color: #fff; --dialog-border-color: #ccc; --dropzone-background: var(--color-dark-green); --dropzone-border: 2px solid var(--color-darkest-green); --dropzone-text-color: var(--color-white); --select-background: #444; --select-text-color: white; --select-border-color: #888; --select-focus-background-color: #444; --card-background: var(--color-black); --card-shadow: rgba(0, 0, 0, 0.0); --card-radius: 0; --checkbox-mark-color: var(--color-logo-blue); --row-odd-color: #444; /* Darker gray for dark theme */ --row-even-color: #555; /* Slightly lighter gray for dark theme */ --row-selected-color: var(--color-dark-green); /* Green highlight for selected row */ --tab-background: #6b6b6b; /* Inactive tab background */ --tab-active-background: var(--color-black); /* #1e1e1e; Active tab background */ --tab-hover-background: var(--color-medium-blue); /* #333; Hover effect for tabs */ --tab-hover-color: #ddd; /* Hover effect for tabs */ --tab-hover-text-color: var(--color-black); --tab-text-color: #ccc; /* Inactive tab text color */ --tab-active-text-color: #fff; /* Active tab text color */ --tab-border-color: var(--color-darkest-gray) var(--color-darkest-gray) transparent var(--color-darkest-gray); /* Border color between tabs */ --tab-active-border-color: var(--color-medium-slate-gray) var(--color-medium-slate-gray) transparent var(--color-medium-slate-gray); --scrollbar-background: var(--color-black); --scrollbar-thumb-background: var(--color-medium-slate-gray); --scrollbar-border-color: var(--color-medium-slate-gray); --more-button-color: var(--color-medium-blue); --tree-border-width-left: 0; --tree-border-width-right: 0 0 0 1px; /* right element has a left border only - a vertical divider line */ --tree-location-font-weight: normal; --tree-node-font-weight: normal; --panel-background-color: var(--color-black); --panel-border-color: var(--color-medium-slate-gray); --table-border-color: #555; /* var(--color-darkest-gray); */ --user-badge-background: var(--color-logo-blue); } /* ===== custom theme here ============================== */ /* TODO changing the brand logo/copyright when changing to the dark theme was only for demo purposes */ /* TODO actual "branding" is a work in progress... it will *not* be done by changing themes! */ .theme-dark.brand-bsc { --header-logo-image: url('../themes/logo-bsc-dark.png'); /* TODO make brandable */ --copyright-text: "Copyright (C) 2026 BSC Softworks" } .brand-bsc { --header-logo-image: url('../themes/logo-bsc-light.png'); /* TODO make brandable */ --copyright-text: "Copyright (C) 2026 BSC Softworks" }