tinted-theming / base24

Base24/ Base16 can be used to easily generate your favourite theme for your favourite application. Many of the template repositories provide theme files that you can copy/ import into said application.
MIT License
68 stars 7 forks source link

How do I expand a Base16 theme into a Base24 one? #22

Open MrDowntempo opened 1 year ago

MrDowntempo commented 1 year ago

Hi, I'm a little confused. I'm looking for a way to expand a Base16 theme into a Base24 theme, with the other 8 colors figured out algorithmically? I thought I would find a tool here to do just that, but I'm either confused about what Base24 can do, or where to find what I'm looking for. Specifically its the populat Catppuccin themes I want to expand.

JamyGolden commented 9 months ago

I'll leave this issue open and add close it when I add documentation covering this issue, but to convert a base16 scheme to a base24 scheme you would do the following:

base00 to base0F is the same as the base16 scheme being converted, then add the properties: base10 == base01 base11 == base00 base12 == base08 base13 == base09 base14 == base0B base15 == base0C base16 == base0D base17 == base0E

So if you were to convert oceanicnext to base24:

base16

system: "base16"
name: "OceanicNext"
author: "https://github.com/voronianski/oceanic-next-color-scheme"
variant: "dark"
palette:
  base00: "1b2b34"
  base01: "343d46"
  base02: "4f5b66"
  base03: "65737e"
  base04: "a7adba"
  base05: "c0c5cE"
  base06: "cdd3de"
  base07: "d8dee9"
  base08: "ec5F67"
  base09: "f99157"
  base0A: "fac863"
  base0B: "99c794"
  base0C: "5fb3b3"
  base0D: "6699cc"
  base0E: "c594c5"
  base0F: "ab7967"

base24

system: "base24"
name: "OceanicNext"
author: "https://github.com/voronianski/oceanic-next-color-scheme"
variant: "dark"
palette:
  base00: "1b2b34"
  base01: "343d46"
  base02: "4f5b66"
  base03: "65737e"
  base04: "a7adba"
  base05: "c0c5cE"
  base06: "cdd3de"
  base07: "d8dee9"
  base08: "ec5F67"
  base09: "f99157"
  base0A: "fac863"
  base0B: "99c794"
  base0C: "5fb3b3"
  base0D: "6699cc"
  base0E: "c594c5"
  base0F: "ab7967"
  base10: "343d46" # base01
  base11: "1b2b34" # base02
  base12: "ec5F67" # base08
  base13: "f99157" # base09
  base14: "99c794" # base0B
  base15: "5fb3b3" # base0C
  base16: "6699cc" # base0D
  base17: "c594c5" # base0E

Doing it this way you lose out on the bright colours you would get in the base24 themes (Since you have duplicates of many colours instead a of a normal and bright version) and would end up rendering as if they were base16 themes. There is more information about base10 to base17 here: https://github.com/tinted-theming/base24/blob/master/styling.md

( Tagging @FredHappyface to make sure the above is correct :smile:)

FredHappyface commented 8 months ago

Hey thanks for this! That looks correct to me! I've realised that some of my docs for this repo do not make use of the 'palette' key and the file structure is pretty flat. I believe a lot of builders support both? Though I do need to update those docs! (I've made a start)