Skeleton Community - Theme Contest! #401

endigo9740 · 2022-10-18T16:24:00Z

endigo9740
Oct 18, 2022
Maintainer

New to Skeleton? See what we're all about:
https://www.skeleton.dev/

Skeleton Community - Theme Contest

We're happy to announce our first community contest for Skeleton! The goal is simple: create a theme, submit it, and the top three entries selected will win the prizes below! With the recent launch of the design token system, it's easier than ever to create really awesome themes. We would love to have submissions from both new and existing community members, so please feel free to share on your favorite social sites. You can read the full details below.

Prizes

1st Place - $50 (USD) Amazon Gift Card
2st Place - $30 (USD) Amazon Gift Card
3rd Place - $20 (USD) Amazon Gift Card

NOTE: Winners must be able to accept a digital gift card code!

Rules

See our updated preset themes

Limit ONE entry per individual. No exceptions.
By submitting a theme you're giving permission to include it in the library.
All work submitted must be original. Don't copy other brands!
Use of the theme generator is allowed, but consider hand crafting your color palette
Use of Google Fonts for headings and body text, like our presets, is allowed.
Minor style adjustments to headings and other styles are allowed, like our presets, but keep this to a minimum.
Feel free to include your attribution information within a comment block at the top of the CSS file.

How to Enter

To enter, please provide the following information in a post below:

Link or attach your theme CSS file using the following filename convention: theme-{name}.css
Include screenshots of light and dark modes, or consider an imgur gallery
Tell us a little about the theme and what inspired you.

Please note that while only three submissions will quality for prizes, we'll consider adding more with attribution of course!

Deadline for Submission

Entries must be received no later than midnight US central time on Thursday, October 27th, 2022.

All entries will be judged by @niktek, @Sarenor, @luke-hagar-sp, and myself. We'll also share the names and screenshots of the winning entries on Twitter and Discord. We'll try to include them in the release the following week!

Tips

Remember to test your theme before you submit it! If it doesn't work we may not be able to accept it.
Use this VS Code extension to convert from Hex -> RGB
Consider using :root{} and .dark :root{} to to create light/dark mode variations in the same file
Need inspiration to get started? Try coolors.co

Support

Feel free to ask questions below if we missed anything, otherwise you can always reach us on Discord!

Good luck and have fun!

endigo9740 · 2022-10-18T16:47:31Z

endigo9740
Oct 18, 2022
Maintainer Author

To celebrate the new contest and Halloween, we're introducing a new temporary theme on the website. Check it out here:

0 replies

ryceg · 2022-10-25T01:42:23Z

ryceg
Oct 25, 2022

A slightly silly theme inspired by HHM from Better Call Saul, I present to you, Hamlindigo!

https://imgur.com/a/p7osUmQ

