diff --git a/.gitignore b/.gitignore
index 651665b..762eda3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
node_modules
.git
+dist
diff --git a/README.md b/README.md
index 62b31da..ffb66ab 100644
--- a/README.md
+++ b/README.md
@@ -7,34 +7,50 @@
-## If you prefer light mode
+## Usage
+### If you want to autodetect mode
```html
-
+
```
-## If you prefer dark mode
+### If you prefer light mode
+```html
+
+
+
+
+
+```
+### If you prefer dark mode
```html
-
+
```
# Release
-
+## Autodetect Mode
You can release/compile and minimize css by typing:
```
node_modules/gulp/bin/gulp.js release
```
+## Dark Mode
and to release dark mode:
```
node_modules/gulp/bin/gulp.js release --dark
```
+
+## Light Mode
+and to release light mode:
+```
+node_modules/gulp/bin/gulp.js release --light
+```
diff --git a/grave-light.css b/grave-light.css
new file mode 100644
index 0000000..2a01202
--- /dev/null
+++ b/grave-light.css
@@ -0,0 +1,34 @@
+@import "src/vendor/reset.css";
+@import "src/text.css";
+@import "src/figure.css";
+@import "src/form.css";
+@import "src/button.css";
+@import "src/structure.css";
+@import "src/tooltip.css";
+
+:root {
+ --global-page-background-color: #fff;
+ --global-font-color: #374252;
+ --global-form-background-color: #ecf0f1;
+ --global-form-background-color-active: #dce0e1;
+ --global-form-background-color-valid: #2ecc71a6;
+ --global-form-font-color: #7f8c8d;
+ --global-form-shadow-color: 0 3px 0 #7f8c8d;
+ --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
+ --global-text-code-background-color: rgba(0, 0, 0, 0.1);
+ --image-width: 20rem;
+
+ font-size: 16px;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: var(--global-page-background-color);
+ font-family: 'Roboto', sans-serif;
+ max-width: 970px;
+ margin: 0 auto;
+ padding: 0 15px;
+}
diff --git a/grave.css b/grave.css
index 2a01202..90fbd91 100644
--- a/grave.css
+++ b/grave.css
@@ -7,17 +7,6 @@
@import "src/tooltip.css";
:root {
- --global-page-background-color: #fff;
- --global-font-color: #374252;
- --global-form-background-color: #ecf0f1;
- --global-form-background-color-active: #dce0e1;
- --global-form-background-color-valid: #2ecc71a6;
- --global-form-font-color: #7f8c8d;
- --global-form-shadow-color: 0 3px 0 #7f8c8d;
- --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
- --global-text-code-background-color: rgba(0, 0, 0, 0.1);
- --image-width: 20rem;
-
font-size: 16px;
}
@@ -32,3 +21,33 @@ body {
margin: 0 auto;
padding: 0 15px;
}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --global-page-background-color: #36393e;
+ --global-font-color: #a7a7a7;
+ --global-form-background-color: #ecf0f1;
+ --global-form-background-color-active: #dce0e1;
+ --global-form-background-color-valid: #ecf0f1;
+ --global-form-font-color: #7f8c8d;
+ --global-form-shadow-color: 0 3px 0 #7f8c8d;
+ --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
+ --global-text-code-background-color: rgba(236, 240, 241, 0.1);
+ --image-width: 20rem;
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ --global-page-background-color: #fff;
+ --global-font-color: #374252;
+ --global-form-background-color: #ecf0f1;
+ --global-form-background-color-active: #dce0e1;
+ --global-form-background-color-valid: #2ecc71a6;
+ --global-form-font-color: #7f8c8d;
+ --global-form-shadow-color: 0 3px 0 #7f8c8d;
+ --global-form-shadow-color-active: 0 1px 0 #7f8c8d;
+ --global-text-code-background-color: rgba(0, 0, 0, 0.1);
+ --image-width: 20rem;
+ }
+}
diff --git a/gulpfile.js b/gulpfile.js
index c3ee037..4d65647 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,14 +1,23 @@
'use strict';
-var gulp = require('gulp');
-var csso = require('gulp-csso');
-var cssimport = require('gulp-cssimport');
+const gulp = require('gulp');
+const csso = require('gulp-csso');
+const cssimport = require('gulp-cssimport');
// var csscomb = require('gulp-csscomb');
-var rename = require('gulp-rename');
-var stylelint = require('gulp-stylelint');
+const rename = require('gulp-rename');
+const stylelint = require('gulp-stylelint');
// Prepare for distribution
gulp.task('release', function () {
+ if (process.argv[3] === '--light') {
+ return gulp
+ .src('grave-light.css')
+ .pipe(cssimport({matchPattern: '*.css'}))
+ .pipe(csso())
+ .pipe(rename('grave-light.min.css'))
+ .pipe(gulp.dest('dist'));
+ }
+
if (process.argv[3] === '--dark') {
return gulp
.src('grave-dark.css')
diff --git a/index.html b/index.html
index 0a8669f..0b968e9 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
Grave UI
-
+