Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-28 19:43:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

separate colors styles from other styles

Browse Source 
this change is made to provide easy changes to colors of the theme
This commit is contained in:
Aman 2025-03-24 10:24:21 +05:30
parent 9e6b7b22a9
commit 96c8e4069a
5 changed files with 87 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
assets/scss/variables.scss → assets/scss/palettes/common.scss
View File

@ -1,3 +1,7 @@
/*
* common scss across all palettes
*/
$defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
$defaultTagColors: #fff, #fff, #fff, #fff, #fff;
@ -11,27 +15,13 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
--main-top-padding: 50px;
}
--body-background: #f5f5fa;
--accent-color: #34495e;
--accent-color-darker: #2c3e50;
--accent-color-text: #fff;
--body-text-color: #707070;
--tag-border-radius: 4px;
--section-separation: 40px;
--scrollbar-thumb: hsl(0, 0%, 85%);
--scrollbar-track: var(--body-background);
&[data-scheme="dark"] {
--body-background: #303030;
--accent-color: #ecf0f1;
--accent-color-darker: #bdc3c7;
--accent-color-text: #000;
--body-text-color: rgba(255, 255, 255, 0.7);
--scrollbar-thumb: hsl(0, 0%, 40%);
--scrollbar-track: var(--body-background);
}
}
@ -51,14 +41,6 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
* Card style
*/
:root {
--card-background: #fff;
--card-background-selected: #eaeaea;
--card-text-color-main: #000;
--card-text-color-secondary: #747474;
--card-text-color-tertiary: #767676;
--card-separator-color: rgba(218, 218, 218, 0.5);
--card-border-radius: 10px;
--card-padding: 20px;
@ -76,15 +58,6 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
@include respond(md) {
--small-card-padding: 25px;
}
&[data-scheme="dark"] {
--card-background: #424242;
--card-background-selected: rgba(255, 255, 255, 0.16);
--card-text-color-main: rgba(255, 255, 255, 0.9);
--card-text-color-secondary: rgba(255, 255, 255, 0.7);
--card-text-color-tertiary: rgba(255, 255, 255, 0.5);
--card-separator-color: rgba(255, 255, 255, 0.12);
}
}
/**
@ -106,34 +79,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
*/
:root {
--blockquote-border-size: 4px;
--blockquote-background-color: rgb(248 248 248);
--heading-border-size: 4px;
--link-background-color: 189, 195, 199;
--link-background-opacity: 0.5;
--link-background-opacity-hover: 0.7;
--pre-background-color: #272822;
--pre-text-color: #f8f8f2;
--code-background-color: rgba(0, 0, 0, 0.12);
--code-text-color: #808080;
--table-border-color: #dadada;
--tr-even-background-color: #efefee;
--kbd-border-color: #dadada;
&[data-scheme="dark"] {
--code-background-color: #272822;
--code-text-color: rgba(255, 255, 255, 0.9);
--table-border-color: #717171;
--tr-even-background-color: #545454;
--blockquote-background-color: rgb(75 75 75);
}
}
/*

80
assets/scss/palettes/default.scss Normal file
View File

@ -0,0 +1,80 @@
/*
* Default palette
*/
@import "common.scss";
/*
* Global style
*/
:root {
--body-background: #f5f5fa;
--accent-color: #34495e;
--accent-color-darker: #2c3e50;
--accent-color-text: #fff;
--body-text-color: #707070;
--scrollbar-thumb: hsl(0, 0%, 85%);
&[data-scheme="dark"] {
--body-background: #303030;
--accent-color: #ecf0f1;
--accent-color-darker: #bdc3c7;
--accent-color-text: #000;
--body-text-color: rgba(255, 255, 255, 0.7);
--scrollbar-thumb: hsl(0, 0%, 40%);
}
}
/*
* Card style
*/
:root {
--card-background: #fff;
--card-background-selected: #eaeaea;
--card-text-color-main: #000;
--card-text-color-secondary: #747474;
--card-text-color-tertiary: #767676;
--card-separator-color: rgba(218, 218, 218, 0.5);
&[data-scheme="dark"] {
--card-background: #424242;
--card-background-selected: rgba(255, 255, 255, 0.16);
--card-text-color-main: rgba(255, 255, 255, 0.9);
--card-text-color-secondary: rgba(255, 255, 255, 0.7);
--card-text-color-tertiary: rgba(255, 255, 255, 0.5);
--card-separator-color: rgba(255, 255, 255, 0.12);
}
}
/*
* Article content style
*/
:root {
--blockquote-background-color: rgb(248 248 248);
--link-background-color: 189, 195, 199;
--pre-background-color: #272822;
--pre-text-color: #f8f8f2;
--code-background-color: rgba(0, 0, 0, 0.12);
--code-text-color: #808080;
--table-border-color: #dadada;
--tr-even-background-color: #efefee;
--kbd-border-color: #dadada;
&[data-scheme="dark"] {
--code-background-color: #272822;
--code-text-color: rgba(255, 255, 255, 0.9);
--table-border-color: #717171;
--tr-even-background-color: #545454;
--blockquote-background-color: rgb(75 75 75);
}
}

2
assets/scss/style.scss
View File

@ -7,7 +7,7 @@
*/
@import "breakpoints.scss";
@import "variables.scss";
@import "palettes/{{ .Site.Params.colorPalette | default "default" }}.scss";
@import "grid.scss";
@import "external/normalize.scss";

2
layouts/partials/head/style.html
View File

@ -1,3 +1,3 @@
{{ $sass := resources.Get "scss/style.scss" }}
{{- $sass := resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . }}
{{ $style := $sass | toCSS | minify | resources.Fingerprint "sha256" }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

1
theme.toml
View File

@ -18,6 +18,7 @@ features = [
"darkmode",
"table of contents",
"search",
"multiple color palettes",
]
min_version = "0.123.0"