├── .editorconfig ├── LICENSE ├── README.md ├── assets ├── nighttab-frappe.webp ├── nighttab-latte.webp ├── nighttab-macchiato.webp ├── nighttab-mocha.webp └── nighttab.webp └── settheme.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # EditorConfig is awesome: https://EditorConfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | charset = utf-8 10 | indent_size = 4 11 | indent_style = tab 12 | end_of_line = lf 13 | insert_final_newline = true 14 | trim_trailing_whitespace = true 15 | 16 | [*.{diff,md}] 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Catppuccin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Logo
3 | 4 | Catppuccin for Nighttab 5 | 6 |

7 | 8 |

9 | 10 | 11 | 12 |

13 | 14 |

15 | 16 |

17 | 18 | ## Previews 19 | 20 |
21 | 🌻 Latte 22 | 23 |
24 |
25 | 🪴 Frappé 26 | 27 |
28 |
29 | 🌺 Macchiato 30 | 31 |
32 |
33 | 🌿 Mocha 34 | 35 |
36 | 37 | ## Usage 38 | 39 |
40 | 🌻 Latte 41 | 47 |
48 |
49 | 🪴 Frappé 50 |
  • Primary Colour: 229
    • 51 |
  • Saturation: 19
    • 52 |
  • Contrast Range: 23 - 50
    • 53 |
  • Accent colour: Any (https://github.com/catppuccin/catppuccin#-palettes)
    • 54 |
    55 |
    56 | 🌺 Macchiato 57 |
  • Primary Colour: 232
    • 58 |
  • Saturation: 23
    • 59 |
  • Contrast Range: 18 - 50
    • 60 |
  • Accent colour: Any (https://github.com/catppuccin/catppuccin#-palettes)
    • 61 |
    62 |
    63 | 🌿 Mocha 64 |
  • Primary Colour: 240
    • 65 |
  • Saturation: 21
    • 66 |
  • Contrast Range: 15 - 50
    • 67 |
  • Accent colour: Any (https://github.com/catppuccin/catppuccin#-palettes)
    • 68 |
    69 | 70 | ### Script 71 | 72 | 1. Copy the [script](https://raw.githubusercontent.com/justTOBBI/nighttab/main/settheme.js) 73 | 2. Open the Developer Tools in your browser (F12) and go to `Console` (Make sure that you are in the nightTab page) 74 | 3. Paste the script and press Enter 75 | 4. Still in the Console, type `setTheme("[Flavour]","[AccentColor]")` (for example `setTheme("mocha","mauve")`) and press Enter 76 | 5. Refresh, open the nightTab Settings, and select the theme 77 | 78 | ⚠ Please note that you will need to do these steps to add a new theme again, if you reloaded the page. The added Themes will stay. 79 | 80 | ## 💝 Thanks to 81 | 82 | - [justTOBBI](https://github.com/justTOBBI) 83 | - [winston](https://github.com/nekowinston) 84 | 85 |   86 | 87 |

    88 | 89 |

    90 | 91 |

    92 | Copyright © 2021-present Catppuccin Org 93 |

    94 | 95 |

    96 | 97 |

    98 | -------------------------------------------------------------------------------- /assets/nighttab-frappe.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/nighttab/76682d7160723601793d3290ff6e835f35505d9a/assets/nighttab-frappe.webp -------------------------------------------------------------------------------- /assets/nighttab-latte.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/nighttab/76682d7160723601793d3290ff6e835f35505d9a/assets/nighttab-latte.webp -------------------------------------------------------------------------------- /assets/nighttab-macchiato.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/nighttab/76682d7160723601793d3290ff6e835f35505d9a/assets/nighttab-macchiato.webp -------------------------------------------------------------------------------- /assets/nighttab-mocha.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/nighttab/76682d7160723601793d3290ff6e835f35505d9a/assets/nighttab-mocha.webp -------------------------------------------------------------------------------- /assets/nighttab.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catppuccin/nighttab/76682d7160723601793d3290ff6e835f35505d9a/assets/nighttab.webp -------------------------------------------------------------------------------- /settheme.js: -------------------------------------------------------------------------------- 1 | const def_theme = JSON.parse('{"name":"","color":{"range":{"primary":{"h":222,"s":14}},"contrast":{"start":17,"end":83}},"accent":{"hsl":{"h":221,"s":100,"l":50},"rgb":{"r":0,"g":80,"b":255}},"font":{"display":{"name":"","weight":400,"style":"normal"},"ui":{"name":"","weight":400,"style":"normal"}},"background":{"type":"theme","color":{"hsl":{"h":221,"s":47,"l":17},"rgb":{"r":23,"g":36,"b":64}},"gradient":{"angle":160,"start":{"hsl":{"h":206,"s":16,"l":40},"rgb":{"r":86,"g":104,"b":118}},"end":{"hsl":{"h":219,"s":28,"l":12},"rgb":{"r":22,"g":28,"b":39}}},"image":{"url":"","blur":0,"grayscale":0,"scale":100,"accent":0,"opacity":100,"vignette":{"opacity":0,"start":90,"end":70}},"video":{"url":"","blur":0,"grayscale":0,"scale":100,"accent":0,"opacity":100,"vignette":{"opacity":0,"start":90,"end":70}}},"radius":25,"shadow":75,"style":"dark","shade":{"opacity":30,"blur":0},"opacity":{"general":100},"layout":{"color":{"by":"theme","hsl":{"h":0,"s":0,"l":0},"rgb":{"r":0,"g":0,"b":0},"blur":0,"opacity":10},"divider":{"size":0}},"header":{"color":{"by":"theme","hsl":{"h":0,"s":0,"l":0},"rgb":{"r":0,"g":0,"b":0},"opacity":10},"search":{"opacity":100}},"bookmark":{"color":{"by":"theme","opacity":10,"hsl":{"h":0,"s":0,"l":0},"rgb":{"r":0,"g":0,"b":0}},"item":{"border":0,"opacity":100}},"group":{"toolbar":{"opacity":100}},"toolbar":{"opacity":100}}') 2 | 3 | const capitalize = (s) => { 4 | if (typeof s !== 'string') return '' 5 | return s.charAt(0).toUpperCase() + s.slice(1) 6 | } 7 | 8 | const hex_to_rgb = (a) => { 9 | arr = a.match(/([A-Fa-f0-9]{2})/g).map(s => parseInt(s, 16)) 10 | return { r: arr[0], g: arr[1], b: arr[2] } 11 | } 12 | 13 | const clean_hsl = (hsl) => { 14 | arr = hsl.match(/\d+/g).map(s => parseInt(s)) 15 | return { h: arr[0], s: arr[1], l: arr[2] } 16 | } 17 | 18 | const setCatppuccinColours = async() => { 19 | return fetch("https://raw.githubusercontent.com/catppuccin/palette/v0.2.0/palette.json") 20 | .then(async(resp) => 21 | localStorage.setItem("catppuccin_colours", JSON.stringify(await resp.json())) 22 | ) 23 | } 24 | 25 | const setTheme = async(theme, accent) => { 26 | if (localStorage.hasOwnProperty("catppuccin_colours") === false) { 27 | await setCatppuccinColours() 28 | } 29 | const colours = JSON.parse(localStorage.getItem("catppuccin_colours")) 30 | let cur_cfg = JSON.parse(localStorage.nightTab) 31 | 32 | const active = colours[theme] 33 | const accent_rgb = hex_to_rgb(active[accent].hex) 34 | const accent_hsl = clean_hsl(active[accent].hsl) 35 | const base_hsl = clean_hsl(active.base.hsl) 36 | const theme_name = capitalize(theme) 37 | const accent_name = capitalize(accent) 38 | 39 | let newConfig = { 40 | ...cur_cfg, 41 | state: { 42 | ...cur_cfg.state, 43 | theme: { 44 | ...cur_cfg.state.theme, 45 | custom: { 46 | all: [ 47 | ...cur_cfg.state.theme.custom.all, 48 | { 49 | ...def_theme, 50 | name: `Catppuccin ${theme_name} ${accent_name}`, 51 | accent: { 52 | hsl: accent_hsl, 53 | rgb: accent_rgb 54 | }, 55 | color: { 56 | contrast: { 57 | start: base_hsl.l, 58 | end: accent_hsl.l + 25, 59 | }, 60 | range: { 61 | primary: { 62 | h: base_hsl.h, 63 | s: base_hsl.s 64 | } 65 | } 66 | } 67 | } 68 | ] 69 | } 70 | } 71 | } 72 | } 73 | console.log(newConfig) 74 | localStorage.setItem("nightTab", JSON.stringify(newConfig)) 75 | } 76 | --------------------------------------------------------------------------------