This repository has been archived by the owner on Jul 20, 2024. It is now read-only.
forked from scaffold-eth/eth-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request scaffold-eth#122 from calvbore/nightmode
Add dark theme switch
- Loading branch information
Showing
18 changed files
with
1,467 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| const gulp = require('gulp') | ||
| const gulpless = require('gulp-less') | ||
| const postcss = require('gulp-postcss') | ||
| const debug = require('gulp-debug') | ||
| var csso = require('gulp-csso') | ||
| const autoprefixer = require('autoprefixer') | ||
| const NpmImportPlugin = require('less-plugin-npm-import') | ||
|
|
||
| gulp.task('less', function () { | ||
| const plugins = [autoprefixer()] | ||
|
|
||
| return gulp | ||
| .src('src/themes/*-theme.less') | ||
| .pipe(debug({title: 'Less files:'})) | ||
| .pipe( | ||
| gulpless({ | ||
| javascriptEnabled: true, | ||
| plugins: [new NpmImportPlugin({prefix: '~'})], | ||
| }), | ||
| ) | ||
| .pipe(postcss(plugins)) | ||
| .pipe( | ||
| csso({ | ||
| debug: true, | ||
| }), | ||
| ) | ||
| .pipe(gulp.dest('./public')) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| const watch = require("node-watch"); | ||
| const { exec } = require("child_process"); | ||
|
|
||
| const run = () => { | ||
| console.log("Compiling & Generating..."); | ||
| exec("npx gulp less", function (error, stdout, stderr) { | ||
| console.log(stdout); | ||
| if (error) console.log(error); | ||
| if (stderr) console.log(stderr); | ||
| }); | ||
| }; | ||
|
|
||
| console.log("🔬 Watching Themes..."); | ||
| watch("./src/themes", { recursive: true }, function (evt, name) { | ||
| console.log("%s changed.", name); | ||
| run(); | ||
| }); | ||
| run(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import { Switch } from "antd"; | ||
| import { useThemeSwitcher } from "react-css-theme-switcher"; | ||
|
|
||
| export default function ThemeSwitcher() { | ||
|
|
||
| const theme = window.localStorage.getItem("theme"); | ||
| const [isDarkMode, setIsDarkMode] = useState(!theme || theme == "light" ? false : true); | ||
| const { switcher, currentTheme, status, themes } = useThemeSwitcher(); | ||
|
|
||
| useEffect(() => { | ||
| window.localStorage.setItem("theme", currentTheme); | ||
| }, [currentTheme]); | ||
|
|
||
| const toggleTheme = (isChecked) => { | ||
| setIsDarkMode(isChecked); | ||
| switcher({ theme: isChecked ? themes.dark : themes.light }); | ||
| }; | ||
|
|
||
| // Avoid theme change flicker | ||
| // if (status === "loading") { | ||
| // return null; | ||
| // } | ||
|
|
||
| return ( | ||
| <div className="main fade-in" style={{paddingTop: "60px", paddingBottom: "170px"}}> | ||
| <h2>The current theme is: {currentTheme ? currentTheme : "light"}</h2> | ||
| <Switch checked={isDarkMode} onChange={toggleTheme} /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| @import "~antd/lib/style/color/colorPalette.less"; | ||
| @import "~antd/dist/antd.less"; | ||
| @import "~antd/lib/style/themes/dark.less"; | ||
|
|
||
| // These are shared variables that can be extracted to their own file | ||
| @primary-color: #2caad9; | ||
| @border-radius-base: 4px; | ||
|
|
||
| @component-background: #212121; | ||
| @body-background: #212121; | ||
| @popover-background: #212121; | ||
| @border-color-base: #6f6c6c; | ||
| @border-color-split: #424242; | ||
| @table-header-sort-active-bg: #424242; | ||
| @card-skeleton-bg: #424242; | ||
| @skeleton-color: #424242; | ||
| @table-header-sort-active-bg: #424242; | ||
|
|
||
| @link-color: @text-color; | ||
| @icon-color: @primary-color; | ||
|
|
||
| .highlight { | ||
| background-color: #3f3f3f; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| @import "~antd/lib/style/color/colorPalette.less"; | ||
| @import "~antd/dist/antd.less"; | ||
| @import "~antd/lib/style/themes/default.less"; | ||
|
|
||
| // These are shared variables that can be extracted to their own file | ||
| // @primary-color: #00adb5; | ||
| @border-radius-base: 4px; | ||
|
|
||
| @link-color: @text-color; | ||
| @icon-color: @primary-color; | ||
|
|
||
| .highlight { | ||
| background-color: #f9f9f9; | ||
| } |
Oops, something went wrong.