Change color of Bootstrap theme-colors in dark mode? - sass

How can I change theme-colors (primary, secondary, etc.) in Bootstrap 5.X with sass only for dark mode? I get how I can change the primary color in both light and dark theme mode:
custom.scss
... snip ...
#import "../bootstrap/scss/functions";
$primary: #0e548c;
#import "../bootstrap/scss/variables";
... snip ...
But how can I change $primary color to be a little brighter in dark mode? For example: #0062cc
In current documentation (variables_dark.scss) I've found only the variables:
primary-text-dark,
primary-bg-subtle-dark,
...
I get how to change these variable values, but have no idea how to assign non-existing one (there's no primary-dark).
Adding:
#include color-mode(dark) {
$primary: #0062cc;
}
right after #import "../bootstrap/scss/root"; doesn't work either..


Dark mode is new in 5.3 alpha, and there are some issues with color support in dark mode. Currently changing theme colors in dark mode isn't supported.
https://github.com/twbs/bootstrap/issues/37976
As of now, the only way would be to set the individual CSS variables:
[data-bs-theme="dark"] {
--bs-primary: #{$primary};
--bs-primary-bg-subtle: #{$primary};
--bs-primary-bg-subtle-dark: #{$primary};
.btn-primary {
--bs-btn-bg: #{$primary};
}
}
https://codeply.com/p/BmyKLq8RTV
Related: How to properly introduce a light/dark mode in Bootstrap?


