gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

customize primary color in scss instead of <style> 

because vite will bundle all <link rel=stylesheet> together into one file and append it to the end of <head>,
making it impossible to have <style> tag as the last of all stylesheets,
thus --color-primary in <style> cannot have the highest priority to override the theme.
This commit is contained in:
Reorx 2023-02-14 16:38:18 +08:00
parent 3a68bdf1b7
commit 85f59b4ca3
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -136,7 +136,12 @@ The following environment variables are supported in the build process:
- `DATA_FILENAME`: The CV data to use, can be a relative or absolute path. - `DATA_FILENAME`: The CV data to use, can be a relative or absolute path.
- `OUT_DIR`: The output directory for the generated HTML file. - `OUT_DIR`: The output directory for the generated HTML file.
- `THEME`: The theme to use, must be one of the directory name in `src/themes/`. - `THEME`: The theme to use, must be one of the directory name in `src/themes/`.
- `PRIMARY_COLOR`: The primary color to use, if not passed, it will be determined by the theme.The value of this environment variable should be a CSS color value, such as `#ff0000` for red.
To customize the primary color of the theme, modify the --primary-color CSS variable in index.scss.
Note that making this change will result in unstaged changes in Git. If you want to build the HTML yourself,
it is recommended that you create a new project instead of editing the source code in jsoncv.
For instructions on how to do this,
please refer to the [Build a static CV site](#build-a-static-cv-site) section.
### Build a static CV site ### Build a static CV site
@ -162,11 +167,11 @@ you can follow these steps:
- Change all instances of `./src` to `./jsoncv/src`. - Change all instances of `./src` to `./jsoncv/src`.
- Change the value of `dataFilename` to your CV data file, for example `cv.json`. - Change the value of `dataFilename` to your CV data file, for example `cv.json`.
- Change `renderData.theme` to the theme you want to use. - Change `renderData.theme` to the theme you want to use.
- Change `renderData.primaryColor` to the primary color you want to use.
8. Copy `./jsoncv/index.html` to `index.html` and change all instances of `./src` to `./jsoncv/src`. 8. Copy `./jsoncv/index.html` to `index.html` and change all instances of `./src` to `./jsoncv/src`.
Then Copy `./jsoncv/index.scss` to `index.scss`.
9. Run `npm run build` to test if everything works. 9. Run `npm run build` to test if everything works.
After completing these steps, you can now add your own elements and styles to `index.html` After completing these steps, you can now add your own elements and styles to `index.html` and `index.scss`
to further customize your CV website. You can use HTML, CSS, and JavaScript to add to further customize your CV website. You can use HTML, CSS, and JavaScript to add
your own branding, layout, and functionality to the site. your own branding, layout, and functionality to the site.

9
index.html
View File

@ -16,14 +16,7 @@
</style> </style>
<link rel="stylesheet" href="/src/scss/cv-base.css"> <link rel="stylesheet" href="/src/scss/cv-base.css">
<link rel="stylesheet" href="/src/themes/<%= theme %>/index.scss"> <link rel="stylesheet" href="/src/themes/<%= theme %>/index.scss">
<style> <link rel="stylesheet" href="/index.scss">
:root {
<% if (primaryColor) { %>
/* override primary color */
<%= varNamePrimaryColor %>: <%= primaryColor %>;
<% } %>
}
</style>
</head> </head>
<body> <body>
<div class="cv-container"> <div class="cv-container">

3
index.scss Normal file
View File

@ -0,0 +1,3 @@
:root {
--color-primary: #2A3FFB;
}

1
vite.config.js
View File

@ -12,7 +12,6 @@ const outDir = process.env.OUT_DIR || 'dist'
const data = require(dataFilename) const data = require(dataFilename)
const renderData = getRenderData(data) const renderData = getRenderData(data)
renderData.theme = process.env.THEME || 'reorx' renderData.theme = process.env.THEME || 'reorx'
renderData.primaryColor = process.env.PRIMARY_COLOR
renderData.isProduction = process.env.NODE_ENV === 'production' renderData.isProduction = process.env.NODE_ENV === 'production'
renderData.meta = { renderData.meta = {
title: data.basics.name, title: data.basics.name,