From 710a89d3431c8860ea18ad16fb6adc4f283aa6c4 Mon Sep 17 00:00:00 2001 From: ThatOneCalculator Date: Sun, 19 Mar 2023 18:44:08 -0700 Subject: [PATCH] feat: :sparkles: more themes! --- packages/client/src/scripts/theme.ts | 6 ++ .../src/themes/d-catppuccin-frappe.json5 | 94 +++++++++++++++++++ .../src/themes/d-catppuccin-mocha.json5 | 94 +++++++++++++++++++ packages/client/src/themes/d-gruvbox.json5 | 30 ++++++ packages/client/src/themes/d-nord.json5 | 94 +++++++++++++++++++ packages/client/src/themes/l-gruvbox.json5 | 30 ++++++ packages/client/src/themes/l-nord.json5 | 94 +++++++++++++++++++ 7 files changed, 442 insertions(+) create mode 100644 packages/client/src/themes/d-catppuccin-frappe.json5 create mode 100644 packages/client/src/themes/d-catppuccin-mocha.json5 create mode 100644 packages/client/src/themes/d-gruvbox.json5 create mode 100644 packages/client/src/themes/d-nord.json5 create mode 100644 packages/client/src/themes/l-gruvbox.json5 create mode 100644 packages/client/src/themes/l-nord.json5 diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts index 800267931..383deb34c 100644 --- a/packages/client/src/scripts/theme.ts +++ b/packages/client/src/scripts/theme.ts @@ -24,6 +24,8 @@ export const getBuiltinThemes = () => [ "l-rosepinedawn", "l-light", + "l-nord", + "l-gruvbox", "l-coffee", "l-apricot", "l-rainy", @@ -35,6 +37,10 @@ export const getBuiltinThemes = () => "d-rosepine", "d-rosepinemoon", "d-dark", + "d-nord", + "d-gruvbox", + "d-catppuccin-frappe", + "d-catppuccin-mocha", "d-persimmon", "d-astro", "d-future", diff --git a/packages/client/src/themes/d-catppuccin-frappe.json5 b/packages/client/src/themes/d-catppuccin-frappe.json5 new file mode 100644 index 000000000..ecb464bd5 --- /dev/null +++ b/packages/client/src/themes/d-catppuccin-frappe.json5 @@ -0,0 +1,94 @@ +{ + id: 'ffcd3328-5c57-4ca3-9dac-4580cbf7742f', + base: 'dark', + name: 'Catppuccin frappe flamingo', + props: { + X2: ':darken<2<@panel', + X3: 'rgba(255, 255, 255, 0.05)', + X4: 'rgba(255, 255, 255, 0.1)', + X5: 'rgba(255, 255, 255, 0.05)', + X6: 'rgba(255, 255, 255, 0.15)', + X7: 'rgba(255, 255, 255, 0.05)', + X8: ':lighten<5<@accent', + X9: ':darken<5<@accent', + bg: '#232634', + fg: '#c6d0f5', + X10: ':alpha<0.4<@accent', + X11: 'rgba(0, 0, 0, 0.3)', + X12: 'rgba(255, 255, 255, 0.1)', + X13: 'rgba(255, 255, 255, 0.15)', + X14: ':alpha<0.5<@navBg', + X15: ':alpha<0<@panel', + X16: ':alpha<0.7<@panel', + X17: ':alpha<0.8<@bg', + cwBg: '#51576d', + cwFg: '#b5bfe2', + link: '#8caaee', + warn: '#ef9f76', + badge: '#8caaee', + error: '#e78284', + focus: ':alpha<0.3<@accent', + navBg: '@panel', + navFg: '@fg', + panel: ':lighten<3<@bg', + popup: ':lighten<3<@panel', + accent: '#eebebe', + header: ':alpha<0.7<@panel', + infoBg: '#414559', + infoFg: '#a5adce', + renote: '#8caaee', + shadow: 'rgba(0, 0, 0, 0.3)', + divider: 'rgba(255, 255, 255, 0.1)', + hashtag: '#85c1dc', + mention: '@accent', + modalBg: 'rgba(0, 0, 0, 0.5)', + success: '#a6d189', + buttonBg: 'rgba(255, 255, 255, 0.05)', + switchBg: 'rgba(255, 255, 255, 0.15)', + acrylicBg: ':alpha<0.5<@bg', + cwHoverBg: '#626880', + indicator: '@accent', + mentionMe: '@mention', + messageBg: '@bg', + navActive: '@accent', + accentedBg: ':alpha<0.15<@accent', + codeNumber: '#a6d189', + codeString: '#ef9f76', + fgOnAccent: '#303446', + infoWarnBg: '#414559', + infoWarnFg: '#b5bfe2', + navHoverFg: ':lighten<17<@fg', + swutchOnBg: '@accentedBg', + swutchOnFg: '@accent', + codeBoolean: '@accent', + dateLabelFg: '@fg', + deckDivider: '#737994', + inputBorder: 'rgba(255, 255, 255, 0.1)', + panelBorder: 'solid 1px var(--divider)', + swutchOffBg: 'rgba(255, 255, 255, 0.1)', + swutchOffFg: '@fg', + accentDarken: ':darken<10<@accent', + acrylicPanel: ':alpha<0.5<@panel', + navIndicator: '@indicator', + windowHeader: ':alpha<0.85<@panel', + accentLighten: ':lighten<10<@accent', + buttonHoverBg: 'rgba(255, 255, 255, 0.1)', + driveFolderBg: ':alpha<0.3<@accent', + fgHighlighted: ':lighten<3<@fg', + fgTransparent: ':alpha<0.5<@fg', + panelHeaderBg: ':lighten<3<@panel', + panelHeaderFg: '@fg', + buttonGradateA: '@accent', + buttonGradateB: ':hue<20<@accent', + htmlThemeColor: '@bg', + panelHighlight: ':lighten<3<@panel', + listItemHoverBg: 'rgba(255, 255, 255, 0.03)', + scrollbarHandle: 'rgba(255, 255, 255, 0.2)', + inputBorderHover: 'rgba(255, 255, 255, 0.2)', + wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', + fgTransparentWeak: ':alpha<0.75<@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', + scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', + }, + author: 'somebody ¯_(ツ)_/¯', +} diff --git a/packages/client/src/themes/d-catppuccin-mocha.json5 b/packages/client/src/themes/d-catppuccin-mocha.json5 new file mode 100644 index 000000000..6c34a49ca --- /dev/null +++ b/packages/client/src/themes/d-catppuccin-mocha.json5 @@ -0,0 +1,94 @@ +{ + id: 'd413f41f-a489-48be-9e20-3532ffbb4363', + base: 'dark', + name: 'Catppuccin mocha flamingo', + props: { + X2: ':darken<2<@panel', + X3: 'rgba(255, 255, 255, 0.05)', + X4: 'rgba(255, 255, 255, 0.1)', + X5: 'rgba(255, 255, 255, 0.05)', + X6: 'rgba(255, 255, 255, 0.15)', + X7: 'rgba(255, 255, 255, 0.05)', + X8: ':lighten<5<@accent', + X9: ':darken<5<@accent', + bg: '#11111b', + fg: '#cdd6f4', + X10: ':alpha<0.4<@accent', + X11: 'rgba(0, 0, 0, 0.3)', + X12: 'rgba(255, 255, 255, 0.1)', + X13: 'rgba(255, 255, 255, 0.15)', + X14: ':alpha<0.5<@navBg', + X15: ':alpha<0<@panel', + X16: ':alpha<0.7<@panel', + X17: ':alpha<0.8<@bg', + cwBg: '#45475a', + cwFg: '#bac2de', + link: '#89b4fa', + warn: '#fab387', + badge: '#89b4fa', + error: '#f38ba8', + focus: ':alpha<0.3<@accent', + navBg: '@panel', + navFg: '@fg', + panel: ':lighten<3<@bg', + popup: ':lighten<3<@panel', + accent: '#f2cdcd', + header: ':alpha<0.7<@panel', + infoBg: '#313244', + infoFg: '#a6adc8', + renote: '#89b4fa', + shadow: 'rgba(0, 0, 0, 0.3)', + divider: 'rgba(255, 255, 255, 0.1)', + hashtag: '#74c7ec', + mention: '@accent', + modalBg: 'rgba(0, 0, 0, 0.5)', + success: '#a6e3a1', + buttonBg: 'rgba(255, 255, 255, 0.05)', + switchBg: 'rgba(255, 255, 255, 0.15)', + acrylicBg: ':alpha<0.5<@bg', + cwHoverBg: '#585b70', + indicator: '@accent', + mentionMe: '@mention', + messageBg: '@bg', + navActive: '@accent', + accentedBg: ':alpha<0.15<@accent', + codeNumber: '#a6e3a1', + codeString: '#fab387', + fgOnAccent: '#1e1e2e', + infoWarnBg: '#313244', + infoWarnFg: '#bac2de', + navHoverFg: ':lighten<17<@fg', + swutchOnBg: '@accentedBg', + swutchOnFg: '@accent', + codeBoolean: '@accent', + dateLabelFg: '@fg', + deckDivider: '#6c7086', + inputBorder: 'rgba(255, 255, 255, 0.1)', + panelBorder: 'solid 1px var(--divider)', + swutchOffBg: 'rgba(255, 255, 255, 0.1)', + swutchOffFg: '@fg', + accentDarken: ':darken<10<@accent', + acrylicPanel: ':alpha<0.5<@panel', + navIndicator: '@indicator', + windowHeader: ':alpha<0.85<@panel', + accentLighten: ':lighten<10<@accent', + buttonHoverBg: 'rgba(255, 255, 255, 0.1)', + driveFolderBg: ':alpha<0.3<@accent', + fgHighlighted: ':lighten<3<@fg', + fgTransparent: ':alpha<0.5<@fg', + panelHeaderBg: ':lighten<3<@panel', + panelHeaderFg: '@fg', + buttonGradateA: '@accent', + buttonGradateB: ':hue<20<@accent', + htmlThemeColor: '@bg', + panelHighlight: ':lighten<3<@panel', + listItemHoverBg: 'rgba(255, 255, 255, 0.03)', + scrollbarHandle: 'rgba(255, 255, 255, 0.2)', + inputBorderHover: 'rgba(255, 255, 255, 0.2)', + wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', + fgTransparentWeak: ':alpha<0.75<@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', + scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', + }, + author: 'somebody ¯_(ツ)_/¯', +} diff --git a/packages/client/src/themes/d-gruvbox.json5 b/packages/client/src/themes/d-gruvbox.json5 new file mode 100644 index 000000000..3386308a3 --- /dev/null +++ b/packages/client/src/themes/d-gruvbox.json5 @@ -0,0 +1,30 @@ +{ + id: '256a2e52-440f-4a00-8a76-c93501354dfb', + base: 'dark', + desc: 'Misskey gruvbox-dark-medium theme. Inspired by https://github.com/morhetz/gruvbox', + name: 'misskey-gruvbox-dark-medium', + props: { + bg: '#282828', + fg: '#ebdbb2', + link: '#b16286', + warn: '#d65d0e', + badge: '#458588', + error: '#fb4934', + navBg: '#32302f', + panel: '#32302f', + accent: '#98971a', + header: ':alpha<0.7<@panel', + renote: '@accent', + divider: '#7c6f64', + hashtag: '#458588', + mention: '#98971a', + success: '#98971a', + mentionMe: '#fb4934', + fgHighlighted: '#fbf1c7', + panelHeaderBg: '@panel', + buttonGradateA: '#98971a', + buttonGradateB: '#98971a', + panelHeaderDivider: '@divider', + }, + author: '@razzlom@quietplace.xyz', +} diff --git a/packages/client/src/themes/d-nord.json5 b/packages/client/src/themes/d-nord.json5 new file mode 100644 index 000000000..7e8b4f4d0 --- /dev/null +++ b/packages/client/src/themes/d-nord.json5 @@ -0,0 +1,94 @@ +{ + id: 'dddbc0c6-af2c-46f8-b8f3-05964adcde0b', + base: 'dark', + desc: 'Nord: an arctic, north-bluish color palette', + name: 'Nord Dark', + props: { + X2: ':darken<2<@panel', + X3: 'rgba(255, 255, 255, 0.05)', + X4: 'rgba(255, 255, 255, 0.1)', + X5: 'rgba(255, 255, 255, 0.05)', + X6: 'rgba(255, 255, 255, 0.15)', + X7: 'rgba(255, 255, 255, 0.05)', + X8: ':lighten<5<@accent', + X9: ':darken<5<@accent', + bg: '#2e3440', + fg: '#eceff4', + X10: ':alpha<0.4<@accent', + X11: 'rgba(0, 0, 0, 0.3)', + X12: 'rgba(255, 255, 255, 0.1)', + X13: 'rgba(255, 255, 255, 0.15)', + X14: ':alpha<0.5<@navBg', + X15: ':alpha<0<@panel', + X16: ':alpha<0.7<@panel', + X17: ':alpha<0.8<@bg', + cwBg: '#4c566a', + cwFg: '#393f4f', + link: '#b48ead', + warn: '#d08770', + badge: '#d08770', + error: '#bf616a', + focus: ':alpha<0.3<@accent', + navBg: '@panel', + navFg: '@fg', + panel: ':lighten<3<@bg', + popup: ':lighten<3<@panel', + accent: '#81a1c1', + header: ':alpha<0.7<@panel', + infoBg: '#4c566a', + infoFg: '#d08770', + renote: '#ebcb8b', + shadow: 'rgba(0, 0, 0, 0.3)', + divider: 'rgba(255, 255, 255, 0.1)', + hashtag: '#a3be8c', + mention: '@accent', + modalBg: 'rgba(0, 0, 0, 0.5)', + success: '#a3be8c', + buttonBg: 'rgba(255, 255, 255, 0.05)', + switchBg: 'rgba(255, 255, 255, 0.15)', + acrylicBg: ':alpha<0.5<@bg', + cwHoverBg: '#707b97', + indicator: '@accent', + mentionMe: '@mention', + messageBg: '@bg', + navActive: '@accent', + accentedBg: ':alpha<0.15<@accent', + codeNumber: '#a3be8c', + codeString: '#b48ead', + fgOnAccent: '#eceff4', + infoWarnBg: '#4c566a', + infoWarnFg: '#bf616a', + navHoverFg: ':lighten<17<@fg', + swutchOnBg: '@accentedBg', + swutchOnFg: '@accent', + codeBoolean: '#ebcb8b', + dateLabelFg: '@fg', + inputBorder: 'rgba(255, 255, 255, 0.1)', + panelBorder: '" solid 1px var(--divider)', + swutchOffBg: 'rgba(255, 255, 255, 0.1)', + swutchOffFg: '@fg', + accentDarken: '#5e81ac', + acrylicPanel: ':alpha<0.5<@panel', + navIndicator: '@indicator', + windowHeader: ':alpha<0.85<@panel', + accentLighten: '#88c0d0', + buttonHoverBg: 'rgba(255, 255, 255, 0.1)', + driveFolderBg: ':alpha<0.3<@accent', + fgHighlighted: ':lighten<3<@fg', + fgTransparent: ':alpha<0.5<@fg', + panelHeaderBg: ':lighten<3<@panel', + panelHeaderFg: '@fg', + buttonGradateA: '@accent', + buttonGradateB: '#8fbcbb', + htmlThemeColor: '@bg', + panelHighlight: ':lighten<3<@panel', + listItemHoverBg: 'rgba(255, 255, 255, 0.03)', + scrollbarHandle: 'rgba(255, 255, 255, 0.2)', + inputBorderHover: 'rgba(255, 255, 255, 0.2)', + wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', + fgTransparentWeak: ':alpha<0.75<@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', + scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', + }, + author: '@thatonecalculator@stop.voring.me', +} diff --git a/packages/client/src/themes/l-gruvbox.json5 b/packages/client/src/themes/l-gruvbox.json5 new file mode 100644 index 000000000..5ca6b3cd7 --- /dev/null +++ b/packages/client/src/themes/l-gruvbox.json5 @@ -0,0 +1,30 @@ +{ + id: '9be7b20e-58b4-4bd2-8b1d-49d41a676685', + base: 'light', + desc: 'Misskey gruvbox-light-medium theme. Inspired by https://github.com/morhetz/gruvbox', + name: 'misskey-gruvbox-light-medium', + props: { + bg: '#fbf1c7', + fg: '#3c3836', + link: '#b16286', + warn: '#d65d0e', + badge: '#458588', + error: '#fb4934', + navBg: '#f9f5c7', + panel: '#f9f5c7', + accent: '#98971a', + header: ':alpha<0.7<@panel', + renote: '@accent', + divider: '#7c6f64', + hashtag: '#458588', + mention: '#98971a', + success: '#98971a', + mentionMe: '#9d0006', + fgHighlighted: '#fbf1c7', + panelHeaderBg: '@panel', + buttonGradateA: '#98971a', + buttonGradateB: '#98971a', + panelHeaderDivider: '@divider', + }, + author: '@razzlom@quietplace.xyz', +} diff --git a/packages/client/src/themes/l-nord.json5 b/packages/client/src/themes/l-nord.json5 new file mode 100644 index 000000000..e359f31f4 --- /dev/null +++ b/packages/client/src/themes/l-nord.json5 @@ -0,0 +1,94 @@ +{ + id: 'a4b1932e-740c-4ca4-b5d7-06e3322dced4', + base: 'light', + desc: 'Nord: an arctic, north-bluish color palette', + name: 'Nord Light', + props: { + X2: ':darken<2<@panel', + X3: 'rgba(255, 255, 255, 0.05)', + X4: 'rgba(255, 255, 255, 0.1)', + X5: 'rgba(255, 255, 255, 0.05)', + X6: 'rgba(255, 255, 255, 0.15)', + X7: 'rgba(255, 255, 255, 0.05)', + X8: ':lighten<5<@accent', + X9: ':darken<5<@accent', + bg: '#d8dee9', + fg: '#3b4252', + X10: ':alpha<0.4<@accent', + X11: 'rgba(0, 0, 0, 0.3)', + X12: 'rgba(255, 255, 255, 0.1)', + X13: 'rgba(255, 255, 255, 0.15)', + X14: ':alpha<0.5<@navBg', + X15: ':alpha<0<@panel', + X16: ':alpha<0.7<@panel', + X17: ':alpha<0.8<@bg', + cwBg: '#687390', + cwFg: '#393f4f', + link: '#44a4c1', + warn: '#ecb637', + badge: '#31b1ce', + error: '#ec4137', + focus: ':alpha<0.3<@accent', + navBg: '@panel', + navFg: '@fg', + panel: ':lighten<3<@bg', + popup: ':lighten<3<@panel', + accent: '#81a1c1', + header: ':alpha<0.7<@panel', + infoBg: '#253142', + infoFg: '#fff', + renote: '#229e82', + shadow: 'rgba(0, 0, 0, 0.3)', + divider: 'rgba(255, 255, 255, 0.1)', + hashtag: '#ff9156', + mention: '@accent', + modalBg: 'rgba(0, 0, 0, 0.5)', + success: '#86b300', + buttonBg: 'rgba(255, 255, 255, 0.05)', + switchBg: 'rgba(255, 255, 255, 0.15)', + acrylicBg: ':alpha<0.5<@bg', + cwHoverBg: '#707b97', + indicator: '@accent', + mentionMe: '@mention', + messageBg: '@bg', + navActive: '@accent', + accentedBg: ':alpha<0.15<@accent', + codeNumber: '#cfff9e', + codeString: '#ffb675', + fgOnAccent: '#fff', + infoWarnBg: '#42321c', + infoWarnFg: '#ffbd3e', + navHoverFg: ':lighten<17<@fg', + swutchOnBg: '@accentedBg', + swutchOnFg: '@accent', + codeBoolean: '#c59eff', + dateLabelFg: '@fg', + inputBorder: 'rgba(255, 255, 255, 0.1)', + panelBorder: '" solid 1px var(--divider)', + swutchOffBg: 'rgba(255, 255, 255, 0.1)', + swutchOffFg: '@fg', + accentDarken: ':darken<10<@accent', + acrylicPanel: ':alpha<0.5<@panel', + navIndicator: '@indicator', + windowHeader: ':alpha<0.85<@panel', + accentLighten: ':lighten<10<@accent', + buttonHoverBg: 'rgba(255, 255, 255, 0.1)', + driveFolderBg: ':alpha<0.3<@accent', + fgHighlighted: ':lighten<3<@fg', + fgTransparent: ':alpha<0.5<@fg', + panelHeaderBg: ':lighten<3<@panel', + panelHeaderFg: '@fg', + buttonGradateA: '@accent', + buttonGradateB: ':hue<20<@accent', + htmlThemeColor: '@bg', + panelHighlight: ':lighten<3<@panel', + listItemHoverBg: 'rgba(255, 255, 255, 0.03)', + scrollbarHandle: 'rgba(255, 255, 255, 0.2)', + inputBorderHover: 'rgba(255, 255, 255, 0.2)', + wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', + fgTransparentWeak: ':alpha<0.75<@fg', + panelHeaderDivider: 'rgba(0, 0, 0, 0)', + scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', + }, + author: '@thatonecalculator@stop.voring.me', +}