Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add darkOverlay in theme

Browse Source
This commit is contained in:
Zoe Roux 2023-10-18 22:55:11 +02:00
parent 2ce8e7f866
commit 9ba7cb1ba5
4 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/packages/primitives/src/image/index.tsx
View File

@ -92,7 +92,7 @@ export const ImageBackground = <AsProps = ViewProps,>({
<LinearGradient
start={{ x: 0, y: 0.25 }}
end={{ x: 0, y: 1 }}
colors={["transparent", alpha(theme.colors.black, 0.6)]}
colors={["transparent", theme.darkOverlay]}
{...css(
{
position: "absolute",

4
front/packages/primitives/src/themes/catppuccin.ts
View File

@ -18,7 +18,7 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/
import { ThemeBuilder } from "./theme";
import { ThemeBuilder, alpha } from "./theme";
// Ref: https://github.com/catppuccin/catppuccin
export const catppuccin: ThemeBuilder = {
@ -26,6 +26,7 @@ export const catppuccin: ThemeBuilder = {
// Catppuccin latte
overlay0: "#9ca0b0",
overlay1: "#7c7f93",
darkOverlay: "#4c4f6999",
link: "#1e66f5",
default: {
background: "#eff1f5",
@ -56,6 +57,7 @@ export const catppuccin: ThemeBuilder = {
// Catppuccin mocha
overlay0: "#6c7086",
overlay1: "#9399b2",
darkOverlay: "#11111b99",
link: "#89b4fa",
default: {
background: "#1e1e2e",

1
front/packages/primitives/src/themes/theme.tsx
View File

@ -38,6 +38,7 @@ type Mode = {
mode: "light" | "dark" | "auto";
overlay0: Property.Color;
overlay1: Property.Color;
darkOverlay: Property.Color;
link: Property.Color;
contrast: Property.Color;
variant: Variant;

4
front/packages/ui/src/player/components/hover.tsx
View File

@ -96,7 +96,7 @@ export const Hover = ({
bottom: 0,
left: 0,
right: 0,
bg: (theme) => alpha(theme.colors.black, 0.6),
bg: (theme) => theme.darkOverlay,
flexDirection: "row",
padding: percent(1),
},
@ -176,7 +176,7 @@ export const Back = ({
top: 0,
left: 0,
right: 0,
bg: (theme) => alpha(theme.colors.black, 0.6),
bg: (theme) => theme.darkOverlay,
display: "flex",
flexDirection: "row",
alignItems: "center",