:root {
	/* =~= Hamlindigo theme, made by rcgy for the Skeleton community. Go watch Better Call Saul.  =~= */
	/* =~= Theme Styles =~= */
	--theme-border-base: 2px;
	--theme-font-family-heading: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--theme-font-color-base: var(--color-surface-900);
	--theme-font-color-dark: var(--color-surface-50);
	--theme-rounded-base: 0px;
	--theme-rounded-container: 0px;
	/* =~= Theme Colors | Hex =~= */
	/* primary | #576994 */
	--color-primary-50: 249 249 251; /* ⬅ #f9f9fb */
	--color-primary-100: 239 241 246; /* ⬅ #eff1f6 */
	--color-primary-200: 223 227 236; /* ⬅ #dfe3ec */
	--color-primary-300: 197 204 221; /* ⬅ #c5ccdd */
	--color-primary-400: 139 154 187; /* ⬅ #8b9abb */
	--color-primary-500: 87 105 148; /* ⬅ #576994 */
	--color-primary-600: 62 75 106; /* ⬅ #3e4b6a */
	--color-primary-700: 45 55 77; /* ⬅ #2d374d */
	--color-primary-800: 26 32 45; /* ⬅ #1a202d */
	--color-primary-900: 13 16 22; /* ⬅ #0d1016 */
	/* accent | #a58945 */
	--color-accent-50: 252 251 248; /* ⬅ #fcfbf8 */
	--color-accent-100: 247 244 237; /* ⬅ #f7f4ed */
	--color-accent-200: 240 234 219; /* ⬅ #f0eadb */
	--color-accent-300: 228 217 190; /* ⬅ #e4d9be */
	--color-accent-400: 201 178 126; /* ⬅ #c9b27e */
	--color-accent-500: 165 137 69; /* ⬅ #a58945 */
	--color-accent-600: 119 98 50; /* ⬅ #776232 */
	--color-accent-700: 86 71 36; /* ⬅ #564724 */
	--color-accent-800: 50 42 21; /* ⬅ #322a15 */
	--color-accent-900: 25 21 11; /* ⬅ #19150b */
	/* ternary | #2254c9 */
	--color-ternary-50: 246 248 254; /* ⬅ #f6f8fe */
	--color-ternary-100: 233 239 251; /* ⬅ #e9effb */
	--color-ternary-200: 211 222 248; /* ⬅ #d3def8 */
	--color-ternary-300: 177 196 242; /* ⬅ #b1c4f2 */
	--color-ternary-400: 98 137 228; /* ⬅ #6289e4 */
	--color-ternary-500: 34 84 201; /* ⬅ #2254c9 */
	--color-ternary-600: 24 60 144; /* ⬅ #183c90 */
	--color-ternary-700: 18 44 105; /* ⬅ #122c69 */
	--color-ternary-800: 10 26 61; /* ⬅ #0a1a3d */
	--color-ternary-900: 5 13 31; /* ⬅ #050d1f */
	/* warning | #e00b27 */
	--color-warning-50: 255 245 246; /* ⬅ #fff5f6 */
	--color-warning-100: 254 231 234; /* ⬅ #fee7ea */
	--color-warning-200: 253 206 212; /* ⬅ #fdced4 */
	--color-warning-300: 251 167 178; /* ⬅ #fba7b2 */
	--color-warning-400: 247 80 102; /* ⬅ #f75066 */
	--color-warning-500: 224 11 39; /* ⬅ #e00b27 */
	--color-warning-600: 161 8 28; /* ⬅ #a1081c */
	--color-warning-700: 117 6 20; /* ⬅ #750614 */
	--color-warning-800: 68 3 12; /* ⬅ #44030c */
	--color-warning-900: 34 2 6; /* ⬅ #220206 */
	/* surface | #586b93 */
	--color-surface-50: 249 249 251; /* ⬅ #f9f9fb */
	--color-surface-100: 239 241 245; /* ⬅ #eff1f5 */
	--color-surface-200: 223 227 236; /* ⬅ #dfe3ec */
	--color-surface-300: 198 205 221; /* ⬅ #c6cddd */
	--color-surface-400: 140 155 186; /* ⬅ #8c9bba */
	--color-surface-500: 88 107 147; /* ⬅ #586b93 */
	--color-surface-600: 63 76 105; /* ⬅ #3f4c69 */
	--color-surface-700: 46 56 77; /* ⬅ #2e384d */
	--color-surface-800: 27 32 45; /* ⬅ #1b202d */
	--color-surface-900: 13 16 22; /* ⬅ #0d1016 */
}

1 reply

endigo9740 Oct 25, 2022
Maintainer Author

Awesome, thanks Rhys! Looks great!

I keep meaning to comment on your avatar on Discord - I'm a huge Breaking Bad and Better Call Saul fan! Just so sad it's over!

ak4zh · 2022-10-25T18:07:41Z

ak4zh
Oct 25, 2022

Note: Do not include it in competition as I cannot accept USD Amazon Gift Card
I just got motivated by @ryceg theme and created one which takes inspiration from Dexter

theme-dexter.css

Based on

Light

Dark

