mirror of
https://github.com/PhotonVision/photonvision
synced 2026-06-19 00:41:41 +00:00
b43d0dde20
Adds support for user-created custom themes. Custom theme interface is tucked into the global settings in a non-invasive manner to avoid major design changes. Builds on the theme structure established by the dark theme update. <img width="1486" height="953" alt="image" src="https://github.com/user-attachments/assets/716bcfc7-af74-41dc-b14a-cfc2f2d2caa9" /> <img width="1486" height="956" alt="image" src="https://github.com/user-attachments/assets/a00f9620-0b1d-4f67-b010-e94dda5dc212" /> Here's a few examples of what teams could do, using a few color schemes from local teams. Imagine the possibilities! <img width="1485" height="951" alt="image" src="https://github.com/user-attachments/assets/c3da37b8-f6be-4152-81e0-533297f517fc" /> <img width="1483" height="951" alt="image" src="https://github.com/user-attachments/assets/0d453f7a-cf6f-4c27-97db-603b54c1f73e" /> <img width="1485" height="952" alt="image" src="https://github.com/user-attachments/assets/bf8c7770-e60d-4875-9580-ed7e54e089f4" /> <img width="1484" height="952" alt="image" src="https://github.com/user-attachments/assets/326d89e6-dd6e-4e05-a9fa-c9fc6f880847" /> <img width="1482" height="951" alt="image" src="https://github.com/user-attachments/assets/eb5a2a5d-c103-482c-a62a-5ccd5ba21cc5" /> <img width="1482" height="950" alt="image" src="https://github.com/user-attachments/assets/4831ca56-f322-4345-97af-8963ae8539b1" /> Looking for high contrast? Just moments away: <img width="1484" height="949" alt="image" src="https://github.com/user-attachments/assets/7ffc65c6-7000-4566-b4f0-c8247f75fb3d" />
73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import "vuetify/styles";
|
|
import("@mdi/font/css/materialdesignicons.css");
|
|
import type { ThemeDefinition } from "vuetify/lib/composables/theme";
|
|
import { createVuetify } from "vuetify";
|
|
|
|
const CommonColors = {
|
|
photonBlue: "#006492",
|
|
photonYellow: "#FFD843",
|
|
lightBlue: "#39A4D5",
|
|
darkGray: "#151515",
|
|
gray: "#1c232c",
|
|
lightGray: "#232C37"
|
|
};
|
|
|
|
export const DarkTheme: ThemeDefinition = {
|
|
dark: true,
|
|
colors: {
|
|
background: CommonColors.darkGray,
|
|
sidebar: CommonColors.darkGray,
|
|
|
|
surface: CommonColors.gray,
|
|
primary: CommonColors.lightBlue,
|
|
secondary: CommonColors.photonYellow,
|
|
accent: CommonColors.photonBlue,
|
|
|
|
toggle: CommonColors.photonBlue,
|
|
logsBackground: CommonColors.darkGray,
|
|
|
|
buttonActive: CommonColors.photonYellow,
|
|
buttonPassive: CommonColors.lightBlue,
|
|
|
|
"surface-variant": "#485b70",
|
|
"on-surface-variant": "#f0f0f0",
|
|
|
|
error: "#ff2e2e",
|
|
info: "#2196F3",
|
|
success: "#4CAF50",
|
|
warning: "#FFC107"
|
|
}
|
|
};
|
|
|
|
export const LightTheme: ThemeDefinition = {
|
|
dark: false,
|
|
colors: {
|
|
background: CommonColors.lightGray,
|
|
sidebar: CommonColors.photonBlue,
|
|
|
|
surface: CommonColors.photonBlue,
|
|
primary: CommonColors.photonYellow,
|
|
secondary: CommonColors.lightBlue,
|
|
accent: CommonColors.photonYellow,
|
|
|
|
toggle: CommonColors.lightBlue,
|
|
logsBackground: CommonColors.lightGray,
|
|
|
|
buttonActive: CommonColors.photonYellow,
|
|
buttonPassive: CommonColors.lightBlue,
|
|
|
|
"surface-variant": "#8f8f8fff",
|
|
|
|
error: "#b80000",
|
|
info: "#2196F3",
|
|
success: "#4CAF50",
|
|
warning: "#FFC107"
|
|
},
|
|
variables: { "medium-emphasis-opacity": 1, "high-emphasis-opacity": 1 }
|
|
};
|
|
|
|
export default createVuetify({
|
|
theme: { defaultTheme: "LightTheme", themes: { LightTheme: LightTheme, DarkTheme: DarkTheme } },
|
|
display: { thresholds: { md: 1460, lg: 2000 } }
|
|
});
|