dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-24 12:35:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

change colors to be handled inside scss

Browse source
This commit is contained in:
Send_Nukez 2021-11-03 00:18:00 +01:00 committed by GitHub Action
parent c099d5c205
commit e5c3847cd9
5 changed files with 60 additions and 166 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
src/color.ini
View file

@ -1,162 +0,0 @@
[base]
text = FFFFFF
subtext = F0F0F0
sidebar-text = FFFFFF
main = 000000
sidebar = 1ed760
player = 000000
card = 000000
shadow = 202020
selected-row = 797979
button = 1ed760
button-active = 1ed760
button-disabled = 535353
tab-active = 166632
notification = 1db954
notification-error = e22134
misc = BFBFBF
[white]
text = 363636
subtext = 3D3D3D
sidebar-text = FFF9F4
main = FFF9F4
sidebar = FFA789
player = FFF9F4
card = FFF9F4
shadow = d3d3d3
selected-row = 6D6D6D
button = ff8367
button-active = ff8367
button-disabled = 535353
tab-active = ffdace
notification = FFA789
notification-error = e22134
misc = BFBFBF
[dark]
text = F0F0F0
subtext = F0F0F0
sidebar-text = 0a0e14
main = 0a0e14
sidebar = C2D935
player = 0a0e14
card = 0a0e14
shadow = 202020
selected-row = DEDEDE
button = C2D935
button-active = C2D935
button-disabled = 535353
tab-active = 727d2b
notification = C2D935
notification-error = e22134
misc = BFBFBF
[dracula]
text = f8f8f2
subtext = f8f8f2
sidebar-text = F0F0F0
main = 44475a
sidebar = 6272a4
player = 44475a
card = 6272a4
shadow = 000000
selected-row = bd93f9
button = ffb86c
button-active = 8be9fd
button-disabled = 535353
tab-active = 6272a4
notification = bd93f9
notification-error = e22134
misc = BFBFBF
[nord-light]
text = 2e3440
subtext = 3b4252
sidebar-text = ECEFF4
main = ECEFF4
sidebar = 5E81AC
player = ECEFF4
card = ebcb8b
shadow = eceff4
selected-row = 4c566a
button = 81a1c1
button-active = 81a1c1
button-disabled = c0c0c0
tab-active = ebcb8b
notification = a3be8c
notification-error = bf616a
misc = BFBFBF
[nord-dark]
text = ECEFF4
subtext = E5E9F0
sidebar-text = 434c5e
main = 2e3440
sidebar = 88C0D0
player = 2e3440
card = 2e3440
shadow = 2E3440
selected-row = D8DEE9
button = 81A1C1
button-active = 81A1C1
button-disabled = 434C5E
tab-active = 434C5E
notification = A3BE8C
notification-error = BF616A
misc = BFBFBF
[purple]
text = f1eaff
subtext = f1eaff
sidebar-text = e0d0ff
main = 0A0E14
sidebar = 6F3C89
player = 0A0E14
card = 0A0E14
shadow = 3a2645
selected-row = EBDFFF
button = c76af6
button-active = 6F3C89
button-disabled = 535353
tab-active = 58306D
notification = ff9e00
notification-error = f61379
misc = DEDEDE
[samourai]
text = ebdbb2
subtext = ebdbb2
sidebar-text = 461217
main = 461217
sidebar = ebdbb2
player = 461217
card = 461217
shadow = 3a2645
selected-row = 909090
button = e7a52d
button-active = e7a52d
button-disabled = 535353
tab-active = e7a52d
notification = e7a52d
notification-error = e22134
misc = BFBFBF
[beach-sunset]
text = FFFFFF
subtext = F0F0F0
sidebar-text = F0F0F0
main = 262626
sidebar = bd3e3e
player = 262626
card = 262626
shadow = 000000
selected-row = d1d6e2
button = f1a84f
button-active = c98430
button-disabled = 535353
tab-active = f1a84f
notification = c98430
notification-error = e22134
misc = BFBFBF

13
src/loaders/color-loader.js Normal file
View file

@ -0,0 +1,13 @@
const REGEX = /(?<key>.*?):.*?#(?<color>.*?)/gm;
module.exports = function (content, map, meta) {
const matches = [...content.matchAll(REGEX)];
const outLines = ["[base]"];
for (let i = 0; i < matches.length; i++) {
const { key, color } = matches[i].groups;
outLines.push(`${key} = ${color}`);
}
return outLines.join("\n");
};

33
src/styles/Colors.scss Normal file
View file

@ -0,0 +1,33 @@
$colors: (
text: #ffffff,
subtext: #f0f0f0,
sidebar-text: #ffffff,
main: #000000,
sidebar: #1ed760,
player: #000000,
card: #000000,
shadow: #202020,
selected-row: #797979,
button: #1ed760,
button-active: #1ed760,
button-disabled: #535353,
tab-active: #166632,
notification: #1db954,
notification-error: #e22134,
misc: #bfbfbf
);
:root {
@each $key, $color in $colors {
--spice-#{$key}: #{$color};
--spice-rgb-#{$key}: #{red($color)}, #{green($color)}, #{blue($color)};
}
}
@function spiceColor($key, $alpha: 1) {
@if $alpha == 1 {
@return var(--spice-#{$key});
} @else {
@return rgba(var(--spice-rgb-#{$key}), $alpha);
}
}

1
src/styles/main.scss
View file

@ -3,6 +3,7 @@
@return #{"invert("}$v#{")"};
}
@import "Colors";
@import "Inputs";
@import "ConfigMenu";
@import "NoAds";

17
webpack.config.js
View file

@ -6,7 +6,7 @@ const path = require("path");
/** @type {import('webpack').Configuration} */
module.exports = {
entry: [path.resolve(__dirname, "./src/js/main.js"), path.resolve(__dirname, "./src/styles/main.scss")],
entry: [path.resolve(__dirname, "./src/js/main.js"), path.resolve(__dirname, "./src/styles/main.scss"), path.resolve(__dirname, "./src/styles/Colors.scss")],
output: {
path: path.resolve(__dirname, "dist"),
filename: "dribbblish-dynamic.js"
@ -14,12 +14,12 @@ module.exports = {
module: {
rules: [
{
test: /\.js$/,
test: /main\.js$/,
exclude: /node_modules/,
use: []
},
{
test: /\.scss$/,
test: /main\.scss$/,
exclude: /node_modules/,
type: "asset/resource",
generator: {
@ -33,6 +33,15 @@ module.exports = {
}
}
]
},
{
test: /Colors\.scss$/,
exclude: /node_modules/,
type: "asset/resource",
generator: {
filename: "color.ini"
},
use: [path.resolve(__dirname, "./src/loaders/color-loader.js")]
}
]
},
@ -46,7 +55,7 @@ module.exports = {
"process.env.DRIBBBLISH_VERSION": JSON.stringify(process.env.DRIBBBLISH_VERSION || "Dev")
}),
new CopyPlugin({
patterns: [{ from: "src/assets", to: "assets" }, { from: "src/color.ini" }]
patterns: [{ from: "src/assets", to: "assets" }]
})
],
optimization: {