-
- Introduction
-
-
-
- Srcery
-
- is a color scheme with clearly defined contrasting colors and a
- slightly earthy tone.
+
+
+
+ themes
+
+
+ resources
+
+
+ community
+
+
+
+
+
+
+ Srcery is dark syntax highlighting color scheme with clearly defined
+ contrasting colors and a slightly earthy tone.
-
~~~
-
+
Created using colors that logically adheres to the 16 color base
- palette of a given terminal, while trying to retain its own
- identity. The colors are designed to be easy on the eyes yet
- contrast well with the background for long sessions using an editor
- or terminal emulator.
-
-
-
-
- Implementations
-
-
- Srcery initially started as a vim colorscheme, but has since then
- branched out to multiple ports and implementations. It's an ongoing
- process, and contributors are welcome.
+ palette of a terminal, while trying to retain its own identity. The
+ colors are designed to be easy on the eyes, yet contrast well with the
+ background for long sessions using an editor or terminal emulator.
-
-
-
-
-
- Merch
-
-
- Get our brand new merchandise featuring the Srcery color scheme!
- We're not making any profit from the sales, so you can show your
- support by wearing and using the merch. Thank you for helping us
- develop and improve our color scheme.
+
+
Preview
+
+ Here's a few
+ Rosetta Code
+ examples demoed using
+ highlight.js .
+ It'll give a general impression but see the
+ themes
+ for details about a specific editor/IDE.
-
-
-
- Teespring Storefront
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- Preview
-
-
-
-
-
-
-
+
-
-
-
- Attribution
-
-
- This project started as essentially a palette swap of
- Gruvbox
- and all credit goes to the maintainers of that fantastic color
- scheme. Project author wanted something a bit sharper, but loved the
- syntax color choices of Gruvbox. He also tried to make the theme as
- simple to use as possible, which was inspired by
- Flattened .
-
- Other influences:
-
-
-
-
-
+
+
diff --git a/src/js/.empty b/src/js/.empty
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/js/main.js b/src/js/main.js
deleted file mode 100644
index 60b2e39a..00000000
--- a/src/js/main.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/* main.js */
-import GLightbox from "glightbox";
-
-const lightbox = GLightbox();
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..f9626227
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,81 @@
+import Alpine from "alpinejs";
+
+// Highlight.js + theme (yay, srcery is builtin!)
+import hljs from "highlight.js/lib/core";
+import "highlight.js/styles/srcery.css";
+
+// highlight.js languages
+import javascript from "highlight.js/lib/languages/javascript";
+import c from "highlight.js/lib/languages/c";
+import clj from "highlight.js/lib/languages/clojure";
+import lua from "highlight.js/lib/languages/lua";
+import rust from "highlight.js/lib/languages/rust";
+import bash from "highlight.js/lib/languages/bash";
+import vim from "highlight.js/lib/languages/vim";
+
+// Examples
+import ctxt from "./examples/c.txt?raw";
+import jstxt from "./examples/js.txt?raw";
+import cljtxt from "./examples/clj.txt?raw";
+import luatxt from "./examples/lua.txt?raw";
+import rusttxt from "./examples/rust.txt?raw";
+import bashtxt from "./examples/bash.txt?raw";
+import vimtxt from "./examples/vim.txt?raw";
+
+// Register languages
+hljs.registerLanguage("c", c);
+hljs.registerLanguage("js", javascript);
+hljs.registerLanguage("clj", clj);
+hljs.registerLanguage("lua", lua);
+hljs.registerLanguage("rust", rust);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("vim", vim);
+
+const languages = {
+ c: {
+ html: hljs.highlight(ctxt, {language: "c"}).value,
+ data: ctxt,
+ name: "C",
+ },
+ js: {
+ html: hljs.highlight(jstxt, {language: "js"}).value,
+ data: jstxt,
+ name: "JavaScript",
+ },
+ clj: {
+ html: hljs.highlight(cljtxt, { language: "clj" }).value,
+ data: cljtxt,
+ name: "Clojure",
+ },
+ lua: {
+ html: hljs.highlight(luatxt, { language: "lua" }).value,
+ name: "Lua",
+ },
+ lua: {
+ html: hljs.highlight(rusttxt, { language: "rust" }).value,
+ name: "Rust",
+ },
+ bash: {
+ html: hljs.highlight(bashtxt, { language: "bash" }).value,
+ name: "Bash"
+ },
+ vim: {
+ html: hljs.highlight(vimtxt, { language: "vim" }).value,
+ name: "Vim"
+ }
+}
+
+function main() {
+
+ window.Alpine = Alpine
+ Alpine.data("state", () => ({
+ languages,
+ activeTab: "c",
+ handleTab(lang) {
+ this.activeTab = lang;
+ }}))
+
+ Alpine.start()
+}
+
+main();
diff --git a/src/resources/index.html b/src/resources/index.html
new file mode 100644
index 00000000..c04b6cf3
--- /dev/null
+++ b/src/resources/index.html
@@ -0,0 +1,169 @@
+
+
+
+ Srcery Theme - Various resources
+
+
+
+
+
+
+
+
Resources
+
+ Here are collected miscellaneous Srcery resources. In addition to
+ themes, Srcery has some tools and packages to assist in creating
+ new themes, or things that didn't fit anywhere else.
+
+
+
Palette
+
+ Latest version:
+
+
+
+
+ In an attempt to create a single source of truth concerning the
+ palette used in various themes, a npm package was created that
+ contains a JSON with all color information.
+
+
+ It isn't used in every project, but every change to the palette will
+ happen there first, and will produce a new version of this package going
+ forward.
+
+
Install using this command or check out the links below:
+
+
+ npm i @srcery-colors/srcery-palette
+
+
+
+
Web assets
+
Aside from the palette itself, here are some useful web assets.
+
+
+
Graphic assets
+
+ We keep graphic assets in a separate repo so not to inflate the
+ size of each theme. Source for SVGs of various
+ assets are kept in the src folder.
+
+
+ If you are looking for icons, logo, screenshots, etcetera, this is the place.
+
+
+
+
Miscellaneous
+
+ Here are some miscellaneous projects that don't really fit anywhere
+ else. Mostly experiments and and other bits and bobs.
+
+
+
+
+
+
+
+
diff --git a/src/resources/main.js b/src/resources/main.js
new file mode 100644
index 00000000..780bfc5c
--- /dev/null
+++ b/src/resources/main.js
@@ -0,0 +1,30 @@
+import Alpine from "alpinejs";
+
+import githubsvg from "@fortawesome/fontawesome-free/svgs/brands/github.svg?raw";
+import npmsvg from "@fortawesome/fontawesome-free/svgs/brands/npm.svg?raw";
+
+const icons = {
+ github: githubsvg,
+ npm: npmsvg
+}
+
+function main() {
+ window.Alpine = Alpine
+ Alpine.data("state", () => ({
+ icons,
+ init() {
+ this.fetchPkgVersion();
+ },
+ version: undefined,
+ fetchPkgVersion() {
+ fetch("https://registry.npmjs.org/@srcery-colors/srcery-palette").then(res => {
+ res.json().then(json => {
+ this.version = json?.["dist-tags"]?.latest;
+ })
+ });
+ },
+ }))
+ Alpine.start()
+}
+
+main();
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 00000000..4eff9fd0
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ @font-face {
+ font-family: 'Iosevka Custom Web';
+ font-display: swap;
+ font-weight: 400;
+ font-stretch: normal;
+ font-style: normal;
+ src: url('fonts/iosevka-custom-regular.ttf') format('truetype'), url('fonts/iosevka-custom-regular.woff2') format('woff2');
+ }
+ @font-face {
+ font-family: 'Iosevka Custom Web';
+ font-display: swap;
+ font-weight: 700;
+ font-stretch: normal;
+ font-style: normal;
+ src: url('fonts/iosevka-custom-bold.ttf') format('truetype'), url('fonts/iosevka-custom-bold.woff2') format('woff2');
+ }
+}
+
+@layer components {
+ .dot {
+ @apply hidden tiny:block w-dot h-dot rounded-full mr-2;
+ }
+ .link {
+ @apply border-b border-dotted hover:text-white border-white;
+ }
+ .tab {
+ @apply px-4 flex border-bright_black items-end justify-center pt-1 grow;
+ }
+ .tab-inactive {
+ @apply border-b-2 hover:bg-xgray1;
+ }
+ .tab-active {
+ @apply border-e-2 border-s-2 border-t-2 border-b-transparent border-b-2;
+ }
+ .svg > svg > * {
+ @apply fill-bright_white;
+ }
+ .code {
+ @apply whitespace-nowrap overflow-x-auto flex mb-3 p-4 bg-hard_black;
+ }
+ .inline-code {
+ @apply whitespace-nowrap bg-hard_black p-1;
+ }
+ .list-dot {
+ @apply w-[5px] h-[5px] bg-bright_white rounded-full mr-2;
+ }
+}
+
+html,body {
+ min-height: 100%;
+}
+
diff --git a/src/svg/emacs.svg b/src/svg/emacs.svg
new file mode 100644
index 00000000..a859b0ac
--- /dev/null
+++ b/src/svg/emacs.svg
@@ -0,0 +1 @@
+Srcery Theme - Themes and configurations
+
+
+
+
+
+
+
+
+
diff --git a/src/themes/main.js b/src/themes/main.js
new file mode 100644
index 00000000..aee7b3c2
--- /dev/null
+++ b/src/themes/main.js
@@ -0,0 +1,147 @@
+import Alpine from "alpinejs";
+
+// icons
+import vimsvg from "devicon/icons/vim/vim-plain.svg?raw";
+import vscodesvg from "devicon/icons/vscode/vscode-plain.svg?raw";
+import intellijsvg from "devicon/icons/intellij/intellij-plain.svg?raw";
+import emacssvg from "../svg/emacs.svg?raw";
+import tmuxsvg from "../svg/tmux.svg?raw";
+import bashsvg from "devicon/icons/bash/bash-plain.svg?raw";
+import steamsvg from "@fortawesome/fontawesome-free/svgs/brands/steam.svg?raw";
+import insomniasvg from "../svg/insomnia.svg?raw";
+import guisvg from "@fortawesome/fontawesome-free/svgs/solid/image.svg?raw";
+import shellsvg from "@fortawesome/fontawesome-free/svgs/solid/file-invoice-dollar.svg?raw";
+
+const themes = [
+ {
+ name: "vim",
+ icon: vimsvg,
+ url: "https://www.vim.org/",
+ repo: "https://github.com/srcery-colors/srcery-vim",
+ download: "https://github.com/srcery-colors/srcery-vim/archive/refs/heads/master.zip",
+ keywords: ["vim", "vimrc", "neovim", "gvim", "terminal"]
+ },
+ {
+ name: "emacs",
+ icon: emacssvg,
+ url: "https://www.gnu.org/software/emacs/",
+ repo: "https://github.com/srcery-colors/srcery-emacs",
+ download: "https://github.com/srcery-colors/srcery-emacs/archive/refs/heads/master.zip",
+ keywords: ["emacs", "gnu", "terminal", "init.el", "lisp"]
+ },
+ {
+ name: "vscode",
+ icon: vscodesvg,
+ url: "https://code.visualstudio.com/",
+ repo: "https://github.com/srcery-colors/srcery-vscode",
+ download: "https://marketplace.visualstudio.com/items?itemName=srcery-colors.srcery-colors",
+ keywords: ["visual studio", "vscode", "microsoft", "code", "windows"]
+ },
+ {
+ name: "intellij",
+ icon: intellijsvg,
+ url: "https://www.jetbrains.com/idea/",
+ repo: "https://github.com/srcery-colors/srcery-intellij",
+ download: "https://plugins.jetbrains.com/plugin/18428-srcery-colorscheme/",
+ keywords: ["idea", "java", "intellij", "ide"]
+ },
+ {
+ name: "tmux",
+ icon: tmuxsvg,
+ url: "https://github.com/tmux/tmux",
+ repo: "https://github.com/srcery-colors/srcery-tmux",
+ download: "https://github.com/srcery-colors/srcery-tmux/archive/refs/heads/master.zip",
+ keywords: ["tmux", "terminal", "multiplexer"]
+ },
+ {
+ name: "terminals",
+ icon: bashsvg,
+ url: "https://en.wikipedia.org/wiki/List_of_terminal_emulators",
+ repo: "https://github.com/srcery-colors/srcery-terminal",
+ download: "https://github.com/srcery-colors/srcery-terminal/archive/refs/heads/master.zip",
+ keywords: [
+ "terminal",
+ "alacritty",
+ "blink",
+ "chrome secure shell",
+ "foot",
+ "genode",
+ "16 colors",
+ "gnome",
+ "guake",
+ "iterm",
+ "kitty",
+ "konsole",
+ "linux",
+ "virtual console",
+ "lxterminal",
+ "mintty",
+ "pantheon",
+ "putty",
+ "st",
+ "terminator",
+ "termite",
+ "termux",
+ "tilix",
+ "windows",
+ "xfce",
+ "xresources",
+ "x11",
+ "xorg"
+ ]
+ },
+ {
+ name: "steam",
+ icon: steamsvg,
+ url: "https://www.steampowered.com",
+ repo: "https://github.com/srcery-colors/srcery-steam-themes",
+ download: "https://github.com/srcery-colors/srcery-steam-themes/archive/refs/heads/main.zip",
+ keywords: ["steam", "steamos", "valve", "gaming", "steamdeck"]
+ },
+ {
+ name: "insomnia",
+ icon: insomniasvg,
+ url: "https://insomnia.rest/",
+ repo: "https://github.com/srcery-colors/srcery-insomnia",
+ download: "https://github.com/srcery-colors/srcery-insomnia/archive/refs/heads/main.zip",
+ keywords: ["insomnia", "rest", "api"]
+ },
+ {
+ name: "assorted gui themes",
+ icon: guisvg,
+ repo: "https://github.com/srcery-colors/srcery-gui",
+ download: "https://github.com/srcery-colors/srcery-gui/archive/refs/heads/master.zip",
+ keywords: ["awesomewm", "bspwm", "i3wm", "oomox", "polybar", "qutebrowser", "rofi", "slack", "zathura"]
+ },
+ {
+ name: "assorted shell themes",
+ icon: shellsvg,
+ repo: "https://github.com/srcery-colors/srcery-shell",
+ download: "https://github.com/srcery-colors/srcery-shell/archive/refs/heads/master.zip",
+ keywords: ["broot", "cmus", "mutt", "newsboat", "vifm", "zellij"]
+ }
+]
+
+function main() {
+ window.Alpine = Alpine
+ Alpine.data("state", () => ({
+ query: "",
+ themes() {
+ return themes.filter((theme) => {
+ const q = this.query.toLowerCase();
+ const matchesName = theme.name.includes(q);
+ const matchesKeyword = theme.keywords.some(kw => {
+ return kw.includes(q);
+ })
+ return matchesName || matchesKeyword;
+ })
+ },
+ logQuery() {
+ console.log(this.query);
+ }
+ }))
+
+ Alpine.start()
+}
+
+main();
diff --git a/tailwind.config.js b/tailwind.config.js
index 58113253..fd9dc80c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,54 +1,42 @@
-// Srcery Color Palette
-const colors = {
- transparent: "transparent",
- black: "#1C1B19",
- red: "#EF2F27",
- green: "#519F50",
- yellow: "#FBB829",
- blue: "#2C78BF",
- magenta: "#E02C6D",
- cyan: "#0AAEB3",
- white: "#D0BFA1",
- brightblack: "#918175",
- brightred: "#F75341",
- brightgreen: "#98BC37",
- brightyellow: "#FED06E",
- brightblue: "#68A8E4",
- brightmagenta: "#FF5C8F",
- brightcyan: "#53FDE9",
- brightwhite: "#FCE8C3",
- orange: "#D75F00",
- brorange: "#FF8700",
- hard_black: "#121212",
- xgray1: "#262626",
- xgray2: "#303030",
- xgray3: "#3A3A3A",
- xgray4: "#444444",
- xgray5: "#4E4E4E",
- xgray6: "#585858",
-};
+const defaultTheme = require('tailwindcss/defaultTheme');
+const palette = require("@srcery-colors/srcery-palette");
+
+function parsePalette(palette) {
+ return Object.entries(palette).reduce((acc, [k, v]) => {
+ return {
+ ...acc,
+ [k]: v.hex
+ }
+ }, {})
+}
module.exports = {
- mode: "jit",
- content: ["./src/**/*.html", "./src/**/*.js", "./src/**/*.svg"],
+ content: ["./src/**/*.{html,js}"],
theme: {
- extend: { colors: colors },
- fontFamily: {
- iosevka: [
- "Iosevka Regular",
- "system-ui",
- "BlinkMacSystemFont",
- "-apple-system",
- "Segoe UI",
- "Roboto",
- "Oxygen",
- "Ubuntu",
- "Cantarell",
- "Fira Sans",
- "Droid Sans",
- "Helvetica Neue",
- "sans-serif",
- ],
+ extend: {
+ fontFamily: {
+ 'iosevka': ['Iosevka Custom Web', ...defaultTheme.fontFamily.sans],
+ },
+ colors: {
+ ...parsePalette(palette.primary),
+ ...parsePalette(palette.secondary)
+ },
+ screens: {
+ 'tiny': '320px'
+ },
+ backgroundImage: {
+ 'triangle': "url('svg/triangle.svg')",
+ },
+ width: {
+ 'logo': '220px',
+ 'dot': '12px'
+ },
+ height: {
+ 'logo': '220px',
+ 'dot': '12px'
+ }
},
},
-};
+ plugins: [],
+}
+
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..44ce7279
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,17 @@
+const { defineConfig } = require("vite");
+import { resolve } from "path"
+
+module.exports = defineConfig({
+ root: resolve(__dirname, "src"),
+ build: {
+ outDir: "../dist",
+ rollupOptions: {
+ input: {
+ main: resolve(__dirname, "src/index.html"),
+ themes: resolve(__dirname, "src/themes/index.html") ,
+ resources: resolve(__dirname, "src/resources/index.html"),
+ community: resolve(__dirname, "src/community/index.html")
+ }
+ }
+ }
+})
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
- 
- 
- 
- 
-