Comments (4)
Svelte orange is a must honestly.
I guess we could start with dark theme and think of light if we have time.
from sveltelab.
π‘ we can use the same css props as the sk docs for light and dark mode
:root {
--sk-back-h: 206;
--sk-back-3-hsl: 206, 64%, 98%;
--sk-back-1: hsl(0, 0%, 100%);
--sk-back-2: hsl(0, 0%, 100%);
--sk-back-3: hsl(var(--sk-back-3-hsl));
--sk-back-4: hsl(206, 44%, 93%);
--sk-back-5: hsl(206, 20%, 80%);
--sk-theme-1: hsl(15, 100%, 50%);
--sk-theme-2: hsl(240, 8%, 44%);
--sk-theme-3: hsl(204, 100%, 63%);
--sk-text-1: hsl(0, 0%, 13%);
--sk-text-2: hsl(0, 0%, 27%);
--sk-text-3: var(--sk-theme-2);
--sk-scrollbar: rgba(0, 0, 0, .3);
--sk-theme-1-variant: hsl(15, 100%, 50%);
--sk-theme-2-variant: hsl(240, 8%, 44%);
--sk-theme-3-variant: hsl(204, 100%, 63%);
--sk-code-bg: var(--sk-back-3);
--sk-code-ts-bg: var(--sk-back-1);
--sk-code-base: hsl(45, 7%, 35%);
--sk-code-comment: hsl(0, 0%, 41%);
--sk-code-keyword: hsl(204, 88%, 35%);
--sk-code-function: hsl(19, 67%, 44%);
--sk-code-string: hsl(41, 37%, 38%);
--sk-code-number: hsl(120, 100%, 25%);
--sk-code-template-string: hsl(2, 80%, 47%);
--sk-code-tags: var(--code-function);
--sk-code-important: var(--code-string);
--sk-code-diff-base: hsla(0, 0%, 0%, .4);
--sk-code-diff-inserted: hsl(120, 100%, 25%);
--sk-code-diff-removed: hsl(2, 80%, 47%);
--sk-back-translucent: hsla(0, 0%, 0%, .1);
--sk-text-translucent: hsla(0, 0%, 0%, .7);
--sk-font: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--sk-font-mono: "Fira Mono", monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--sk-back-1: hsl(0, 0%, 10%);
--sk-back-2: hsl(0, 0%, 18%);
--sk-back-4: hsl(0, 0%, 22%);
--sk-back-5: hsl(0, 0%, 40%);
--sk-back-translucent: hsla(0, 0%, 100%, .1);
--sk-theme-1: hsl(15, 100%, 55%);
--sk-theme-2: hsl(240, 8%, 44%);
--sk-theme-3: hsl(204, 100%, 63%);
--sk-text-1: hsl(0, 0%, 90%);
--sk-text-2: hsl(0, 0%, 80%);
--sk-text-3: hsl(0, 0%, 65%);
--sk-text-translucent: hsla(0, 0%, 100%, .9);
--sk-scrollbar: rgba(255, 255, 255, .3);
--sk-back-3-hsl: 0, 0%, 14%;
--sk-theme-1-variant: hsl(15, 100%, 40%);
--sk-theme-2-variant: hsl(240, 8%, 35%);
--sk-theme-3-variant: hsl(204, 100%, 50%);
--sk-code-ts-bg: var(--sk-back-2);
--sk-code-bg: var(--sk-back-3);
--sk-code-base: hsl(45, 7%, 75%);
--sk-code-comment: hsl(0, 0%, 51%);
--sk-code-keyword: hsl(204, 88%, 65%);
--sk-code-function: hsl(19, 67%, 75%);
--sk-code-string: hsl(41, 37%, 68%);
--sk-code-number: hsl(120, 100%, 25%);
--sk-code-template-string: hsl(2, 80%, 47%);
--sk-code-tags: var(--code-function);
--sk-code-important: var(--code-string);
--sk-code-diff-base: hsla(0, 0%, 100%, .4);
--sk-code-diff-inserted: hsl(120, 100%, 35%);
--sk-code-diff-removed: hsl(2, 80%, 47%)
}
}
from sveltelab.
also here is the link to the figma file: https://www.figma.com/file/eWA6v60uZW3kd1AswpcMx5/Svelteblitz?node-id=16%3A623&t=md8JZZrvV3xPrZtK-1
from sveltelab.
i think the general direction is set for now? we can iterate and raise an issue if we want to
from sveltelab.
Related Issues (20)
- β¨ Support Svelte Inspector HOT 3
- π dropdown menu looking _stupid_ in Safari macOS
- β¨ Include default .gitignore in exported project HOT 4
- β¨ Show `.svelte-kit` or add command to show it HOT 1
- π Address Login with email problems
- β¨ alias g4c to git to allow for github repo dependencies HOT 1
- π Vite error when opening project preview in a new tab HOT 3
- β¨ Add carbon-components-svelte template HOT 1
- π Moving folders sometimes causes ghost files
- β¨ reduce call in profile for personal repls HOT 4
- β¨ explore HOT 2
- π After forking a project, the save button doesn't appear HOT 1
- π "Additional step required" when opening fullscreen view HOT 5
- β¨ "workspace:*" in package.json HOT 4
- π Incorrect keyboard shortcuts HOT 1
- β¨ disable js in iframe HOT 1
- β¨ Easier way to find the import from github command HOT 2
- When trying to save the project I get Can't Save the projectπ HOT 13
- Trying to add shadcn-sveelte to a Projectπ HOT 1
- Error management with monorepo and sveltekit 2π HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sveltelab.