:root {
	/* =~= Theme Styles =~= */
	--theme-border-base: 1px;
	--theme-font-family-heading: system-ui;
	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--theme-font-color-base: var(--color-surface-900);
	--theme-font-color-dark: var(--color-surface-50);
	--theme-rounded-base: 24px;
	--theme-rounded-container: 24px;
	/* =~= Theme Colors | Hex =~= */
	/* primary | #d4161d */
	--color-primary-50: 254 246 246; /* ⬅ #fef6f6 */
	--color-primary-100: 253 232 233; /* ⬅ #fde8e9 */
	--color-primary-200: 250 209 210; /* ⬅ #fad1d2 */
	--color-primary-300: 246 172 174; /* ⬅ #f6acae */
	--color-primary-400: 238 89 94; /* ⬅ #ee595e */
	--color-primary-500: 212 22 29; /* ⬅ #d4161d */
	--color-primary-600: 152 16 21; /* ⬅ #981015 */
	--color-primary-700: 111 12 15; /* ⬅ #6f0c0f */
	--color-primary-800: 65 7 9; /* ⬅ #410709 */
	--color-primary-900: 32 3 4; /* ⬅ #200304 */
	/* accent | #3881b2 */
	--color-accent-50: 247 250 253; /* ⬅ #f7fafd */
	--color-accent-100: 236 244 249; /* ⬅ #ecf4f9 */
	--color-accent-200: 216 232 243; /* ⬅ #d8e8f3 */
	--color-accent-300: 185 214 233; /* ⬅ #b9d6e9 */
	--color-accent-400: 115 173 211; /* ⬅ #73add3 */
	--color-accent-500: 56 129 178; /* ⬅ #3881b2 */
	--color-accent-600: 40 93 128; /* ⬅ #285d80 */
	--color-accent-700: 29 68 93; /* ⬅ #1d445d */
	--color-accent-800: 17 39 54; /* ⬅ #112736 */
	--color-accent-900: 9 20 27; /* ⬅ #09141b */
	/* ternary | #956056 */
	--color-ternary-50: 251 249 249; /* ⬅ #fbf9f9 */
	--color-ternary-100: 246 240 239; /* ⬅ #f6f0ef */
	--color-ternary-200: 236 225 223; /* ⬅ #ece1df */
	--color-ternary-300: 221 201 197; /* ⬅ #ddc9c5 */
	--color-ternary-400: 188 147 138; /* ⬅ #bc938a */
	--color-ternary-500: 149 96 86; /* ⬅ #956056 */
	--color-ternary-600: 107 69 61; /* ⬅ #6b453d */
	--color-ternary-700: 78 50 45; /* ⬅ #4e322d */
	--color-ternary-800: 45 29 26; /* ⬅ #2d1d1a */
	--color-ternary-900: 23 15 13; /* ⬅ #170f0d */
	/* warning | #d4161d */
	--color-warning-50: 254 246 246; /* ⬅ #fef6f6 */
	--color-warning-100: 253 232 233; /* ⬅ #fde8e9 */
	--color-warning-200: 250 209 210; /* ⬅ #fad1d2 */
	--color-warning-300: 246 172 174; /* ⬅ #f6acae */
	--color-warning-400: 238 89 94; /* ⬅ #ee595e */
	--color-warning-500: 212 22 29; /* ⬅ #d4161d */
	--color-warning-600: 152 16 21; /* ⬅ #981015 */
	--color-warning-700: 111 12 15; /* ⬅ #6f0c0f */
	--color-warning-800: 65 7 9; /* ⬅ #410709 */
	--color-warning-900: 32 3 4; /* ⬅ #200304 */
	/* surface | #656a86 */
	--color-surface-50: 249 249 251; /* ⬅ #f9f9fb */
	--color-surface-100: 240 241 244; /* ⬅ #f0f1f4 */
	--color-surface-200: 226 227 233; /* ⬅ #e2e3e9 */
	--color-surface-300: 203 205 216; /* ⬅ #cbcdd8 */
	--color-surface-400: 150 155 176; /* ⬅ #969bb0 */
	--color-surface-500: 101 106 134; /* ⬅ #656a86 */
	--color-surface-600: 72 76 96; /* ⬅ #484c60 */
	--color-surface-700: 53 55 70; /* ⬅ #353746 */
	--color-surface-800: 31 32 41; /* ⬅ #1f2029 */
	--color-surface-900: 15 16 20; /* ⬅ #0f1014 */
}

I created a few more inspired from different series:
https://github.com/ak4zh/skeleton-dev-themes

1 reply

endigo9740 Oct 25, 2022
Maintainer Author

Aww, bummer about the gift cards @ak4zh but thank you for sharing. Especially the set of these at the bottom, that's a great resource for folks!

ghost · 2022-10-25T19:20:55Z

ghost
Oct 25, 2022

I LOVE these show choices

4 replies

endigo9740 Oct 25, 2022
Maintainer Author

Why in the world does your response have an ad for Outlook on iOS? Dude, grab the GitHub app for mobile lol

LukeHagar Oct 25, 2022
Collaborator

I responded to the email lol

ghost Oct 25, 2022

Fixed it

endigo9740 Oct 25, 2022
Maintainer Author

I had no idea that was possible, but makes total sense! Interesting!

Sarenor · 2022-10-26T08:50:15Z

Sarenor
Oct 26, 2022
Maintainer

I know I'm not allowed to participate, but I still wanted to submit the purple & gold now that I'm relatively happy with it :)

So here's Gold Nouveau!

Here's the gallery and here you can take a look at the live version

As I've said in the gallery, I feel like I've played with it enough to be able to submit it under my name, but the credit for finding the specific gold & purple combo still goes to Gootastic.

Also, I'm still cheating by having 1 theme for light and 1 theme for dark, although they work well enough on their own now that text-color depends on it being either light or dark.

Preview so you can skip imgur if you want to:

Full Double-Theme:

:root {
    /* =~= Skeleton Theme | Custom =~= */
    /* =~= Theme Styles =~= */
    --theme-border-base: 1px;
    --theme-font-family-heading: system-ui;
    --theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --theme-font-color-base: var(--color-surface-900);
    --theme-font-color-dark: var(--color-surface-50);
    --theme-rounded-base: 0px;
    --theme-rounded-container: 0px;
    /* =~= Theme Colors | Hex =~= */
    /* primary | #744aa1 */
    --color-primary-50: 250 248 252; /* ⬅ #faf8fc */
    --color-primary-100: 242 238 247; /* ⬅ #f2eef7 */
    --color-primary-200: 229 220 239; /* ⬅ #e5dcef */
    --color-primary-300: 209 192 226; /* ⬅ #d1c0e2 */
    --color-primary-400: 162 129 197; /* ⬅ #a281c5 */
    --color-primary-500: 116 74 161; /* ⬅ #744aa1 */
    --color-primary-600: 83 53 115; /* ⬅ #533573 */
    --color-primary-700: 60 39 84; /* ⬅ #3c2754 */
    --color-primary-800: 35 22 49; /* ⬅ #231631 */
    --color-primary-900: 18 11 24; /* ⬅ #120b18 */
    /* accent | #e7c504 */
    --color-accent-50: 255 253 245; /* ⬅ #fffdf5 */
    --color-accent-100: 255 251 230; /* ⬅ #fffbe6 */
    --color-accent-200: 254 247 205; /* ⬅ #fef7cd */
    --color-accent-300: 254 240 165; /* ⬅ #fef0a5 */
    --color-accent-400: 252 226 74; /* ⬅ #fce24a */
    --color-accent-500: 231 197 4; /* ⬅ #e7c504 */
    --color-accent-600: 166 141 3; /* ⬅ #a68d03 */
    --color-accent-700: 121 103 2; /* ⬅ #796702 */
    --color-accent-800: 70 60 1; /* ⬅ #463c01 */
    --color-accent-900: 35 30 1; /* ⬅ #231e01 */
    /* ternary | #3e7bac */
    --color-ternary-50: 248 250 252; /* ⬅ #f8fafc */
    --color-ternary-100: 236 243 248; /* ⬅ #ecf3f8 */
    --color-ternary-200: 218 231 241; /* ⬅ #dae7f1 */
    --color-ternary-300: 188 211 231; /* ⬅ #bcd3e7 */
    --color-ternary-400: 120 168 206; /* ⬅ #78a8ce */
    --color-ternary-500: 62 123 172; /* ⬅ #3e7bac */
    --color-ternary-600: 45 88 124; /* ⬅ #2d587c */
    --color-ternary-700: 32 64 90; /* ⬅ #20405a */
    --color-ternary-800: 19 37 52; /* ⬅ #132534 */
    --color-ternary-900: 9 19 26; /* ⬅ #09131a */
    /* warning | #de0d30 */
    --color-warning-50: 254 245 247; /* ⬅ #fef5f7 */
    --color-warning-100: 254 231 235; /* ⬅ #fee7eb */
    --color-warning-200: 252 207 214; /* ⬅ #fccfd6 */
    --color-warning-300: 250 168 182; /* ⬅ #faa8b6 */
    --color-warning-400: 245 81 109; /* ⬅ #f5516d */
    --color-warning-500: 222 13 48; /* ⬅ #de0d30 */
    --color-warning-600: 159 9 34; /* ⬅ #9f0922 */
    --color-warning-700: 116 7 25; /* ⬅ #740719 */
    --color-warning-800: 67 4 15; /* ⬅ #43040f */
    --color-warning-900: 34 2 7; /* ⬅ #220207 */
    /* surface | #6b7280 */
    --color-surface-50: 249 250 250; /* ⬅ #f9fafa */
    --color-surface-100: 241 242 243; /* ⬅ #f1f2f3 */
    --color-surface-200: 227 229 232; /* ⬅ #e3e5e8 */
    --color-surface-300: 205 208 213; /* ⬅ #cdd0d5 */
    --color-surface-400: 155 160 171; /* ⬅ #9ba0ab */
    --color-surface-500: 107 114 128; /* ⬅ #6b7280 */
    --color-surface-600: 77 82 92; /* ⬅ #4d525c */
    --color-surface-700: 56 59 67; /* ⬅ #383b43 */
    --color-surface-800: 32 35 39; /* ⬅ #202327 */
    --color-surface-900: 16 17 19; /* ⬅ #101113 */
}
.dark body {
    /* =~= Skeleton Theme | Custom =~= */
    /* =~= Theme Styles =~= */
    --theme-border-base: 1px;
    --theme-font-family-heading: system-ui;
    --theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --theme-font-color-base: var(--color-surface-900);
    --theme-font-color-dark: var(--color-surface-50);
    --theme-rounded-base: 0px;
    --theme-rounded-container: 0px;
    /* =~= Theme Colors | Hex =~= */
    /* primary | #e7c504 */
    --color-primary-50: 255 253 245; /* ⬅ #fffdf5 */
    --color-primary-100: 255 251 230; /* ⬅ #fffbe6 */
    --color-primary-200: 254 247 205; /* ⬅ #fef7cd */
    --color-primary-300: 254 240 165; /* ⬅ #fef0a5 */
    --color-primary-400: 252 226 74; /* ⬅ #fce24a */
    --color-primary-500: 231 197 4; /* ⬅ #e7c504 */
    --color-primary-600: 166 141 3; /* ⬅ #a68d03 */
    --color-primary-700: 121 103 2; /* ⬅ #796702 */
    --color-primary-800: 70 60 1; /* ⬅ #463c01 */
    --color-primary-900: 35 30 1; /* ⬅ #231e01 */
    /* accent | #0697e5 */
    --color-accent-50: 245 251 255; /* ⬅ #f5fbff */
    --color-accent-100: 230 246 254; /* ⬅ #e6f6fe */
    --color-accent-200: 205 237 254; /* ⬅ #cdedfe */
    --color-accent-300: 165 222 253; /* ⬅ #a5defd */
    --color-accent-400: 76 189 250; /* ⬅ #4cbdfa */
    --color-accent-500: 6 151 229; /* ⬅ #0697e5 */
    --color-accent-600: 4 108 164; /* ⬅ #046ca4 */
    --color-accent-700: 3 79 119; /* ⬅ #034f77 */
    --color-accent-800: 2 46 70; /* ⬅ #022e46 */
    --color-accent-900: 1 23 35; /* ⬅ #011723 */
    /* ternary | #cc1e8a */
    --color-ternary-50: 254 246 251; /* ⬅ #fef6fb */
    --color-ternary-100: 252 233 244; /* ⬅ #fce9f4 */
    --color-ternary-200: 248 211 234; /* ⬅ #f8d3ea */
    --color-ternary-300: 243 175 217; /* ⬅ #f3afd9 */
    --color-ternary-400: 231 95 179; /* ⬅ #e75fb3 */
    --color-ternary-500: 204 30 138; /* ⬅ #cc1e8a */
    --color-ternary-600: 146 22 99; /* ⬅ #921663 */
    --color-ternary-700: 106 16 72; /* ⬅ #6a1048 */
    --color-ternary-800: 62 9 42; /* ⬅ #3e092a */
    --color-ternary-900: 31 5 21; /* ⬅ #1f0515 */
    /* warning | #d41629 */
    --color-warning-50: 254 246 247; /* ⬅ #fef6f7 */
    --color-warning-100: 253 232 234; /* ⬅ #fde8ea */
    --color-warning-200: 250 209 213; /* ⬅ #fad1d5 */
    --color-warning-300: 246 172 179; /* ⬅ #f6acb3 */
    --color-warning-400: 238 89 104; /* ⬅ #ee5968 */
    --color-warning-500: 212 22 41; /* ⬅ #d41629 */
    --color-warning-600: 152 16 30; /* ⬅ #98101e */
    --color-warning-700: 111 12 22; /* ⬅ #6f0c16 */
    --color-warning-800: 65 7 13; /* ⬅ #41070d */
    --color-warning-900: 32 3 6; /* ⬅ #200306 */
    /* surface | #744aa1 */
    --color-surface-50: 250 248 252; /* ⬅ #faf8fc */
    --color-surface-100: 242 238 247; /* ⬅ #f2eef7 */
    --color-surface-200: 229 220 239; /* ⬅ #e5dcef */
    --color-surface-300: 209 192 226; /* ⬅ #d1c0e2 */
    --color-surface-400: 162 129 197; /* ⬅ #a281c5 */
    --color-surface-500: 116 74 161; /* ⬅ #744aa1 */
    --color-surface-600: 83 53 115; /* ⬅ #533573 */
    --color-surface-700: 60 39 84; /* ⬅ #3c2754 */
    --color-surface-800: 35 22 49; /* ⬅ #231631 */
    --color-surface-900: 18 11 24; /* ⬅ #120b18 */
}

Just the Dark:

:root {
    /* =~= Skeleton Theme | Custom =~= */
    /* =~= Theme Styles =~= */
    --theme-border-base: 1px;
    --theme-font-family-heading: system-ui;
    --theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --theme-font-color-base: var(--color-surface-900);
    --theme-font-color-dark: var(--color-surface-50);
    --theme-rounded-base: 0px;
    --theme-rounded-container: 0px;
    /* =~= Theme Colors | Hex =~= */
    /* primary | #e7c504 */
    --color-primary-50: 255 253 245; /* ⬅ #fffdf5 */
    --color-primary-100: 255 251 230; /* ⬅ #fffbe6 */
    --color-primary-200: 254 247 205; /* ⬅ #fef7cd */
    --color-primary-300: 254 240 165; /* ⬅ #fef0a5 */
    --color-primary-400: 252 226 74; /* ⬅ #fce24a */
    --color-primary-500: 231 197 4; /* ⬅ #e7c504 */
    --color-primary-600: 166 141 3; /* ⬅ #a68d03 */
    --color-primary-700: 121 103 2; /* ⬅ #796702 */
    --color-primary-800: 70 60 1; /* ⬅ #463c01 */
    --color-primary-900: 35 30 1; /* ⬅ #231e01 */
    /* accent | #0697e5 */
    --color-accent-50: 245 251 255; /* ⬅ #f5fbff */
    --color-accent-100: 230 246 254; /* ⬅ #e6f6fe */
    --color-accent-200: 205 237 254; /* ⬅ #cdedfe */
    --color-accent-300: 165 222 253; /* ⬅ #a5defd */
    --color-accent-400: 76 189 250; /* ⬅ #4cbdfa */
    --color-accent-500: 6 151 229; /* ⬅ #0697e5 */
    --color-accent-600: 4 108 164; /* ⬅ #046ca4 */
    --color-accent-700: 3 79 119; /* ⬅ #034f77 */
    --color-accent-800: 2 46 70; /* ⬅ #022e46 */
    --color-accent-900: 1 23 35; /* ⬅ #011723 */
    /* ternary | #cc1e8a */
    --color-ternary-50: 254 246 251; /* ⬅ #fef6fb */
    --color-ternary-100: 252 233 244; /* ⬅ #fce9f4 */
    --color-ternary-200: 248 211 234; /* ⬅ #f8d3ea */
    --color-ternary-300: 243 175 217; /* ⬅ #f3afd9 */
    --color-ternary-400: 231 95 179; /* ⬅ #e75fb3 */
    --color-ternary-500: 204 30 138; /* ⬅ #cc1e8a */
    --color-ternary-600: 146 22 99; /* ⬅ #921663 */
    --color-ternary-700: 106 16 72; /* ⬅ #6a1048 */
    --color-ternary-800: 62 9 42; /* ⬅ #3e092a */
    --color-ternary-900: 31 5 21; /* ⬅ #1f0515 */
    /* warning | #d41629 */
    --color-warning-50: 254 246 247; /* ⬅ #fef6f7 */
    --color-warning-100: 253 232 234; /* ⬅ #fde8ea */
    --color-warning-200: 250 209 213; /* ⬅ #fad1d5 */
    --color-warning-300: 246 172 179; /* ⬅ #f6acb3 */
    --color-warning-400: 238 89 104; /* ⬅ #ee5968 */
    --color-warning-500: 212 22 41; /* ⬅ #d41629 */
    --color-warning-600: 152 16 30; /* ⬅ #98101e */
    --color-warning-700: 111 12 22; /* ⬅ #6f0c16 */
    --color-warning-800: 65 7 13; /* ⬅ #41070d */
    --color-warning-900: 32 3 6; /* ⬅ #200306 */
    /* surface | #744aa1 */
    --color-surface-50: 250 248 252; /* ⬅ #faf8fc */
    --color-surface-100: 242 238 247; /* ⬅ #f2eef7 */
    --color-surface-200: 229 220 239; /* ⬅ #e5dcef */
    --color-surface-300: 209 192 226; /* ⬅ #d1c0e2 */
    --color-surface-400: 162 129 197; /* ⬅ #a281c5 */
    --color-surface-500: 116 74 161; /* ⬅ #744aa1 */
    --color-surface-600: 83 53 115; /* ⬅ #533573 */
    --color-surface-700: 60 39 84; /* ⬅ #3c2754 */
    --color-surface-800: 35 22 49; /* ⬅ #231631 */
    --color-surface-900: 18 11 24; /* ⬅ #120b18 */
}

