diff --git a/_icons/iconCatppuccinMochaDarkSmall.png b/_icons/iconCatppuccinMochaDarkSmall.png new file mode 100644 index 000000000..bfc93ad56 Binary files /dev/null and b/_icons/iconCatppuccinMochaDarkSmall.png differ diff --git a/_icons/iconCatppuccinMochaLightSmall.png b/_icons/iconCatppuccinMochaLightSmall.png new file mode 100644 index 000000000..021f62670 Binary files /dev/null and b/_icons/iconCatppuccinMochaLightSmall.png differ diff --git a/_icons/textCatppuccinMochaDarkSmall.png b/_icons/textCatppuccinMochaDarkSmall.png new file mode 100644 index 000000000..e2fba035e Binary files /dev/null and b/_icons/textCatppuccinMochaDarkSmall.png differ diff --git a/_icons/textCatppuccinMochaLightSmall.png b/_icons/textCatppuccinMochaLightSmall.png new file mode 100644 index 000000000..70e969010 Binary files /dev/null and b/_icons/textCatppuccinMochaLightSmall.png differ diff --git a/src/main/index.js b/src/main/index.js index 394a7c16e..7c733b7c3 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -185,6 +185,8 @@ function runApp() { return '#000000' case 'dracula': return '#282a36' + case 'catppuccin-mocha': + return '#1e1e2e' case 'system': default: return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1' diff --git a/src/renderer/components/ft-select/ft-select.css b/src/renderer/components/ft-select/ft-select.css index 10b3f6d6a..067c5e0f2 100644 --- a/src/renderer/components/ft-select/ft-select.css +++ b/src/renderer/components/ft-select/ft-select.css @@ -58,7 +58,9 @@ /* Use custom arrow */ .select .select-text { appearance: none; - -webkit-appearance:none + -webkit-appearance:none; + text-overflow: ellipsis; + padding-right: 1.1rem; } .iconSelect { diff --git a/src/renderer/components/ft-share-button/ft-share-button.sass b/src/renderer/components/ft-share-button/ft-share-button.sass index f5a7e1158..2fd5271b9 100644 --- a/src/renderer/components/ft-share-button/ft-share-button.sass +++ b/src/renderer/components/ft-share-button/ft-share-button.sass @@ -56,6 +56,7 @@ .dark &, .black &, .dracula &, + .CatppuccinMocha &, .system[data-system-theme*='dark'] & background-image: url(~../../assets/img/invidious-logo-dark.svg) diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js index 25a0a1368..d91a6e019 100644 --- a/src/renderer/components/theme-settings/theme-settings.js +++ b/src/renderer/components/theme-settings/theme-settings.js @@ -33,7 +33,8 @@ export default Vue.extend({ 'light', 'dark', 'black', - 'dracula' + 'dracula', + 'catppuccinMocha' ] } }, @@ -91,7 +92,8 @@ export default Vue.extend({ this.$t('Settings.Theme Settings.Base Theme.Light'), this.$t('Settings.Theme Settings.Base Theme.Dark'), this.$t('Settings.Theme Settings.Base Theme.Black'), - this.$t('Settings.Theme Settings.Base Theme.Dracula') + this.$t('Settings.Theme Settings.Base Theme.Dracula'), + this.$t('Settings.Theme Settings.Base Theme.Catppuccin Mocha') ] }, diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js index 911385c81..d40732e23 100644 --- a/src/renderer/store/modules/utils.js +++ b/src/renderer/store/modules/utils.js @@ -50,7 +50,22 @@ const state = { 'DraculaPink', 'DraculaPurple', 'DraculaRed', - 'DraculaYellow' + 'DraculaYellow', + 'CatppuccinMochaRosewater', + 'CatppuccinMochaFlamingo', + 'CatppuccinMochaPink', + 'CatppuccinMochaMauve', + 'CatppuccinMochaRed', + 'CatppuccinMochaMaroon', + 'CatppuccinMochaPeach', + 'CatppuccinMochaYellow', + 'CatppuccinMochaGreen', + 'CatppuccinMochaTeal', + 'CatppuccinMochaSky', + 'CatppuccinMochaSapphire', + 'CatppuccinMochaBlue', + 'CatppuccinMochaLavender' + ], colorValues: [ '#d50000', @@ -75,7 +90,21 @@ const state = { '#FF79C6', '#BD93F9', '#FF5555', - '#F1FA8C' + '#F1FA8C', + '#F5E0DC', + '#F2CDCD', + '#F5C2E7', + '#CBA6F7', + '#F38BA8', + '#EBA0AC', + '#FAB387', + '#F9E2AF', + '#A6E3A1', + '#94E2D5', + '#89DCEB', + '#74C7EC', + '#89B4FA', + '#B4BEFE' ], externalPlayerNames: [], externalPlayerValues: [], diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 0e7b1f2ab..09af45040 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -112,6 +112,30 @@ --logo-text: url("~../../_icons/textDraculaLightSmall.png"); } +.catppuccinMocha { + --primary-text-color: #cdd6f4; + --secondary-text-color: #bac2de; + --tertiary-text-color: #a6adc8; + --primary-input-color: rgba(0, 0, 0, 0.50); + --primary-shadow-color: rgba(0, 0, 0, 0.75); + --title-color: var(--accent-color); + --bg-color: #1e1e2e; + --link-color: var(--accent-color); + --link-visited-color: var(--accent-color-visited); + --favorite-icon-color: #f9e2af; + --card-bg-color: #181825; + --secondary-card-bg-color: #1e1e2e; + --scrollbar-color: #313244; + --scrollbar-color-hover: #3D4051; + --side-nav-color: #181825; + --side-nav-hover-color: #11111b; + --side-nav-active-color: #11111b; + --search-bar-color: #313244; + --instance-menu-color: var(--search-bar-color); + --logo-icon: url("~../../_icons/iconCatppuccinMochaLightSmall.png"); + --logo-text: url("~../../_icons/textCatppuccinMochaLightSmall.png"); +} + .mainRed { --primary-color: #f44336; --primary-color-hover: #e53935; @@ -319,6 +343,132 @@ --logo-text-bar-color: url("~../../_icons/textDraculaDarkSmall.png"); } +.mainCatppuccinMochaRosewater { + --primary-color: #f5e0dc; + --primary-color-hover: #fceeec; + --primary-color-active: #e1c8c3; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaFlamingo { + --primary-color: #f2cdcd; + --primary-color-hover: #f2e1e1; + --primary-color-active: #ddb7b7; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaPink { + --primary-color: #f5c2e7; + --primary-color-hover: #f3d2ea; + --primary-color-active: #dca3cd; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaMauve { + --primary-color: #cba6f7; + --primary-color-hover: #d4b7f8; + --primary-color-active: #b38fdf; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaRed { + --primary-color: #f38ba8; + --primary-color-hover: #f0a4b9; + --primary-color-active: #de7693; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaMaroon { + --primary-color: #eba0ac; + --primary-color-hover: #eabbc3; + --primary-color-active: #d68895; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaPeach { + --primary-color: #fab387; + --primary-color-hover: #f7c7a9; + --primary-color-active: #e1996d; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaYellow { + --primary-color: #f9e2af; + --primary-color-hover: #feeecd; + --primary-color-active: #dec48d; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaGreen { + --primary-color: #a6e3a1; + --primary-color-hover: #bfebbb; + --primary-color-active: #86c780; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaTeal { + --primary-color: #94e2d5; + --primary-color-hover: #aceae0; + --primary-color-active: #6fc5b7; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaSky { + --primary-color: #89dceb; + --primary-color-hover: #a3e4f0; + --primary-color-active: #68bcca; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaSapphire { + --primary-color: #74c7ec; + --primary-color-hover: #93d1ed; + --primary-color-active: #59a9cf; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaBlue { + --primary-color: #89b4fa; + --primary-color-hover: #a6c8ff; + --primary-color-active: #6593df; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + +.mainCatppuccinMochaLavender { + --primary-color: #b4befe; + --primary-color-hover: #c9d0ff; + --primary-color-active: #8d98e4; + --text-with-main-color: #1e1e2e; + --logo-icon-bar-color: url("~../../_icons/iconCatppuccinMochaDarkSmall.png"); + --logo-text-bar-color: url("~../../_icons/textCatppuccinMochaDarkSmall.png"); +} + .secRed { --accent-color: #f44336; --accent-color-hover: #e53935; @@ -618,6 +768,188 @@ --accent-color-opacity4: rgba(98,114,164,0.24); } +.secCatppuccinMochaRosewater { + --accent-color: #f5e0dc; + --accent-color-hover: #fceeec; + --accent-color-active: #e1c8c3; + --accent-color-light: #F8EAE7; + --accent-color-visited: #D3A197; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(245,224,220,0.04); + --accent-color-opacity2: rgba(245,224,220,0.12); + --accent-color-opacity3: rgba(245,224,220,0.16); + --accent-color-opacity4: rgba(245,224,220,0.24); +} + +.secCatppuccinMochaFlamingo { + --accent-color: #f2cdcd; + --accent-color-hover: #f3d7d7; + --accent-color-active: #ddb7b7; + --accent-color-light: #F7DFDF; + --accent-color-visited: #cf9898; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(242,205,205,0.04); + --accent-color-opacity2: rgba(242,205,205,0.12); + --accent-color-opacity3: rgba(242,205,205,0.16); + --accent-color-opacity4: rgba(242,205,205,0.24); +} + +.secCatppuccinMochaPink { + --accent-color: #f5c2e7; + --accent-color-hover: #f3cee9; + --accent-color-active: #dca3cd; + --accent-color-light: #f4dbed; + --accent-color-visited: #d28fc0; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(245,194,231,0.04); + --accent-color-opacity2: rgba(245,194,231,0.12); + --accent-color-opacity3: rgba(245,194,231,0.16); + --accent-color-opacity4: rgba(245,194,231,0.24); +} + +.secCatppuccinMochaMauve { + --accent-color: #cba6f7; + --accent-color-hover: #d4b7f8; + --accent-color-active: #b38fdf; + --accent-color-light: #D6B9F9; + --accent-color-visited: #A171DA; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(203,166,247,0.04); + --accent-color-opacity2: rgba(203,166,247,0.12); + --accent-color-opacity3: rgba(203,166,247,0.16); + --accent-color-opacity4: rgba(203,166,247,0.24); +} + +.secCatppuccinMochaRed { + --accent-color: #f38ba8; + --accent-color-hover: #f399b2; + --accent-color-active: #de7693; + --accent-color-light: #F5A3BA; + --accent-color-visited: #D56C89; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(243,139,168,0.04); + --accent-color-opacity2: rgba(243,139,168,0.12); + --accent-color-opacity3: rgba(243,139,168,0.16); + --accent-color-opacity4: rgba(243,139,168,0.24); +} + +.secCatppuccinMochaMaroon { + --accent-color: #eba0ac; + --accent-color-hover: #ebb4bd; + --accent-color-active: #d68895; + --accent-color-light: #F0B7C0; + --accent-color-visited: #C86A79; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(235,160,172,0.04); + --accent-color-opacity2: rgba(235,160,172,0.12); + --accent-color-opacity3: rgba(235,160,172,0.16); + --accent-color-opacity4: rgba(235,160,172,0.24); +} + +.secCatppuccinMochaPeach { + --accent-color: #fab387; + --accent-color-hover: #f7bd99; + --accent-color-active: #e1996d; + --accent-color-light: #FBC4A2; + --accent-color-visited: #D78A5B; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(250,179,135,0.04); + --accent-color-opacity2: rgba(250,179,135,0.12); + --accent-color-opacity3: rgba(250,179,135,0.16); + --accent-color-opacity4: rgba(250,179,135,0.24); +} + +.secCatppuccinMochaYellow { + --accent-color: #f9e2af; + --accent-color-hover: #f9e7bf; + --accent-color-active: #dec48d; + --accent-color-light: #FBECCB; + --accent-color-visited: #D5B05D; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(249,226,175,0.04); + --accent-color-opacity2: rgba(249,226,175,0.12); + --accent-color-opacity3: rgba(249,226,175,0.16); + --accent-color-opacity4: rgba(249,226,175,0.24); +} + +.secCatppuccinMochaGreen { + --accent-color: #a6e3a1; + --accent-color-hover: #b6e3b2; + --accent-color-active: #86c780; + --accent-color-light: #BCEAB8; + --accent-color-visited: #6ED166; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(166,227,161,0.04); + --accent-color-opacity2: rgba(166,227,161,0.12); + --accent-color-opacity3: rgba(166,227,161,0.16); + --accent-color-opacity4: rgba(166,227,161,0.24); +} + +.secCatppuccinMochaTeal { + --accent-color: #94e2d5; + --accent-color-hover: #a1dfd5; + --accent-color-active: #6fc5b7; + --accent-color-light: #AFE9DF; + --accent-color-visited: #5CCCB9; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(148,226,213,0.04); + --accent-color-opacity2: rgba(148,226,213,0.12); + --accent-color-opacity3: rgba(148,226,213,0.16); + --accent-color-opacity4: rgba(148,226,213,0.24); +} + +.secCatppuccinMochaSky { + --accent-color: #89dceb; + --accent-color-hover: #99dfeb; + --accent-color-active: #68bcca; + --accent-color-light: #9FE3EF; + --accent-color-visited: #64C2D3; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(137,220,235,0.04); + --accent-color-opacity2: rgba(137,220,235,0.12); + --accent-color-opacity3: rgba(137,220,235,0.16); + --accent-color-opacity4: rgba(137,220,235,0.24); +} + +.secCatppuccinMochaSapphire { + --accent-color: #74c7ec; + --accent-color-hover: #84c7e6; + --accent-color-active: #59a9cf; + --accent-color-light: #93D4F0; + --accent-color-visited: #6AB6D7; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(116,199,236,0.04); + --accent-color-opacity2: rgba(116,199,236,0.12); + --accent-color-opacity3: rgba(116,199,236,0.16); + --accent-color-opacity4: rgba(116,199,236,0.24); +} + +.secCatppuccinMochaBlue { + --accent-color: #89b4fa; + --accent-color-hover: #9bbef6; + --accent-color-active: #6593df; + --accent-color-light: #A7C7FB; + --accent-color-visited: #739CDD; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(137,220,235,0.04); + --accent-color-opacity2: rgba(137,220,235,0.12); + --accent-color-opacity3: rgba(137,220,235,0.16); + --accent-color-opacity4: rgba(137,220,235,0.24); +} + +.secCatppuccinMochaLavender { + --accent-color: #b4befe; + --accent-color-hover: #c9d0ff; + --accent-color-active: #8d98e4; + --accent-color-light: #D2D8FE; + --accent-color-visited: #96A1E9; + --text-with-accent-color: #1e1e2e; + --accent-color-opacity1: rgba(180,190,254,0.04); + --accent-color-opacity2: rgba(180,190,254,0.12); + --accent-color-opacity3: rgba(180,190,254,0.16); + --accent-color-opacity4: rgba(180,190,254,0.24); +} + body { margin: 0; min-height: 100vh; diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 8247bb1f4..dc1925158 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -182,6 +182,7 @@ Settings: System Default: System Default Light: Light Dracula: Dracula + Catppuccin Mocha: Catppuccin Mocha Main Color Theme: Main Color Theme: Main Color Theme Red: Red @@ -207,6 +208,20 @@ Settings: Dracula Purple: Dracula Purple Dracula Red: Dracula Red Dracula Yellow: Dracula Yellow + Catppuccin Mocha Rosewater: Catppuccin Mocha Rosewater + Catppuccin Mocha Flamingo: Catppuccin Mocha Flamingo + Catppuccin Mocha Pink: Catppuccin Mocha Pink + Catppuccin Mocha Mauve: Catppuccin Mocha Mauve + Catppuccin Mocha Red: Catppuccin Mocha Red + Catppuccin Mocha Maroon: Catppuccin Mocha Maroon + Catppuccin Mocha Peach: Catppuccin Mocha Peach + Catppuccin Mocha Yellow: Catppuccin Mocha Yellow + Catppuccin Mocha Green: Catppuccin Mocha Green + Catppuccin Mocha Teal: Catppuccin Mocha Teal + Catppuccin Mocha Sky: Catppuccin Mocha Sky + Catppuccin Mocha Sapphire: Catppuccin Mocha Sapphire + Catppuccin Mocha Blue: Catppuccin Mocha Blue + Catppuccin Mocha Lavender: Catppuccin Mocha Lavender Secondary Color Theme: Secondary Color Theme #* Main Color Theme Player Settings: