Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 13:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init dark theme

Browse Source
This commit is contained in:
Jeremy Thomas
2022-12-14 17:15:51 +00:00
parent 89a8b8f208
commit b73e183091
18 changed files with 1194 additions and 671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
sass/themes/dark.scss Normal file
View File

@@ -0,0 +1,64 @@
// $scheme-main: $black;
// $scheme-main-bis: $black-bis;
// $scheme-main-ter: $black-ter;
// $scheme-invert: $white;
// $scheme-invert-bis: $white-bis;
// $scheme-invert-ter: $white-ter;
// $background: $black-ter;
// $border: $grey-darker;
// $border-hover: $grey-dark;
// $border-light: $grey-darker;
// $border-light-hover: $grey-dark;
// $text: $grey-light;
// $text-invert: $grey-darker;
// $text-light: $grey;
// $text-strong: $white;
// $link-hover: $white;
// $link-hover-border: $grey-dark;
// $link-focus: $white;
// $link-focus-border: $blue;
// $link-active: $white;
// $link-active-border: $grey-light;
@include bulma-theme($name: "dark") {
@include register-vars(
(
scheme-main: #{$black-bis},
scheme-main-bis: #{$black-ter},
scheme-main-ter: #{$grey-darker},
scheme-invert: #{$white},
scheme-invert-bis: #{$white-bis},
scheme-invert-ter: #{$white-ter},
background: #{$black-ter},
border: #{$grey-darker},
border-hover: #{$grey-dark},
border-light: #{$grey-darker},
border-light-hover: #{$grey-dark},
text: #{$grey-light},
text-invert: #{$grey-darker},
text-light: #{$grey},
text-strong: #{$white},
link-hover: #{$white},
link-hover-border: #{$grey-dark},
link-focus: #{$white},
link-focus-border: #{$blue},
link-active: #{$white},
link-active-border: #{$grey-light},
shadow: #{0 0.5em 1em -0.125em rgba($white, 0.2),
0 0px 0 1px rgba($white, 0.04)},
)
);
}

91
sass/themes/default.scss
View File

@@ -1,6 +1,31 @@
:root {
@include register-vars(
(
scheme-main: #{$scheme-main},
scheme-main-bis: #{$scheme-main-bis},
scheme-main-ter: #{$scheme-main-ter},
scheme-invert: #{$scheme-invert},
scheme-invert-bis: #{$scheme-invert-bis},
scheme-invert-ter: #{$scheme-invert-ter},
text: #{$text},
text-invert: #{$text-invert},
text-light: #{$text-light},
text-strong: #{$text-strong},
background: #{$background},
border: #{$border},
border-hover: #{$border-hover},
border-light: #{$border-light},
border-light-hover: #{$border-light-hover},
code: #{$code},
code-background: #{$code-background},
pre: #{$pre},
pre-background: #{$pre-background},
link-hover: #{$link-hover},
link-hover-border: #{$link-hover-border},
link-focus: #{$link-focus},
link-focus-border: #{$link-focus-border},
link-active: #{$link-active},
link-active-border: #{$link-active-border},
family-sans-serif: #{$family-sans-serif},
family-monospace: #{$family-monospace},
size-1: #{$size-1},
@@ -23,35 +48,6 @@
radius-large: #{$radius-large},
radius-rounded: #{$radius-rounded},
speed: #{$speed},
scheme-main: #{$white},
scheme-main-bis: #{$white-bis},
scheme-main-ter: #{$white-ter},
scheme-invert: #{$black},
scheme-invert-bis: #{$black-bis},
scheme-invert-ter: #{$black-ter},
background: #{$background},
border: #{$border},
border-hover: #{$border-hover},
border-light: #{$border-light},
border-light-hover: #{$border-light-hover},
text: #{$text},
text-invert: #{$text-invert},
text-light: #{$text-light},
text-strong: #{$text-strong},
code: #{$code},
code-background: #{$code-background},
pre: #{$pre},
pre-background: #{$pre-background},
link-light: #{$link-light},
link-dark: #{$link-dark},
link-visited: #{$link-visited},
link-hover: #{$link-hover},
link-hover-border: #{$link-hover-border},
link-focus: #{$link-focus},
link-focus-border: #{$link-focus-border},
link-active: #{$link-active},
link-active-border: #{$link-active-border},
family-primary: #{$family-primary},
family-secondary: #{$family-secondary},
family-code: #{$family-code},
@@ -63,6 +59,8 @@
)
);
@include register-rgb("shadow-color", $shadow-color);
@each $name, $pair in $colors {
$base: nth($pair, 1);
$invert: nth($pair, 2);
@@ -75,4 +73,39 @@
@each $name, $shade in $shades {
@include register-var($name, $shade);
}
/*@include register-vars(
(
scheme-main: #{getVar("white")},
scheme-main-bis: #{getVar("white-bis")},
scheme-main-ter: #{getVar("white-ter")},
scheme-invert: #{getVar("text-00")},
scheme-invert-bis: #{getVar("text-05")},
scheme-invert-ter: #{getVar("text-10")},
text: #{getVar("text-25")},
text-invert: #{getVar("white")},
text-light: #{getVar("text-55")},
text-strong: #{getVar("text-10")},
background: #{getVar("text-90")},
border: #{getVar("text-85")},
border-hover: #{getVar("text-80")},
border-light: #{getVar("text-90")},
border-light-hover: #{getVar("text-85")},
code: #{getVar("danger-60")},
code-background: #{getVar("text-90")},
pre: #{getVar("text-40")},
pre-background: #{getVar("text-90")},
link-visited: #{$link-visited},
link-hover: #{$link-hover},
link-hover-border: #{$link-hover-border},
link-focus: #{$link-focus},
link-focus-border: #{$link-focus-border},
link-active: #{$link-active},
link-active-border: #{$link-active-border},
)
);*/
}