Just the light:

:root {
    /* =~= Skeleton Theme | Custom =~= */
    /* =~= Theme Styles =~= */
    --theme-border-base: 1px;
    --theme-font-family-heading: system-ui;
    --theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --theme-font-color-base: var(--color-surface-900);
    --theme-font-color-dark: var(--color-surface-50);
    --theme-rounded-base: 0px;
    --theme-rounded-container: 0px;
    /* =~= Theme Colors | Hex =~= */
    /* primary | #744aa1 */
    --color-primary-50: 250 248 252; /* ⬅ #faf8fc */
    --color-primary-100: 242 238 247; /* ⬅ #f2eef7 */
    --color-primary-200: 229 220 239; /* ⬅ #e5dcef */
    --color-primary-300: 209 192 226; /* ⬅ #d1c0e2 */
    --color-primary-400: 162 129 197; /* ⬅ #a281c5 */
    --color-primary-500: 116 74 161; /* ⬅ #744aa1 */
    --color-primary-600: 83 53 115; /* ⬅ #533573 */
    --color-primary-700: 60 39 84; /* ⬅ #3c2754 */
    --color-primary-800: 35 22 49; /* ⬅ #231631 */
    --color-primary-900: 18 11 24; /* ⬅ #120b18 */
    /* accent | #e7c504 */
    --color-accent-50: 255 253 245; /* ⬅ #fffdf5 */
    --color-accent-100: 255 251 230; /* ⬅ #fffbe6 */
    --color-accent-200: 254 247 205; /* ⬅ #fef7cd */
    --color-accent-300: 254 240 165; /* ⬅ #fef0a5 */
    --color-accent-400: 252 226 74; /* ⬅ #fce24a */
    --color-accent-500: 231 197 4; /* ⬅ #e7c504 */
    --color-accent-600: 166 141 3; /* ⬅ #a68d03 */
    --color-accent-700: 121 103 2; /* ⬅ #796702 */
    --color-accent-800: 70 60 1; /* ⬅ #463c01 */
    --color-accent-900: 35 30 1; /* ⬅ #231e01 */
    /* ternary | #3e7bac */
    --color-ternary-50: 248 250 252; /* ⬅ #f8fafc */
    --color-ternary-100: 236 243 248; /* ⬅ #ecf3f8 */
    --color-ternary-200: 218 231 241; /* ⬅ #dae7f1 */
    --color-ternary-300: 188 211 231; /* ⬅ #bcd3e7 */
    --color-ternary-400: 120 168 206; /* ⬅ #78a8ce */
    --color-ternary-500: 62 123 172; /* ⬅ #3e7bac */
    --color-ternary-600: 45 88 124; /* ⬅ #2d587c */
    --color-ternary-700: 32 64 90; /* ⬅ #20405a */
    --color-ternary-800: 19 37 52; /* ⬅ #132534 */
    --color-ternary-900: 9 19 26; /* ⬅ #09131a */
    /* warning | #de0d30 */
    --color-warning-50: 254 245 247; /* ⬅ #fef5f7 */
    --color-warning-100: 254 231 235; /* ⬅ #fee7eb */
    --color-warning-200: 252 207 214; /* ⬅ #fccfd6 */
    --color-warning-300: 250 168 182; /* ⬅ #faa8b6 */
    --color-warning-400: 245 81 109; /* ⬅ #f5516d */
    --color-warning-500: 222 13 48; /* ⬅ #de0d30 */
    --color-warning-600: 159 9 34; /* ⬅ #9f0922 */
    --color-warning-700: 116 7 25; /* ⬅ #740719 */
    --color-warning-800: 67 4 15; /* ⬅ #43040f */
    --color-warning-900: 34 2 7; /* ⬅ #220207 */
    /* surface | #6b7280 */
    --color-surface-50: 249 250 250; /* ⬅ #f9fafa */
    --color-surface-100: 241 242 243; /* ⬅ #f1f2f3 */
    --color-surface-200: 227 229 232; /* ⬅ #e3e5e8 */
    --color-surface-300: 205 208 213; /* ⬅ #cdd0d5 */
    --color-surface-400: 155 160 171; /* ⬅ #9ba0ab */
    --color-surface-500: 107 114 128; /* ⬅ #6b7280 */
    --color-surface-600: 77 82 92; /* ⬅ #4d525c */
    --color-surface-700: 56 59 67; /* ⬅ #383b43 */
    --color-surface-800: 32 35 39; /* ⬅ #202327 */
    --color-surface-900: 16 17 19; /* ⬅ #101113 */
}

