Skip to content

Instantly share code, notes, and snippets.

@phenomen
Created October 8, 2023 06:30
Show Gist options
  • Star 15 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save phenomen/affd8c346538378548febd20dccdbfcc to your computer and use it in GitHub Desktop.
Save phenomen/affd8c346538378548febd20dccdbfcc to your computer and use it in GitHub Desktop.
Flexoki theme for shadcn/ui and shadcn-svelte
@layer base {
:root {
--flexoki-bg: 48 100% 97%;
--flexoki-bg-2: 51 33% 92%;
--flexoki-ui: 51 21% 88%;
--flexoki-ui-2: 50 14% 83%;
--flexoki-ui-3: 55 10% 79%;
--flexoki-tx: 0 3% 6%;
--flexoki-tx-2: 50 3% 42%;
--flexoki-tx-3: 49 7% 70%;
--flexoki-re: 3 62% 42%;
}
.dark {
--flexoki-bg: 0 3% 6%;
--flexoki-bg-2: 30 4% 11%;
--flexoki-ui: 30 3% 15%;
--flexoki-ui-2: 40 3% 20%;
--flexoki-ui-3: 30 3% 24%;
--flexoki-tx: 55 10% 79%;
--flexoki-tx-2: 43 3% 52%;
--flexoki-tx-3: 45 2% 33%;
--flexoki-re: 5 61% 54%;
}
:root {
--background: var(--flexoki-bg);
--foreground: var(--flexoki-tx);
--card: var(--flexoki-bg);
--card-foreground: var(--flexoki-tx);
--popover: var(--flexoki-bg);
--popover-foreground: var(--flexoki-tx);
--primary: var(--flexoki-tx);
--primary-foreground: var(--flexoki-bg);
--secondary: var(--flexoki-ui-2);
--secondary-foreground: var(--flexoki-tx-2);
--muted: var(--flexoki-bg-2);
--muted-foreground: var(--flexoki-tx-3);
--accent: var(--flexoki-ui);
--accent-foreground: var(--flexoki-tx-2);
--destructive: var(--flexoki-re);
--destructive-foreground: var(--flexoki-bg);
--border: var(--flexoki-ui-2);
--input: var(--flexoki-ui-2);
--ring: var(--flexoki-ui-3);
--radius: 0.5rem;
}
}
@kepano
Copy link

kepano commented Oct 8, 2023

Would you like to add this to the main repo?
https://github.com/kepano/flexoki

@leolorenzoluis
Copy link

@phenomen Did you accidentally switch the --primary and --primary-foreground?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment