mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-12 22:25:24 +03:00
remove hideous and ugly themes
This commit is contained in:
parent
d2f88491b1
commit
6d6a58709b
@ -3,24 +3,16 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
|
|||||||
type Theme = "dark" | "light" | "system";
|
type Theme = "dark" | "light" | "system";
|
||||||
type ColorScheme =
|
type ColorScheme =
|
||||||
| "theme-blue"
|
| "theme-blue"
|
||||||
| "theme-gold"
|
|
||||||
| "theme-green"
|
| "theme-green"
|
||||||
| "theme-nature"
|
|
||||||
| "theme-netflix"
|
|
||||||
| "theme-nord"
|
| "theme-nord"
|
||||||
| "theme-orange"
|
|
||||||
| "theme-red"
|
| "theme-red"
|
||||||
| "theme-default";
|
| "theme-default";
|
||||||
|
|
||||||
// eslint-disable-next-line react-refresh/only-export-components
|
// eslint-disable-next-line react-refresh/only-export-components
|
||||||
export const colorSchemes: ColorScheme[] = [
|
export const colorSchemes: ColorScheme[] = [
|
||||||
"theme-blue",
|
"theme-blue",
|
||||||
"theme-gold",
|
|
||||||
"theme-green",
|
"theme-green",
|
||||||
"theme-nature",
|
|
||||||
"theme-netflix",
|
|
||||||
"theme-nord",
|
"theme-nord",
|
||||||
"theme-orange",
|
|
||||||
"theme-red",
|
"theme-red",
|
||||||
"theme-default",
|
"theme-default",
|
||||||
];
|
];
|
||||||
|
|||||||
@ -1,12 +1,8 @@
|
|||||||
@import "/themes/tailwind-base.css";
|
@import "/themes/tailwind-base.css";
|
||||||
@import "/themes/theme-default.css";
|
@import "/themes/theme-default.css";
|
||||||
@import "/themes/theme-blue.css";
|
@import "/themes/theme-blue.css";
|
||||||
@import "/themes/theme-gold.css";
|
|
||||||
@import "/themes/theme-green.css";
|
@import "/themes/theme-green.css";
|
||||||
@import "/themes/theme-nature.css";
|
|
||||||
@import "/themes/theme-netflix.css";
|
|
||||||
@import "/themes/theme-nord.css";
|
@import "/themes/theme-nord.css";
|
||||||
@import "/themes/theme-orange.css";
|
|
||||||
@import "/themes/theme-red.css";
|
@import "/themes/theme-red.css";
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@ -26,7 +22,7 @@
|
|||||||
|
|
||||||
@layer utilities {
|
@layer utilities {
|
||||||
.scrollbar-container {
|
.scrollbar-container {
|
||||||
@apply scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-border scrollbar-track-background_alt;
|
@apply scrollbar-thin scrollbar-track-background_alt scrollbar-thumb-border scrollbar-track-rounded-full scrollbar-thumb-rounded-full;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,59 +0,0 @@
|
|||||||
@layer base {
|
|
||||||
.theme-gold.light {
|
|
||||||
--background: 38 77% 88%;
|
|
||||||
--background-alt: 39 100% 85%;
|
|
||||||
--foreground: 16 43% 34%;
|
|
||||||
--muted: 28 46% 56%;
|
|
||||||
--muted-foreground: 16 43% 34%;
|
|
||||||
--popover: 38 77% 88%;
|
|
||||||
--popover-foreground: 16 43% 34%;
|
|
||||||
--border: 28 46% 56%;
|
|
||||||
--input: 28 46% 56%;
|
|
||||||
--card: 38 77% 88%;
|
|
||||||
--card-foreground: 16 43% 34%;
|
|
||||||
--primary: 28 46% 56%;
|
|
||||||
--primary-variant: 28 46% 46%;
|
|
||||||
--primary-foreground: 60 70% 90%;
|
|
||||||
--secondary: 39 100% 73%;
|
|
||||||
--secondary-foreground: 16 43% 34%;
|
|
||||||
--secondary-highlight: 39 100% 80%;
|
|
||||||
--accent: 39 100% 73%;
|
|
||||||
--accent-foreground: 16 43% 34%;
|
|
||||||
--destructive: 16 43% 34%;
|
|
||||||
--destructive-foreground: 38 77% 88%;
|
|
||||||
--warning: 45 100% 51%;
|
|
||||||
--warning-foreground: 16 43% 34%;
|
|
||||||
--ring: 28 46% 56%;
|
|
||||||
--selected: 39 100% 73%;
|
|
||||||
--selected-foreground: 16 43% 34%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-gold.dark {
|
|
||||||
--background: 28 46% 28%;
|
|
||||||
--background-alt: 28 46% 34%;
|
|
||||||
--foreground: 38 77% 88%;
|
|
||||||
--muted: 28 46% 56%;
|
|
||||||
--muted-foreground: 38 77% 88%;
|
|
||||||
--popover: 25 45% 34%;
|
|
||||||
--popover-foreground: 38 77% 88%;
|
|
||||||
--border: 28 46% 56%;
|
|
||||||
--input: 28 46% 56%;
|
|
||||||
--card: 16 43% 34%;
|
|
||||||
--card-foreground: 38 77% 88%;
|
|
||||||
--primary: 28 46% 50%;
|
|
||||||
--primary-variant: 28 46% 46%;
|
|
||||||
--primary-foreground: 60 70% 90%;
|
|
||||||
--secondary: 39 60% 63%;
|
|
||||||
--secondary-foreground: 28 50% 44%;
|
|
||||||
--secondary-highlight: 39 100% 65%;
|
|
||||||
--accent: 39 100% 52%;
|
|
||||||
--accent-foreground: 16 43% 34%;
|
|
||||||
--destructive: 38 77% 88%;
|
|
||||||
--destructive-foreground: 16 43% 34%;
|
|
||||||
--warning: 45 100% 51%;
|
|
||||||
--warning-foreground: 16 43% 34%;
|
|
||||||
--ring: 28 46% 56%;
|
|
||||||
--selected: 39 100% 52%;
|
|
||||||
--selected-foreground: 16 43% 34%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
@layer base {
|
|
||||||
.theme-nature.light {
|
|
||||||
--background: 70 30% 92%;
|
|
||||||
--background-alt: 58 45% 89%;
|
|
||||||
--foreground: 187 33% 43%;
|
|
||||||
--muted: 70 20% 68%;
|
|
||||||
--muted-foreground: 187 33% 43%;
|
|
||||||
--popover: 58 45% 83%;
|
|
||||||
--popover-foreground: 187 33% 43%;
|
|
||||||
--border: 93 28% 56%;
|
|
||||||
--input: 93 28% 56%;
|
|
||||||
--card: 58 65% 83%;
|
|
||||||
--card-foreground: 187 33% 43%;
|
|
||||||
--primary: 93 28% 56%;
|
|
||||||
--primary-variant: 93 28% 46%;
|
|
||||||
--primary-foreground: 58 65% 83%;
|
|
||||||
--secondary: 70 20% 78%;
|
|
||||||
--secondary-foreground: 187 33% 43%;
|
|
||||||
--secondary-highlight: 70 30% 75%;
|
|
||||||
--accent: 70 20% 68%;
|
|
||||||
--accent-foreground: 187 33% 43%;
|
|
||||||
--destructive: 187 33% 43%;
|
|
||||||
--destructive-foreground: 58 65% 83%;
|
|
||||||
--warning: 45 100% 51%;
|
|
||||||
--warning-foreground: 187 33% 43%;
|
|
||||||
--ring: 93 28% 56%;
|
|
||||||
--selected: 70 20% 68%;
|
|
||||||
--selected-foreground: 187 33% 43%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-nature.dark {
|
|
||||||
--background: 187 33% 43%;
|
|
||||||
--background-alt: 187 33% 33%;
|
|
||||||
--foreground: 58 65% 83%;
|
|
||||||
--muted: 70 20% 68%;
|
|
||||||
--muted-foreground: 58 65% 83%;
|
|
||||||
--popover: 187 33% 43%;
|
|
||||||
--popover-foreground: 58 65% 83%;
|
|
||||||
--border: 93 28% 56%;
|
|
||||||
--input: 93 28% 56%;
|
|
||||||
--card: 187 33% 43%;
|
|
||||||
--card-foreground: 58 65% 83%;
|
|
||||||
--primary: 93 38% 36%;
|
|
||||||
--primary-variant: 93 28% 46%;
|
|
||||||
--primary-foreground: 187 33% 43%;
|
|
||||||
--secondary: 70 20% 58%;
|
|
||||||
--secondary-foreground: 58 65% 83%;
|
|
||||||
--secondary-highlight: 70 30% 60%;
|
|
||||||
--accent: 70 20% 68%;
|
|
||||||
--accent-foreground: 58 65% 83%;
|
|
||||||
--destructive: 58 65% 83%;
|
|
||||||
--destructive-foreground: 187 33% 43%;
|
|
||||||
--warning: 45 100% 51%;
|
|
||||||
--warning-foreground: 187 33% 43%;
|
|
||||||
--ring: 93 28% 56%;
|
|
||||||
--selected: 70 20% 68%;
|
|
||||||
--selected-foreground: 58 65% 83%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
@layer base {
|
|
||||||
.theme-netflix.light {
|
|
||||||
--background: 0 0% 100%;
|
|
||||||
--background-alt: 0 0% 96%;
|
|
||||||
--foreground: 0 0% 0%;
|
|
||||||
--muted: 0 0% 68%;
|
|
||||||
--muted-foreground: 0 0% 0%;
|
|
||||||
--popover: 0 0% 95%;
|
|
||||||
--popover-foreground: 0 0% 0%;
|
|
||||||
--border: 0 68% 39%;
|
|
||||||
--input: 0 68% 39%;
|
|
||||||
--card: 0 0% 95%;
|
|
||||||
--card-foreground: 0 0% 0%;
|
|
||||||
--primary: 0 100% 44%;
|
|
||||||
--primary-variant: 0 100% 34%;
|
|
||||||
--primary-foreground: 0 0% 100%;
|
|
||||||
--secondary: 0 0% 80%;
|
|
||||||
--secondary-foreground: 0 0% 100%;
|
|
||||||
--secondary-highlight: 0 0% 10%;
|
|
||||||
--accent: 0 100% 50%;
|
|
||||||
--accent-foreground: 0 0% 0%;
|
|
||||||
--destructive: 0 68% 39%;
|
|
||||||
--destructive-foreground: 0 0% 100%;
|
|
||||||
--warning: 45 100% 51%;
|
|
||||||
--warning-foreground: 0 0% 0%;
|
|
||||||
--ring: 0 100% 44%;
|
|
||||||
--selected: 0 100% 44%;
|
|
||||||
--selected-foreground: 0 0% 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-netflix.dark {
|
|
||||||
--background: 0 0% 0%;
|
|
||||||
--background-alt: 0 0% 5%;
|
|
||||||
--foreground: 0 0% 100%;
|
|
||||||
--muted: 0 0% 50%;
|
|
||||||
--muted-foreground: 0 0% 100%;
|
|
||||||
--popover: 0 0% 5%;
|
|
||||||
--popover-foreground: 0 0% 100%;
|
|
||||||
--border: 0 68% 39%;
|
|
||||||
--input: 0 68% 39%;
|
|
||||||
--card: 0 0% 5%;
|
|
||||||
--card-foreground: 0 0% 100%;
|
|
||||||
--primary: 0 70% 44%;
|
|
||||||
--primary-variant: 0 100% 34%;
|
|
||||||
--primary-foreground: 0 0% 0%;
|
|
||||||
--secondary: 0 0% 20%;
|
|
||||||
--secondary-foreground: 0 0% 40%;
|
|
||||||
--secondary-highlight: 0 0% 90%;
|
|
||||||
--accent: 0 100% 50%;
|
|
||||||
--accent-foreground: 0 0% 100%;
|
|
||||||
--destructive: 0 68% 39%;
|
|
||||||
--destructive-foreground: 0 0% 100%;
|
|
||||||
--warning: 45 100% 51%;
|
|
||||||
--warning-foreground: 0 0% 0%;
|
|
||||||
--ring: 0 100% 44%;
|
|
||||||
--selected: 0 100% 44%;
|
|
||||||
--selected-foreground: 0 0% 0%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
@layer base {
|
|
||||||
.theme-orange.light {
|
|
||||||
--background: 24 50% 98.3%;
|
|
||||||
--background-alt: 30 50% 96%;
|
|
||||||
--foreground: 20 14.3% 4.1%;
|
|
||||||
--card: 0 0% 100%;
|
|
||||||
--card-foreground: 20 14.3% 4.1%;
|
|
||||||
--popover: 24 30% 95%;
|
|
||||||
--popover-foreground: 24 24.3% 14.1%;
|
|
||||||
--primary: 24.6 55% 53.1%;
|
|
||||||
--primary-variant: 24.6 55% 43.1%;
|
|
||||||
--primary-foreground: 60 9.1% 97.8%;
|
|
||||||
--secondary: 24 54.8% 95.9%;
|
|
||||||
--secondary-foreground: 24 79.8% 60%;
|
|
||||||
--secondary-highlight: 30 50% 92%;
|
|
||||||
--muted: 24 4.8% 75.9%;
|
|
||||||
--muted-foreground: 25 25.3% 44.7%;
|
|
||||||
--accent: 24 14.8% 95.9%;
|
|
||||||
--accent-foreground: 24 14.8% 10%;
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
|
||||||
--destructive-foreground: 60 9.1% 97.8%;
|
|
||||||
--warning: 45 100% 51%;
|
|
||||||
--warning-foreground: 20 14.3% 4.1%;
|
|
||||||
--border: 20 5.9% 90%;
|
|
||||||
--input: 24 25.9% 90%;
|
|
||||||
--ring: 24.6 95% 53.1%;
|
|
||||||
--selected: 24.6 85% 53.1%;
|
|
||||||
--selected-foreground: 60 9.1% 97.8%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-orange.dark {
|
|
||||||
--background: 20 14.3% 4.1%;
|
|
||||||
--background-alt: 20 14.3% 9.1%;
|
|
||||||
--foreground: 60 9.1% 97.8%;
|
|
||||||
--card: 20 14.3% 4.1%;
|
|
||||||
--card-foreground: 60 9.1% 97.8%;
|
|
||||||
--popover: 20 14.3% 4.1%;
|
|
||||||
--popover-foreground: 60 9.1% 97.8%;
|
|
||||||
--primary: 20.5 90.2% 68.2%;
|
|
||||||
--primary-variant: 20.5 90.2% 58.2%;
|
|
||||||
--primary-foreground: 60 9.1% 97.8%;
|
|
||||||
--secondary: 12 6.5% 15.1%;
|
|
||||||
--secondary-foreground: 20 49.1% 57.8%;
|
|
||||||
--secondary-highlight: 12 6.5% 25.1%;
|
|
||||||
--muted: 20.5 26.5% 15.1%;
|
|
||||||
--muted-foreground: 20 25.4% 53.9%;
|
|
||||||
--accent: 20 16.5% 15.1%;
|
|
||||||
--accent-foreground: 20 19.1% 79.8%;
|
|
||||||
--destructive: 0 72.2% 50.6%;
|
|
||||||
--destructive-foreground: 60 9.1% 97.8%;
|
|
||||||
--warning: 45 100% 51%;
|
|
||||||
--warning-foreground: 60 9.1% 97.8%;
|
|
||||||
--border: 12 6.5% 15.1%;
|
|
||||||
--input: 12 6.5% 15.1%;
|
|
||||||
--ring: 20.5 90.2% 48.2%;
|
|
||||||
--selected: 20.5 90.2% 38.2%;
|
|
||||||
--selected-foreground: 60 9.1% 97.8%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user