1 reply

endigo9740 Oct 26, 2022
Maintainer Author

Awesome! I still love the colors on this. Thanks for contributing :)

endigo9740 · 2022-10-28T06:30:57Z

endigo9740
Oct 28, 2022
Maintainer Author

FYI the contest has now concluded. I'll post the results tomorrow (my time). Thanks to everyone that contributed!

@ryceg @ak4zh @Sarenor

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Skeleton Community - Theme Contest! #401

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Skeleton Community - Theme Contest! #401

endigo9740 Oct 18, 2022 Maintainer

Skeleton Community - Theme Contest

Prizes

Rules

How to Enter

Deadline for Submission

Tips

Support

Replies: 6 comments · 7 replies

endigo9740 Oct 18, 2022 Maintainer Author

ryceg Oct 25, 2022

endigo9740 Oct 25, 2022 Maintainer Author

ak4zh Oct 25, 2022

Light

Dark

endigo9740 Oct 25, 2022 Maintainer Author

ghost Oct 25, 2022

endigo9740 Oct 25, 2022 Maintainer Author

LukeHagar Oct 25, 2022 Collaborator

ghost Oct 25, 2022

endigo9740 Oct 25, 2022 Maintainer Author

Sarenor Oct 26, 2022 Maintainer

endigo9740 Oct 26, 2022 Maintainer Author

endigo9740 Oct 28, 2022 Maintainer Author

endigo9740
Oct 18, 2022
Maintainer

Replies: 6 comments 7 replies

endigo9740
Oct 18, 2022
Maintainer Author

ryceg
Oct 25, 2022

endigo9740 Oct 25, 2022
Maintainer Author

ak4zh
Oct 25, 2022

endigo9740 Oct 25, 2022
Maintainer Author

ghost
Oct 25, 2022

endigo9740 Oct 25, 2022
Maintainer Author

LukeHagar Oct 25, 2022
Collaborator

endigo9740 Oct 25, 2022
Maintainer Author

Sarenor
Oct 26, 2022
Maintainer

endigo9740 Oct 26, 2022
Maintainer Author

endigo9740
Oct 28, 2022
Maintainer Author