Mirrors/stylix
2
0
Fork 0
mirror of https://github.com/danth/stylix synced 2024-11-25 21:50:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Provide a way to view generated palette 🧑‍💻

Browse source 
Fixes #14
This commit is contained in:
Daniel Thwaites 2022-10-30 13:34:30 +00:00
parent e66ff87e79
commit 5b45ba84b6
No known key found for this signature in database
GPG key ID: D8AFC4BF05670F9D
3 changed files with 86 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -78,6 +78,9 @@ You can force a light or dark theme using the polarity option:
stylix.polarity = "dark";
```
The generated scheme can be viewed in a web browser at
`file:///etc/stylix/palette.html`.
### Mixed color schemes
You can override part of the scheme by hand, perhaps to select background

68
stylix/palette.html.mustache Normal file
View file

@ -0,0 +1,68 @@
<html>
<head>
<style>
body {
margin: 2rem;
font-family: sans-serif;
}
body > div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
body > div > div {
width: 5rem;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
#base00 { background-color: #{{base00-hex}}; color: #{{base05-hex}}; }
#base01 { background-color: #{{base01-hex}}; color: #{{base05-hex}}; }
#base02 { background-color: #{{base02-hex}}; color: #{{base05-hex}}; }
#base03 { background-color: #{{base03-hex}}; color: #{{base00-hex}}; }
#base04 { background-color: #{{base04-hex}}; color: #{{base00-hex}}; }
#base05 { background-color: #{{base05-hex}}; color: #{{base00-hex}}; }
#base06 { background-color: #{{base06-hex}}; color: #{{base00-hex}}; }
#base07 { background-color: #{{base07-hex}}; color: #{{base00-hex}}; }
#base08 { background-color: #{{base08-hex}}; color: #{{base00-hex}}; }
#base09 { background-color: #{{base09-hex}}; color: #{{base00-hex}}; }
#base0A { background-color: #{{base0A-hex}}; color: #{{base00-hex}}; }
#base0B { background-color: #{{base0B-hex}}; color: #{{base00-hex}}; }
#base0C { background-color: #{{base0C-hex}}; color: #{{base00-hex}}; }
#base0D { background-color: #{{base0D-hex}}; color: #{{base00-hex}}; }
#base0E { background-color: #{{base0E-hex}}; color: #{{base00-hex}}; }
#base0F { background-color: #{{base0F-hex}}; color: #{{base00-hex}}; }
</style>
</head>
<body>
<h2>Primary colors</h2>
<div>
<div id="base00">00</div>
<div id="base01">01</div>
<div id="base02">02</div>
<div id="base03">03</div>
<div id="base04">04</div>
<div id="base05">05</div>
<div id="base06">06</div>
<div id="base07">07</div>
</div>
<h2>Accents</h2>
<div>
<div id="base08">08</div>
<div id="base09">09</div>
<div id="base0A">0A</div>
<div id="base0B">0B</div>
<div id="base0C">0C</div>
<div id="base0D">0D</div>
<div id="base0E">0E</div>
<div id="base0F">0F</div>
</div>
<h2>Documentation</h2>
<p>Each color should be used as described in <a href="https://github.com/chriskempson/base16/blob/main/styling.md#styling-guidelines"> this table</a>.</p>
<p>See the <a href="https://danth.github.io/stylix/">Stylix documentation</a> for how to apply these colors on NixOS.</p>
</body>
</html>

21
stylix/palette.nix
View file

@ -78,14 +78,23 @@ in {
};
config = {
# Making palette.json part of the system closure will protect it from
# garbage collection, so future configurations can be evaluated without
# having to generate the palette again. The generator is not kept, only the
# palette which came from it, so this uses very little disk space.
system.extraDependencies = [ paletteJSON ];
# This attrset can be used like a function too, see
# https://github.com/SenchoPens/base16.nix#mktheme
lib.stylix.colors = base16.mkSchemeAttrs cfg.base16Scheme;
environment.etc = {
# Making palette.json part of the system closure will protect it from
# garbage collection, so future configurations can be evaluated without
# having to generate the palette again. The generator is not kept, only
# the palette which came from it, so this uses very little disk space.
"stylix/palette.json".source = paletteJSON;
# We also provide a HTML version which is useful for viewing the colors
# during development.
"stylix/palette.html".source = config.lib.stylix.colors {
template = builtins.readFile ./palette.html.mustache;
extension = ".html";
};
};
};
}