Now you can use color mode in new v5.3 with the following
in the <html len="en" data-bs-theme="light">
If you want more colors, make the swith button to a dropdwon button
Bootstrap v5.3 also support auto mode, check on their site with javascript.
$("input[id='lightSwitch']").on("change", function() {
if ($("html").attr("data-bs-theme") == 'light') {
$("html").attr("data-bs-theme", "dark");
} else if ($("html").attr("data-bs-theme") == "dark") {
$("html").attr("data-bs-theme", "light");
}
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en" data-bs-theme="light">
<body>
<div class="form-check form-switch ms-auto mt-2 me-2">
<label class="form-check-label ms-3" for="lightSwitch">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-brightness-high" viewBox="0 0 16 16">
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
</svg>
</label>
<input class="form-check-input" type="checkbox" id="lightSwitch" />
</div>
</body>
</html>

Related

Tcl/Tk: Applying theme (awdark) to an application

I would like to apply the awdark theme to refresh an old apllication. Unable to apply themes using tcl awthemes https://sourceforge.net/projects/tcl-awthemes/, or even the default built in Themes like classic, vista, xpnative.
In the working code below the the "awdark" theme is being applied and I can confirm this by asking ttk::style theme use. But I dont see any changes on the styling of the GUI
lappend auto_path "C:/Root/tcl_tk/33_Dummy_Analyzer_2022/awthemes-10.4.0"
package require awdark
#
ttk::style theme use awdark
#
label .l_inst -text "Instructions: fill in the below fields and click 'Go'"
label .l_year -text "Enter the digits for year, eg 22: "
grid config .l_inst -column 0 -row 0 -columnspan 2 -sticky "w"
grid config .l_year -column 0 -row 1 -sticky "e"
#
set autofill1 22
entry .e_year -bg white -textvariable autofill1 -validate key \
-vcmd {expr {[string is digit %P] && [string length %P]<=2}} -width 20
grid config .e_year -column 1 -row 1 -sticky "e"
#
button .b_go -relief raised -overrelief ridge -borderwidth 5 -text "GO"
button .b_quit -relief raised -overrelief ridge -borderwidth 5 \
-text "Cancel and Close"
grid config .b_go -column 0 -row 8 -sticky "snew" -pady 10
grid config .b_quit -column 1 -row 8 -sticky "snew" -pady 10

You should use ttk::widget to apply a theme, for this replace :
label by ttk::label
entry by ttk::entry
button by ttk::button
Note : Be careful not all properties apply for ttk::widget

Playwright: Click function not happening on visible element

I am trying to click on a link. I have verified the xpath for that element using SelectorsHub and Chropath as well, so there is no issue with the locator. I have tried 3-4 xpaths but I keep on getting the same error. Please see below the error which I am getting in console:-
locator.click: Target closed
=========================== logs ===========================
waiting for selector "//span[contains(text(),'Received Date')]/following-sibling::span/span/span[#aria-label='caret-up']"
selector resolved to visible <span role="img" aria-label="caret-up" class="anticon …>…
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (485.95,278.14)
… intercepts pointer events
retrying click action, attempt #1
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (485.95,278.14)
… intercepts pointer events
Please see below the HTML for this:-
<div class="ant-table-filter-column"><span class="ant-table-column-title"><div class="ant-table-column-sorters"><span class="ant-table-column-title">Received Date</span><span class="ant-table-column-sorter ant-table-column-sorter-full"><span class="ant-table-column-sorter-inner"><span role="img" aria-label="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up active"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path></svg></span><span role="img" aria-label="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg></span></span></span></div></span><span role="button" tabindex="-1" class="ant-dropdown-trigger ant-table-filter-trigger"><span role="img" aria-label="search" class="anticon anticon-search"><svg viewBox="64 64 896 896" focusable="false" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span></div>
Below are the xpaths which I have tried:-
//*[text()='Received Date']/following-sibling::span/span/span[#aria-label='caret-up']
//thead/tr[1]/th[4]/div[1]/span[1]/div[1]/span[2]/span[1]/span[1]
//span[contains(text(),'Received Date')]/following-sibling::span/span/span[#aria-label='caret-up']
Code for clicking - await this.page.locator("//span[contains(text(),'Received Date')]/following-sibling::span/span/span[#aria-label='caret-up']").click();

Please, try to avoid very long or complex Xpaths. They make your code unreadable, they can make errors and they are not the right way to find elements and click on them.
Tell me if this works for you:
button = self.page.locator('//span[contains(text() \
,'Received Date')]').first
button.click()

Konva Textpath: how does it calculate x and y position

EDIT: there was a bug in the code, so this question is not valid.
I'm trying hard to get Konva.textpath to work. The problem is that the x & y point seems completely random.
There are 3 examples. The green box is placed on the same x/y as the textpath, the red line is the path and all paths (in data) starts at 0,0.
Example 1:
Path: M0,0c138.1,0,250,111.9,250,250S138.1,500,0,500s-250-111.9-250-250S-138.1,0,0,0
Example 2:
Same path, but with text overflowing. It's not easy to see, but the start of the path is moved about 18px
Example 3:
Path M0,0c138.1,0,250,111.9,250,250S138.1,500,0,500s-250-111.9-250-250S-138.1,0,0,0
I fail to see any logic to the placement. The expected result would be that x & y of the text should be the start of the text.
These are not some hard to find examples. Every path I try behaves the same.
Thankful for an explanation.

If I understand your question, you are saying that the if you set the co-ords of the small green rectangle to the same (x,y) as the first point in the path then the position does not match the start of the path.
Here is a snippet of code with which I am trying to confirm your result but for me the pink rectangle is placed where it should be.
What other code do you have? Maybe an offset is being applied, or maybe a group ? It seems unlikely that your path starts at stage(0,0) because that would see some clipping of the letter 'L' which would draw partially off the stage.
Conclusion: more info required to repro the issue, or double check your code?
// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container1', width: 600, height: 300});
// Add a layer for line
var layer = new Konva.Layer({draggable: false});
stage.add(layer);
// draw a path.
var path = new Konva.Path({
x: 0,
y: 0,
stroke: 'cyan'
});
layer.add(path)
var dot = new Konva.Rect({x: 0, y: 0, width: 20, height: 20, fill: 'magenta' });
layer.add(dot);
var path = new Konva.Path({
x: 0,
y: 0,
stroke: 'cyan'
})
layer.add(path);
var textpath = new Konva.TextPath({
x: 0,
y: 0,
fill: '#333',
fontSize: 32,
fontFamily: 'Arial',
text: 'Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum'
});
layer.add(textpath);
stage.draw()
$('#path1').on('click', function(){
var data = "M20,20c138.1,0,250,111.9,250,250S138.1,500,0,500s-250-111.9-250-250S-138.1,0,0,0";
textpath.setData(data);
path.setData(data);
var pt = path.getPointAtLength(0);
dot.position({x: pt.x, y: pt.y});
layer.draw();
})
$('#path2').on('click', function(){
var data = "M 120 20 a 100 100 0 1 0 0.00001 0";
textpath.setData(data);
path.setData(data);
var pt = path.getPointAtLength(0);
dot.position({x: pt.x, y: pt.y});
layer.draw();
})
$('#path3').on('click', function(){
var data = "M200 200 S 200.5 200 201.1 200.2 201.5 200.4 202 200.7 202.4 201.1 202.8 201.5 203.1 202.1 203.3 202.7 203.5 203.3 203.6 204 203.5 204.7 203.4 205.4 203.2 206.1 202.9 206.9 202.5 207.6 201.9 208.3 201.3 209 200.6 209.6 199.8 210.1 198.9 210.6 197.9 211 196.8 211.3 195.7 211.5 194.6 211.6 193.3 211.5 192.1 211.4 190.8 211.1 189.6 210.7 188.3 210.1 187.1 209.4 185.9 208.6 184.7 207.6 183.6 206.5 182.6 205.2 181.7 203.9 181 202.4 180.3 200.8 179.8 199.2 179.4 197.4 179.1 195.6 179.1 193.7 179.2 191.8 179.5 189.8 179.9 187.8 180.6 185.9 181.4 184 182.5 182.1 183.7 180.3 185.1 178.5 186.7 176.9 188.4 175.4 190.3 174 192.4 172.8 194.6 171.7 196.9 170.8 199.4 170.1 201.9 169.7 204.5 169.4 207.2 169.4 209.9 169.6 212.6 170 215.3 170.7 218 171.6 220.6 172.8 223.2 174.2 225.7 175.9 228 177.8 230.2 179.9 232.2 182.3 234.1 184.8 235.8 187.5 237.2 190.5 238.4 193.5 239.3 196.7 240 200 240.4 203.4 240.5 206.8 240.3 210.3 239.8 213.9 239 217.4 237.9 220.8 236.4 224.2 234.7 227.5 232.7 230.7 230.3 233.7 227.7 236.5 224.9 239.2 221.7 241.6 218.4 243.8 214.8 245.7 211.1 247.3 207.2 248.5 203.1 249.5 199 250.1 194.7 250.4 190.4 250.3 186.1 249.8 181.8 249 177.5 247.8 173.3 246.2 169.3 244.2 165.3 241.9 161.6 239.2 158 236.2 154.7 232.9 151.6 229.3 148.9 225.4 146.4 221.2 144.3 216.8 142.6 212.2 141.3 207.4 140.3 202.5 139.8 197.5 139.7 192.4 140 187.2 140.8 182.1 142 177 143.6 172 145.7 167.1 148.2 162.4 151.1 157.8 154.5 153.5 158.2 149.5 162.3 145.7 166.7 142.3 171.4 139.2 176.4 136.5 181.6 134.2 187.1 132.4 192.8 131 198.5 130.1 204.4 129.7 210.4 129.8 216.3 130.4 222.2 131.5 228.1 133.1 233.9 135.2 239.4 137.9 244.8 141 250 144.5 254.8 148.5 259.4 153 263.5 157.8 267.3 163 270.6 168.5 273.5 174.4 275.9 180.5 277.8 186.8 279.2 193.4 280 200 280.3 206.7 279.9 213.5 279 220.3 277.6 227 275.5 233.6 272.9 240.1 269.7 246.3 266 252.3 261.8 258 257.1 263.4 251.9 268.4 246.3 272.9 240.3 277 233.9 280.6 227.2 283.7 220.2 286.2 213 288.1 205.6 289.4 198.1 290.1 190.5 290.2 182.9 289.6 175.3 288.4 167.8 286.5 160.5 284 153.3 280.8 146.4 277.1 139.8 272.7 133.6 267.8 127.7 262.4 122.3 256.4 117.4 250 113.1 243.2 109.3 235.9 106.1 228.4 103.5 220.5 101.6 212.4 100.4 204.2 99.8 195.8 100 187.4 100.9 178.9 102.5 170.6 104.8 162.3 107.8 154.2 111.5 146.4 115.9 138.9 120.9 131.7 126.5 124.9 132.7 118.6 139.4 112.8 146.7 107.6 154.4 103 162.4 99 170.9 95.7 179.6 93.1 188.6 91.3 197.7 90.2 206.9 89.8 216.2 90.3 225.5 91.5 234.6 93.5 243.6 96.3 252.4 99.8 260.9 104.1 269 109.1 276.7 114.8 284 121.1 290.7 128.1 296.8 135.7 302.4 143.7 307.2 152.3 311.3 161.2 314.7 170.6 317.3 180.2 319 190 320 200 320.1 210.1 319.4 220.2 317.8 230.2 315.3 240.2 312.1 249.9 308 259.4 303.1 268.5 297.4 277.2 291 285.4 283.9 293.1 276.1 300.3 267.7 306.7 258.8 312.5 249.4 317.5 239.6 321.7 229.4 325.1 218.9 327.7 208.1 329.3 197.3 330.1 186.3 330 175.4 328.9 164.6 326.9 153.9 324 143.5 320.2 133.3 315.5 123.6 309.9 114.3 303.6 105.6 296.4 97.5 288.5 90 279.9 83.2 270.7 77.2 260.9 72.1 250.7 67.8 239.9 64.4 228.8 61.9 217.4 60.4 205.9 59.9 194.1 60.3 182.4 61.8 170.6 64.2 159 67.6 147.6 72 136.4 77.3 125.7 83.5 115.4 90.6 105.6 98.5 96.4 107.2 87.8 116.6 80 126.7 73 137.3 66.8 148.5 61.5 160.1 57.2 172.1 53.8 184.4 51.5 196.9 50.2 209.4 49.9 222 50.7 234.6 52.5 247 55.4 259.1 59.4 270.9 64.4 282.3 70.3 293.2 77.2 303.5 85.1 313.1 93.8 322 103.3 330.2 113.5 337.4 124.5 343.7 136 349.1 148.1 353.4 160.6 356.7 173.5 358.9 186.7 358.9 186.7";
textpath.setData(data);
path.setData(data);
var pt = path.getPointAtLength(0);
dot.position({x: pt.x, y: pt.y});
layer.draw();
})
$('#path1').trigger('click');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<div >
<button id='path1'>Path 1</button>
<button id='path2'>Path 2</button>
<button id='path3'>Path 3</button>
</div>
<div id='container1' style="width: 300px, height: 200px; background-color: silver; margin:10px;padding:10px;"></div>
<div id='img'></div>

Zebra MZ320 - feeds few lines after black mark is found

I am working with Zebra MZ320 printer to integrate Black mark. I am facing issue when black mark is set to True. The printer feeds 2-3 line after black mark is encountered on paper
The command used to calibrate black mark successfully :
! DF CONFIG.SYS
! UTILITIES
BAR-SENSE
LABEL
PRINT
Sample print text :
! 0 200 200 700 1
COUNTRY UK
COUNTRY UK
TEXT 4 0 0 0 -----------------------------------
TEXT 4 0 0 20 xxxxxxxxxxxxxxxxxxxxxxxxxxx
TEXT 4 0 0 50 xxxxxxxxxxxxxxxxxxxxxxxxxxx
TEXT 4 0 0 80 xxxxxxxxxxxxxxxxxxxxxxxxxxx
TEXT 4 0 0 120 xxxxxxxxxxxxxxxxxxxxxxxxxxx
TEXT 4 0 0 150 xxxxxxxxxxxxxxxxxxxxxxxxxxx
TEXT 4 0 0 180 xxxxxxxxxxxxxxxxxxxxxxxxxxx
TEXT 4 0 0 220 xxxxxxxxxxxxxxxxxxxxxxxxxxx
TEXT 4 0 0 260 xxxxxxxxxxxxxxxxxxxxxxxxxxx
TEXT 4 0 0 310 xxxxxxxxxxxxxxxxxxxxxxxxxxx
TEXT 4 0 0 350 xxxxxxxxxxxxxxxxxxxxxxxxxxx
! DF CONFIG.SYS
! UTILITIES
BAR-SENSE
SETFF 0 0
LABEL
PRINT
I have seen many links that prevent extra feeding but they work with FORM / Continuous mode
Already visited and tried these links :
Zebra iMZ320 image printing feeds too much paper
Stop my mobile printer from feeding extra paper using continuous roll?
Stop a Zebra Printer from automatically feeding lots of extra pape
It seems I am missing some configuration while sending commands to printer. Any suggestion is appreciated.

Sometimes these printers need calibration, did you calibrate it? See the calibration procedure in the user manual.
You can recalibrate the printer with Zebra Tools but also with ZPL commands. Sometimes only recalibration with ZPL commands helps.

How to set a NSCalibratedRGBColorSpace ? Cocoa

I need to set a color.
In my case the color returned by a NSColorWell is NSCalibratedRGBColorSpace 0 1 0 1. If I set this color the app crashes. How can I manipulate it ?
Thanks

Resources